জেমিনি সিএলআই, ব্রাউজারএমসিপি এবং নাট্যকারের সাহায্যে স্বয়ংক্রিয় ইউআই পরীক্ষা করা

1. ভূমিকা

ওয়েব অ্যাপ্লিকেশন পরীক্ষা করা বেশ ঝামেলার কাজ হতে পারে। ঐতিহ্যবাহী UI পরীক্ষা প্রায়শই ভঙ্গুরতার বিরুদ্ধে একটি অবিরাম লড়াইয়ের মতো মনে হয়। আপনি নিজেকে জটিল স্ক্রিপ্ট লিখতে, ভঙ্গুর CSS এবং XPath নির্বাচকদের পরিচালনা করতে এবং একটি সাধারণ ব্যবহারকারী প্রবাহ যাচাই করার জন্য বিভিন্ন ধরণের কাজ করতে দেখতে পাবেন।

কিন্তু যদি আপনি একজন এজেন্টকে প্রাকৃতিক ভাষায় বলতে পারেন যে কী পরীক্ষা করতে হবে, এবং সে ঠিক... তা করে ফেলেছে?

এই কোডল্যাবে, আমরা জেমিনি CLI এবং ব্রাউজারএমসিপির মতো মাল্টিমোডাল টুলগুলি কীভাবে ব্যবহার করতে হয় তা অন্বেষণ করব। আপনি প্রাকৃতিক ভাষা ব্যবহার করে স্বয়ংক্রিয় UI পরীক্ষাগুলি কীভাবে তৈরি এবং চালানো যায় তা দেখতে পাবেন। মনে রাখবেন যে এই কোডল্যাবের জন্য UI পরীক্ষার ফ্রেমওয়ার্ক এবং সরঞ্জামগুলির কোনও পূর্ব জ্ঞানের প্রয়োজন নেই।

তুমি যা শিখবে

• মডেল কনটেক্সট প্রোটোকল (MCP) কী এবং কেন এটি একটি যুগান্তকারী পরিবর্তন।
• ব্রাউজারএমসিপি কীভাবে এআই এজেন্টদের ওয়েব ব্রাউজার নিয়ন্ত্রণ করতে সক্ষম করে।
• জেমিনি সিএলআই থেকে স্বয়ংক্রিয় ইউআই পরীক্ষা কীভাবে চালানো যায়।
• এজেন্টদের দক্ষতা এবং তাদের সুবিধাগুলি বোঝা।
• একজন এজেন্টকে দক্ষতার সাথে নাট্যকার ব্যবহার শেখানো।
• অ্যান্টিগ্র্যাভিটি ব্রাউজার সাবএজেন্টের এক ঝলক।
• ব্রাউজার নিয়ন্ত্রণের জন্য অন্যান্য ব্যবহারের ক্ষেত্রে।

তুমি কি করবে

• আপনার উন্নয়ন পরিবেশ সেট আপ করুন।
• এমন একটি ডেমো অ্যাপ্লিকেশন অন্বেষণ করুন যার পরীক্ষার প্রয়োজন।
• ব্রাউজারএমসিপির মাধ্যমে অ্যাপ্লিকেশনটির সাথে ইন্টারঅ্যাক্ট করতে জেমিনি সিএলআই ব্যবহার করুন।
• আপনার এজেন্টকে নাট্যকারকে এজেন্ট দক্ষতার সাথে ব্যবহার করতে শেখান।

2. পূর্বশর্ত

মজার জিনিসগুলিতে ডুব দেওয়ার আগে, আসুন নিশ্চিত করি যে আপনার প্রয়োজনীয় সবকিছু আছে।

এই কোডল্যাবটি জেমিনি সিএলআই , এমসিপি টুলস, এজেন্ট দক্ষতা এবং একটি রিঅ্যাক্ট ডেমো অ্যাপ্লিকেশন ব্যবহার করে।

যন্ত্র

এই ল্যাব ধরে নিচ্ছে যে আপনার ইতিমধ্যেই আছে:

• ক্রোম ব্রাউজার
• জেমিনি সিএলআই (যা নিজেই নোডেজের উপর নির্ভর করে)
• গিট

নির্দেশাবলী ধরে নিয়েছে যে আপনি একটি Linux (অথবা WSL) অথবা macOS পরিবেশে কাজ করছেন। যদি আপনি Windows ব্যবহার করেন (আমার মতো), তাহলে আপনি WSL ব্যবহার করে এটি অনুসরণ করতে পারেন।

(মনে রাখবেন যে

ব্রাউজারএমসিপি গুগল ক্লাউড শেল থেকে কাজ করবে না

, কারণ এটি শুধুমাত্র একই মেশিনে চলমান স্থানীয় ব্রাউজারের সাথে সংযুক্ত হবে।)

একটি গুগল ক্লাউড প্রজেক্ট তৈরি করুন

যদি আপনার কাছে ইতিমধ্যেই একটি জেমিনি এপিআই কী থাকে, তাহলে আপনি এটি ব্যবহার করতে পারেন এবং এই ধাপটি এড়িয়ে যেতে পারেন।

অন্যথায়, আপনার একটি Google ক্লাউড প্রজেক্টের প্রয়োজন হবে। আমরা কোনও Google ক্লাউড পরিষেবা স্থাপন করব না, তবে আপনার একটি Gemini API কী সংযুক্ত করার জন্য প্রকল্পটি প্রয়োজন। (Gemini ব্যবহার করার জন্য আপনার কীটি প্রয়োজন।)

আপনি যদি গুগল ক্লাউডের সাথে পরিচিত হন, তাহলে আপনি এখানে একটি নতুন প্রকল্প তৈরি করতে পারেন। বিকল্পভাবে, আপনি গুগল এআই স্টুডিওর ভেতর থেকে একটি গুগল ক্লাউড প্রকল্প তৈরি করতে পারেন।

বিনামূল্যে একটি জেমিনি এপিআই কী তৈরি করুন

এখন তুমি গুগল এআই স্টুডিওতে তোমার জেমিনি এপিআই কী তৈরি করবে। "গেট এপিআই কী" এ ক্লিক করো।

তুমি এরকম কিছু দেখতে পাবে:

আপনার যদি বিদ্যমান কী থাকে, তাহলে এখানেই তা তালিকাভুক্ত করা হবে। অথবা একটি নতুন কী তৈরি করতে, "API কী তৈরি করুন" এ ক্লিক করুন।

এখানে আপনি একটি বিদ্যমান গুগল ক্লাউড প্রকল্প নির্বাচন করতে পারেন, অথবা একটি নতুন তৈরি করতে পারেন। এখানে আমি agentic-ui-demo নামে একটি নতুন প্রকল্প তৈরি করেছি:

এই মুহূর্তে আমাদের কাছে একটি প্রকল্প এবং সংশ্লিষ্ট জেমিনি এপিআই কী রয়েছে। আমরা বিলিং সক্ষম করিনি, তাই আমরা উদার বিনামূল্যের কোটায় সীমাবদ্ধ। তবে আপনি যদি আরও কোটা চান, তাহলে আপনি "সেট আপ বিলিং" এ ক্লিক করে বিলিং সক্ষম করতে পারেন।

ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করুন

আমি GitHub-এ একটি ডেমো রেপো তৈরি করেছি। এতে একটি নমুনা অ্যাপ্লিকেশন রয়েছে যা আমরা আমাদের UI পরীক্ষার জন্য ব্যবহার করতে পারি। এগিয়ে যান এবং আপনার স্থানীয় টার্মিনাল থেকে এটি চালিয়ে এটি ক্লোন করুন:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

এরপর, .env নামক নমুনা .env.template ফাইলের একটি কপি তৈরি করুন। আপনি এটি আপনার এডিটরে করতে পারেন, অথবা এই কমান্ডটি চালান:

cp .env.template .env

এই .env ফাইলটি আপনার নিজস্ব API কী দিয়ে আপডেট করুন। (মনে রাখবেন: আপনার .env ফাইলটি কখনই আপনার API কী-এর মতো তথ্য দিয়ে চেক-ইন করবেন না!) এটি করার সবচেয়ে সহজ উপায় হল এটি আপনার সম্পাদকে খোলা।

এবার এনভায়রনমেন্ট ভেরিয়েবল লোড করা যাক:

source .env

ডেমো অ্যাপটি চালু করার জন্য পরিবেশ সেটআপ করা সহজ করার জন্য আমি একটি Makefile তৈরি করেছি। আমাদের পরিবেশ শুরু করার জন্য এটি চালান:

make install

৩. আমাদের ডেমো অ্যাপ্লিকেশন

আজ আমরা যে অ্যাপটি পরীক্ষা করছি তা হল The Dazbo Omni-Dash - নিরাপত্তা টেলিমেট্রি পরিচালনার জন্য একটি ভবিষ্যতবাদী, অন্ধকার-থিমযুক্ত ড্যাশবোর্ড। (হ্যাঁ, এটি ভাইব কোডেড ছিল!)

কেন এই অ্যাপ?

এটি একটি বাস্তবসম্মত পরীক্ষার পৃষ্ঠ প্রদানের জন্য তৈরি করা হয়েছে যার মধ্যে রয়েছে:

• মক অথেনটিকেশন: একটি লগইন প্রবাহ যার জন্য নির্দিষ্ট শংসাপত্রের প্রয়োজন হয়।
• গতিশীল বিষয়বস্তু: টেলিমেট্রি কার্ড এবং নিরাপত্তা লগ যা রিয়েল-টাইম ডেটা অনুকরণ করে।
• ইন্টারেক্টিভ অবস্থা: নেভিগেশন মেনু এবং ফর্ম ইনপুট যা ব্যবহারকারীর কর্মের উপর ভিত্তি করে পরিবর্তিত হয়।
• আধুনিক প্রযুক্তি: দ্রুত, প্রতিক্রিয়াশীল অভিজ্ঞতার জন্য React এবং Vite দিয়ে তৈরি।

অ্যাপটি চালু করা হচ্ছে

অ্যাপ্লিকেশনটি শুরু করতে, কেবল চালান:

make dev

ডেভেলপমেন্ট সার্ভারটি খুব দ্রুত শুরু হবে এবং অ্যাপটি http://localhost:5173 এ উপলব্ধ হবে।

আমরা কেবল লিঙ্কটিতে ক্লিক করে আমাদের ব্রাউজারে অ্যাপ্লিকেশনটি খুলতে পারি। আপনার টার্মিনালে এই প্রক্রিয়াটি চালিয়ে যেতে দিন। আমরা পরবর্তী টার্মিনাল কমান্ডগুলি একটি পৃথক টার্মিনাল সেশনে সম্পাদন করব।

৪. UI পরীক্ষার চ্যালেঞ্জ

ঐতিহ্যবাহী UI পরীক্ষা সঠিকভাবে করা খুবই কঠিন এবং বজায় রাখা আরও কঠিন। সাধারণ সমস্যাগুলির মধ্যে রয়েছে:

• "ফ্লেকিনেস" পরীক্ষা: যে পরীক্ষাগুলি এক মিনিট সময় নষ্ট করে এবং পরের মিনিটে ব্যর্থ হয়, সময়ের সমস্যা, রেসের অবস্থা, অথবা ধীর-লোডিং সম্পদের কারণে।
• ভঙ্গুর নির্বাচক: নির্দিষ্ট DOM কাঠামোর উপর নির্ভর করা (যেমন div > div > বোতাম) যা সামান্য UI পরিবর্তনের সাথেই ভেঙে যায়, যার ফলে ক্রমাগত স্ক্রিপ্ট রক্ষণাবেক্ষণ করা হয়।
• উচ্চ শিক্ষার বক্ররেখা: একটি মৌলিক ক্লিক স্বয়ংক্রিয় করার জন্য ডেভেলপারদের জটিল ডোমেন-নির্দিষ্ট ভাষা এবং ফ্রেমওয়ার্ক-নির্দিষ্ট বৈশিষ্ট্য (সাইপ্রেস, সেলেনিয়াম, নাট্যকার) আয়ত্ত করতে হবে।
• পরিবেশগত সমতা: প্রতিলিপি করা কঠিন অ্যাপ্লিকেশন অবস্থা এবং পরীক্ষার তথ্য পরিষ্কার করার অতিরিক্ত খরচের সাথে লড়াই।

আমাদের এমন একটি পরীক্ষা পদ্ধতির প্রয়োজন যা বাস্তবায়নের চেয়ে উদ্দেশ্যের উপর দৃষ্টি নিবদ্ধ করে।

৫. উদ্ধারের জন্য এমসিপি

মডেল কনটেক্সট প্রোটোকল (MCP) হল একটি উন্মুক্ত মান যা AI মডেল এবং এজেন্টদের বহিরাগত সরঞ্জাম, API এবং ডেটার সাথে ইন্টারঅ্যাক্ট করার অনুমতি দেয়। এটিকে সর্বজনীন অ্যাডাপ্টার হিসাবে ভাবুন যা মডেল এবং এজেন্টদের তাদের অ্যাক্সেসযোগ্য সরঞ্জামগুলি খুঁজে পেতে এবং কার্যকর করতে দেয়।

ঐতিহ্যগতভাবে, বহিরাগত ডেটা এবং সরঞ্জামগুলির সাথে লার্জ ল্যাঙ্গুয়েজ মডেল (LLM) একীভূত করার জন্য ডেভেলপারদের প্রতিটি নতুন ডেটা উৎসের জন্য কাস্টম, হার্ড-কোডেড API সংযোগ লিখতে হত, যা একটি অস্থিতিশীল "M x N" ইন্টিগ্রেশন সমস্যা তৈরি করে যেখানে প্রতিটি নতুন মডেল এবং সরঞ্জাম রক্ষণাবেক্ষণের বোঝাকে বহুগুণ করে দেয়। মডেল কনটেক্সট প্রোটোকল (MCP) এই ক্ষমতাগুলিকে সুসংগঠিত করার জন্য নির্দিষ্ট কোড লেখার প্রয়োজনীয়তা দূর করে এটি সমাধান করে। জটিল এক্সিকিউশন ওয়ার্কফ্লোগুলিকে স্পষ্টভাবে কোড করার পরিবর্তে, ডেভেলপাররা ব্যবহারকারীর স্বাভাবিক ভাষার অনুরোধগুলি ব্যাখ্যা করার জন্য LLM-এর উপর নির্ভর করতে পারেন এবং গতিশীলভাবে কোন সরঞ্জামগুলি ব্যবহার করবেন সে সম্পর্কে যুক্তি দিতে পারেন।

যখন একজন ব্যবহারকারী একটি প্রাকৃতিক ভাষা কমান্ড জারি করেন (যেমন "localhost:5173-এ নেভিগেট করুন, 'অ্যাডমিন' হিসেবে লগইন করুন, এবং সাবমিট বোতামে ক্লিক করুন" ), LLM উপলব্ধ ক্ষমতাগুলি আবিষ্কার করে এবং একটি নির্দিষ্ট টুল চালু করার জন্য একটি কাঠামোগত অনুরোধ তৈরি করে। MCP ক্লায়েন্ট একটি অনুবাদক হিসাবে কাজ করে, এই অনুরোধটিকে মনোনীত MCP সার্ভারে রাউটিং করে, যা ক্রিয়াটি কার্যকর করে বা ডেটা আনে এবং মডেলে প্রসঙ্গ ফিরিয়ে দেয়। এটি AI-কে স্বায়ত্তশাসিতভাবে কাজ করার ক্ষমতা দেয়, ডেভেলপারকে নির্দিষ্ট এক্সিকিউশন পাথ হার্ড-কোড না করে।

যেহেতু MCP একটি সার্বজনীন মান তৈরি করে — যা প্রায়শই "AI অ্যাপ্লিকেশনের জন্য USB-C" হিসাবে বর্ণনা করা হয় — এটি বিশাল অফ-দ্য-শেল্ফ পুনঃব্যবহারযোগ্যতা আনলক করে। ডেভেলপাররা একবার একটি MCP সার্ভার তৈরি করতে পারে, এবং যেকোনো MCP-সামঞ্জস্যপূর্ণ AI হোস্ট তাৎক্ষণিকভাবে এর সাথে সংযোগ স্থাপন করতে পারে, যা M x N ইন্টিগ্রেশন সমস্যা দূর করে। আপনাকে আর প্রতিটি প্ল্যাটফর্মের জন্য কাস্টম API ব্রিজ তৈরি করতে হবে না; পরিবর্তে, আপনি GitHub, Slack, ডাটাবেস, যেকোনো সাধারণ পরিষেবার জন্য পূর্বে তৈরি, ওপেন-সোর্স MCP সার্ভারের ইকোসিস্টেম ব্যবহার করতে পারেন; সেগুলিকে সরাসরি আপনার এজেন্টিক ওয়ার্কফ্লোতে প্লাগ করতে পারেন। এই মডুলার, প্লাগ-এন্ড-প্লে আর্কিটেকচার নিশ্চিত করে যে আপনি যদি LLM সরবরাহকারীদের স্যুইচ করেন বা পরে আপনার সরঞ্জামগুলি আপগ্রেড করেন, তবে আপনার মূল ইন্টিগ্রেশন অবকাঠামো সম্পূর্ণ অপরিবর্তিত থাকে।

৬. ব্রাউজারএমসিপি দিয়ে অটোমেশন

ব্রাউজারএমসিপি কী?

আজ আমরা এটিই প্রথম টুলটি ব্যবহার করব। BrowserMCP হল একটি MCP সার্ভার যা AI এজেন্টদের "চোখ" এবং "হাত" দেয় যা একটি ওয়েব ব্রাউজারের সাথে ইন্টারঅ্যাক্ট করার জন্য প্রয়োজন। সংক্ষেপে, এটি একটি ব্রাউজারের সাথে মানুষের মিথস্ক্রিয়া অনুকরণ করে। এটি ওপেন সোর্স এবং আপনি এখানে GitHub রেপো দেখতে পারেন। এখানে মূল BrowserMCP ডকুমেন্টেশন দেখুন।

এখানে এর কিছু ক্ষমতা দেওয়া হল:

• এটি URL গুলিতে নেভিগেট করতে পারে।
• এটি DOM পরিদর্শন করতে পারে।
• এটি বোতামে ক্লিক করতে পারে এবং ফর্মগুলিতে টেক্সট টাইপ করতে পারে।
• এটি টেনে-হিঁচড়ে ফেলতে পারে।
• এটি ব্রাউজার কনসোল লগ পড়তে পারে।
• এটি দ্রুত: অটোমেশন আপনার মেশিনে স্থানীয়ভাবে ঘটে।

ব্রাউজার এমসিপি ইনস্টল করা হচ্ছে

BrowserMCP ব্যবহার করতে, আপনাকে দুটি জিনিস করতে হবে:

1. Chrome (অথবা যেকোনো Chromium-ভিত্তিক ব্রাউজার) এ BrowserMCP এক্সটেনশনটি ইনস্টল করুন।
2. আপনার এজেন্টের জন্য MCP সার্ভার কনফিগার করুন।

এক্সটেনশনটি ইনস্টল করতে, এখানে দেওয়া নির্দেশাবলী অনুসরণ করুন। এতে মাত্র কয়েক সেকেন্ড সময় লাগে। এবং একবার এটি ইনস্টল হয়ে গেলে, আপনার বর্তমান ট্যাবটি আপনার এজেন্ট দ্বারা নিয়ন্ত্রিত করার জন্য আপনি এক্সটেনশনের "কানেক্ট" এ ক্লিক করুন। (অবশ্যই, আপনি চান যে বর্তমান ট্যাবটিই সেই ট্যাব যেখানে ডেমো অ্যাপ্লিকেশনটি চলছে!)

এরপর, আমাদের ক্লায়েন্টে MCP কনফিগারেশন যোগ করতে হবে:

 "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }

আপনি এটি কোথায় কনফিগার করবেন? আচ্ছা, এটি আপনার এজেন্টের উপর নির্ভর করে। উদাহরণস্বরূপ, জেমিনি CLI তে: ~/.gemini/settings.json । এটি দেখতে এরকম কিছু হবে:

ব্রাউজারএমসিপি দিয়ে পরীক্ষা করা হচ্ছে

এবার ম্যাজিকের কথা বলি। প্রথমে, একটি নতুন টার্মিনাল সেশনে ( gemini চালিয়ে) Gemini CLI চালু করা যাক। (মনে রাখবেন আমাদের প্রাথমিক টার্মিনাল সেশনে ডেমো অ্যাপ্লিকেশনটি চলছে।) Gemini CLI এর ভিতরে, /mcp চালান এবং পরীক্ষা করুন যে এটি সঠিকভাবে ইনস্টল করা আছে। আপনি এই ধরণের সরঞ্জামগুলির একটি তালিকা দেখতে পাবেন:

যদি আপনি আগে ডেমো অ্যাপ্লিকেশনটি শুরু না করে থাকেন, তাহলে এখনই এটি চালু করুন:

make dev

আমাদের Chrome ব্রাউজারে অ্যাপটি খুলতে হবে এবং সেই ট্যাবে BrowserMCP এক্সটেনশনটি সংযুক্ত করতে হবে। run কমান্ডের লিঙ্কটি অনুসরণ করুন। তারপর BrowserMCP এক্সটেনশন আইকনে ক্লিক করুন এবং "Connect" এ ক্লিক করুন।

এখন আমরা একটি পরীক্ষা চালানোর জন্য Gemini CLI ব্যবহার করতে পারি। এই প্রম্পটটি কপি করে আপনার Gemini CLI তে পেস্ট করুন:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

জেমিনি সিএলআই প্রথমে পরীক্ষা করতে পারে যে ডেমো অ্যাপ্লিকেশনটি নির্দিষ্ট পোর্টে চলছে কিনা। তারপর এটি আপনাকে যে টুল অ্যাকশনগুলি নেওয়ার পরিকল্পনা করছে তা নিশ্চিত করতে বলবে:

এই সেশনের জন্য সমস্ত BrowserMCP টুল চালানোর জন্য Gemini CLI-কে অনুমতি দিন। তারপর ব্রাউজারে ফিরে যান, এবং স্বয়ংক্রিয় ইন্টারঅ্যাকশনগুলি দেখুন!

উপরের প্রম্পট সম্পর্কে কিছু বিষয় মনে রাখবেন:

• যদি অ্যাপ্লিকেশনটি ইতিমধ্যেই লগ ইন করা থাকে, তাহলে আমরা এজেন্টকে লগআউট করতে বলার মাধ্যমে শুরু করি। মনে রাখবেন যে আমাদের এজেন্টকে "Exit Gateway" এর মতো নির্দিষ্ট টেক্সটে ক্লিক করতে বলার প্রয়োজন নেই। কী ক্লিক করতে হবে তা নির্ধারণ করা যথেষ্ট বুদ্ধিমানের কাজ।
• লগ ইন করে মূল পৃষ্ঠাটি রেন্ডার করার পর, এজেন্ট টেলিমেট্রি তথ্য ক্যাপচার করে। আবার, আমাদের এজেন্টকে নির্দিষ্ট টাইলস দেখতে বা নির্দিষ্ট শব্দ মেলাতে বলার প্রয়োজন নেই। তাই যদি আমরা পরে এই পৃষ্ঠায় দেখানো তথ্য প্রসারিত বা পরিবর্তন করি, তাহলেও এই প্রম্পটটি কাজ করবে এবং আউটপুটটি এখনও আমাদের মার্কডাউন টেবিলে ক্যাপচার করা হবে।

দারুন, তাই না?

আপাতত BrowserMCP এর কাজ শেষ, তাই আপনার ব্রাউজার থেকে এটি ডিসকানেক্ট করুন ।

৭. দক্ষতা এবং নাট্যকারের সাথে অটোমেশন

ব্রাউজারএমসিপির সীমাবদ্ধতা

BrowserMCP দারুন, কিন্তু এর কিছু সীমাবদ্ধতা আছে। উদাহরণস্বরূপ:

• এর জন্য একটি বিদ্যমান ব্রাউজার সেশন প্রয়োজন, যার সাথে BrowserMCP এক্সটেনশন সংযুক্ত থাকবে। (এটি নতুন সেশন তৈরি করে না।)
• এটি নন-ক্রোমিয়াম ব্রাউজারগুলিকে সমর্থন করে না।
• এটি চালানোর জন্য একটি পৃথক ব্রাউজার প্রক্রিয়া প্রয়োজন যা একই মেশিনে চলছে যেখানে MCP সার্ভার চলছে।
• এটি স্থানীয় ফাইল সিস্টেমের সাথে কাজ করতে সক্ষম নয়। উদাহরণস্বরূপ, এটি স্ক্রিনশট প্রমাণের জন্য স্থানীয় ফাইল তৈরি করতে পারে না, অথবা ওয়েব অ্যাপ্লিকেশন থেকে ফাইল ডাউনলোড এবং সংরক্ষণ করতে পারে না, যেমন ডাউনলোডযোগ্য PDF।
• এটি অ-নির্ধারণী। এটি আপনার বলা পদক্ষেপগুলি গ্রহণ করার চেষ্টা করবে, কিন্তু স্থানীয় অবস্থা, যেমন একটি অপ্রত্যাশিত পপ-আপ, মিথস্ক্রিয়াটি ভেঙে দিতে পারে।
• এটি "হেডলেস" অপারেশন সমর্থন করে না, অর্থাৎ এটি একটি বাস্তব ব্রাউজার উইন্ডো ছাড়া CI/CD পাইপলাইনে চলতে পারে না।

নাট্যকার

নাট্যকার অনেক বেশি উন্নত একটি টুল। এটি একটি সুপ্রতিষ্ঠিত, ওপেন-সোর্স ব্রাউজার অটোমেশন এবং টেস্টিং ফ্রেমওয়ার্ক। এটি এমন অনেক কিছু করতে পারে যা BrowserMCP পারে না, যার মধ্যে উপরে উল্লেখিত সমস্ত বুলেটও রয়েছে।

এটি জটিল, নির্ভরযোগ্য, পুনরাবৃত্তিযোগ্য পরীক্ষার পরিস্থিতি চালানোর জন্য অনেক বেশি উপযুক্ত। এবং এটি দীর্ঘমেয়াদী সেশনের সাথে কাজ করার জন্য, অথবা সমান্তরালভাবে একাধিক স্বাধীন সেশন চালানোর জন্য বিশেষভাবে উপযুক্ত।

কিন্তু এই ধরনের অতিরিক্ত ক্ষমতার সাথে শেখার একটি অনেক বেশি কঠিন প্রক্রিয়া আসে।

দক্ষতা

সৌভাগ্যবশত, আমাদের সরাসরি নাট্যকার ব্যবহার শিখতে হবে না। পরিবর্তে, আমরা একটি এজেন্ট দক্ষতা ব্যবহার করতে পারি।

তাহলে, এজেন্ট দক্ষতা আসলে কী? এটিকে ডোমেন দক্ষতার একটি শক্তভাবে প্যাকেজ করা বান্ডিল হিসাবে ভাবুন যা আপনি আপনার এআই এজেন্টকে নির্দিষ্ট কিছু করার প্রয়োজন হলে হস্তান্তর করতে পারেন। এতে নির্দেশাবলী, সেরা অনুশীলন এবং কখনও কখনও একটি নির্দিষ্ট কাজের জন্য তৈরি সহায়ক স্ক্রিপ্টও রয়েছে।

এখানে সত্যিই চতুর অংশটি হল: প্রগতিশীল প্রকাশ। প্রতিটি সম্ভাব্য API ডক এবং পরীক্ষার কাঠামোর নিয়মকে LLM-এর প্রাথমিক সিস্টেম প্রম্পটে ঢোকানোর পরিবর্তে - যা আপনার প্রসঙ্গ উইন্ডোটি খেয়ে ফেলে এবং কারও ব্যবসার মতো টোকেনগুলিকে পুড়িয়ে দেয় - এজেন্ট কেবল তখনই দক্ষতাটি পড়ে যখন তার আসলে এটির প্রয়োজন হয়। এটি বেসলাইন প্রসঙ্গকে মসৃণ এবং গড়পড়তা রাখে, ঠিক সময়ে বিস্তারিত "কীভাবে করবেন" তা নিয়ে আসে। এবং হ্যাঁ, একটি দক্ষতায় কাজটি সম্পন্ন করার জন্য নির্দিষ্ট MCP সার্ভারগুলিকে কীভাবে কাজে লাগানো যায় তার নির্দেশাবলী অন্তর্ভুক্ত থাকতে পারে।

দ্য ম্যাট্রিক্সের সেই দৃশ্যের মতো ভাবুন: এজেন্ট একটি সমস্যা দেখে, বুঝতে পারে যে তার নাট্যকারকে জানা দরকার, দক্ষতা ডাউনলোড করে, এবং হঠাৎ: "আমি কুংফু জানি।" বুম। তাৎক্ষণিক বিশেষজ্ঞ।

দক্ষতা সম্পর্কে আরও জানতে চাইলে, নিম্নলিখিত বিষয়গুলি দেখুন:

• টিউটোরিয়াল: গুগল অ্যান্টিগ্র্যাভিটি দক্ষতা দিয়ে শুরু করা
• কোডল্যাব: গুগল অ্যান্টিগ্র্যাভিটি দক্ষতা রচনা

নাট্যকারের জন্য দক্ষতা কেন নিখুঁত?

এখানে দক্ষতা ব্যবহার করা একটি দুর্দান্ত পছন্দ। নাট্যকার অবিশ্বাস্যভাবে শক্তিশালী, কিন্তু এর বাক্য গঠন জটিল হতে পারে। এজেন্টকে নাট্যকার দক্ষতা প্রদানের মাধ্যমে, আমাদের LLM-এর পুরনো বাক্য গঠন বা ভঙ্গুর নির্বাচক লেখার বিষয়ে চিন্তা করতে হবে না। আমরা এটিকে নাট্যকারকে সঠিকভাবে কীভাবে ব্যবহার করতে হয় তার জন্য একটি কিউরেটেড, প্রামাণিক প্লেবুক দিচ্ছি।

আমি নাট্যকার CLI এবং এর সাথে সম্পর্কিত দক্ষতা ব্যবহার করব।

এই পদ্ধতির মাধ্যমে আমরা স্থানীয়ভাবে নাট্যকার CLI ইনস্টল করি, এবং তারপর আমাদের এজেন্টকে এটি ব্যবহার করার জন্য প্রয়োজনীয় জ্ঞান দেই। যেকোনো বিভ্রান্তি এড়াতে: আমি কোনও নাট্যকার MCP সার্ভার ইনস্টল করছি না।

ইনস্টল করা হচ্ছে

প্রথমে ওপেন সোর্স মাইক্রোসফট প্লেয়ারাইট CLI ইনস্টল করা যাক। যদি আপনি ইতিমধ্যেই এটি না করে থাকেন, তাহলে / quit`` লিখে Gemini CLI বন্ধ করুন। তারপর, আপনার টার্মিনালে:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

আর এখন স্কিল যোগ করা যাক। এই কমান্ডটি স্কিল সাবফোল্ডারটি সরাসরি GitHub থেকে আমাদের Gemini skills ফোল্ডারে ডাউনলোড করবে:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

এখন আমরা এটি পরীক্ষা করতে পারি।

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

এটি একটি ব্রাউজার সেশন তৈরি করবে, যা নির্দিষ্ট URL-এ খোলা হবে।

আমি চাই জেমিনি "হেডেড" মোডে নাট্যকার ব্যবহার করতে সক্ষম হোক, অর্থাৎ একটি দৃশ্যমান UI সহ। কিন্তু দক্ষতা জেমিনিকে এটি কীভাবে করতে হবে তা বলে না। তাই আমি Core বিভাগে ~/.gemini/skills/playwright-cli/SKILL.md এ এই লাইনগুলি যুক্ত করেছি:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

নাট্যকারের সাথে পরীক্ষা করা হচ্ছে

আগের মতোই, আমাদের অ্যাপ্লিকেশনটি চালু করতে হবে (যদি এটি ইতিমধ্যেই চলমান না থাকে)। প্রাথমিক টার্মিনাল সেশন থেকে এটি করুন:

make dev

তারপর, অন্য টার্মিনাল সেশনে, আসুন সাময়িকভাবে BrowserMCP নিষ্ক্রিয় করি যাতে এজেন্ট কোন টুল ব্যবহার করতে হবে তা নিয়ে বিভ্রান্ত না হয়। Gemini CLI পুনরায় চালু করুন, এবং তারপর চালান:

/mcp disable browsermcp

এখন আমরা জেমিনিকে প্লে-রাইটের সাথে আমাদের অ্যাপ্লিকেশনে যেতে বলব। কিন্তু BrowserMCP-এর মতো নয়, আমাদের প্রথমে ব্রাউজার চালু করার প্রয়োজন নেই। প্লে-রাইট আমাদের জন্য একটি স্থানীয় প্রক্রিয়ার মাধ্যমে এটি করবে।

জেমিনি সিএলআই-তে এই প্রম্পটটি প্রবেশ করান:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(সবসময়ের মতো, জেমিনি সিএলআই যেকোনো টুল চালানোর আগে অনুমতি চাইবে।)

এখানে আলাদা কী?

• আমাদের প্রথমে ব্রাউজারটি চালু করার দরকার ছিল না।
• আমাদের ব্রাউজার এক্সটেনশন শুরু করে সংযোগ করার দরকার ছিল না।
• আমাদের এজেন্টকে প্রথমে লগঅফ করতে বলার দরকার নেই। পরীক্ষাটি একটি "পরিষ্কার" সেশন থেকে শুরু হয়।
• আমরা স্ক্রিনশট নিতে এবং স্থানীয় ফাইল হিসেবে সংরক্ষণ করতে সক্ষম।

কিছুক্ষণ পরেই আপনি output ফোল্ডারে একটি dashboard.png ফাইল দেখতে পাবেন।

মনে রাখবেন যে আপনি জেমিনি সিএলআই-তে টুল কলগুলি কার্যকর হতে দেখবেন, কিন্তু আপনি ব্রাউজার ইউআই দেখতে পাবেন না। কারণ প্লেরাইট ডিফল্টরূপে "হেডলেস মোডে" চলে।

কিন্তু যদি আপনি এই সংশোধিত প্রম্পটটি পুনরায় ব্যবহার করেন, তাহলে আপনি UIটিও দেখতে পারবেন:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

শীঘ্রই, জেমিনি সিএলআই আউটপুটটি এরকম কিছু দেখাবে:

কত অসাধারণ ছিল এটা?

৮. আপনি অ্যান্টিগ্র্যাভিটিতে এটি করতে পারেন!

গুগল অ্যান্টিগ্র্যাভিটিতে ব্রাউজার সাবএজেন্ট অন্তর্ভুক্ত রয়েছে, যা নাট্যকার সিএলআই-এর মতোই ক্ষমতা প্রদান করে। যখন আপনি অ্যান্টিগ্র্যাভিটিতে জেমিনিকে ইন্টারেক্টিভভাবে একটি URL স্পিন করতে বলেন, তখন এটি স্বয়ংক্রিয়ভাবে এই সাবএজেন্টটি স্পিন করবে।

এই সাবএজেন্ট আপনার উচ্চ-স্তরের লক্ষ্য (যেমন "লগইন ফর্মটি কাজ করছে কিনা তা পরীক্ষা করে দেখুন") গ্রহণ করে, স্ক্রিনশট এবং DOM এর মাধ্যমে পৃষ্ঠার লেআউটটি দৃশ্যত বিশ্লেষণ করে এবং ক্লিক এবং কীস্ট্রোক নিজেই বের করে। এটি মূলত একটি ভিজ্যুয়াল, মাল্টিমোডাল AI যা একজন মানুষের মতো ওয়েবে নেভিগেট করে। এবং সবচেয়ে ভালো দিকটি কি? এটি স্বয়ংক্রিয়ভাবে ভিডিও রেকর্ড করে এবং এটি যা করে তার স্ক্রিনশট নেয়, যা এটি অর্জন করেছে তার ভিজ্যুয়াল প্রমাণ হিসাবে সরাসরি আপনার স্থানীয় কর্মক্ষেত্রে সংরক্ষণ করে। অ্যান্টিগ্র্যাভিটি এই ভিজ্যুয়াল প্রমাণকে আর্টিফ্যাক্টস বলে।

WSL ব্যবহারকারীদের জন্য একটি নোট: অ্যান্টিগ্র্যাভিটিতে ব্রাউজার এজেন্টকে কাজ করানো একটু মাথাব্যথার বিষয়। আমি এটি কাজ করতে পেরেছি , কিন্তু এই পরিবেশে সাবএজেন্টটি আমার কাছে অসঙ্গত এবং অবিশ্বস্ত মনে হয়। তাই নাট্যকার CLI আমার ভালো লাগার অন্যতম কারণ!

৯. ব্রাউজার অটোমেশনের জন্য অন্যান্য ব্যবহারের ক্ষেত্রে

ব্রাউজার অটোমেশন কেবল শুক্রবার বিকেলে স্থাপনের আগে আপনার লগইন বোতামটি কাজ করছে কিনা তা নিশ্চিত করার জন্য নয়। একবার আপনি বুঝতে পারেন যে আপনি সরাসরি একটি ব্রাউজারে একটি LLM সংযোগ স্থাপন করতে পারেন, তখন দেশীয়, এজেন্টিক প্রকল্পের একটি সম্পূর্ণ নতুন জগৎ উন্মোচিত হয়।

যদি আপনি নিজের AI এজেন্ট তৈরি করেন, তাহলে ভারী কাজ করার জন্য BrowserMCP বা Playwright CLI এর মতো টুল ব্যবহার করার কয়েকটি উপায় এখানে দেওয়া হল:

• ব্যক্তিগত গবেষণা সহকারী: কল্পনা করুন যে আপনি আপনার এজেন্টকে একটি নির্দিষ্ট URL-এর দিকে নির্দেশ করেছেন এবং একটি বিষয় নিয়ে গবেষণা করতে বলছেন, কিন্তু সাইটটিতে লগ ইন করতে হবে এবং জটিল মেনুতে নেভিগেট করতে হবে। পরের সপ্তাহে ভেঙে যাওয়া একটি কাস্টম ওয়েব স্ক্র্যাপার লেখার পরিবর্তে, আপনি কেবল আপনার এজেন্টকে লগ ইন করতে, ডেটাতে নেভিগেট করতে এবং আপনার জন্য এটি সংক্ষিপ্ত করতে বলুন।
• "সুইভেল-চেয়ার" ইন্টিগ্রেটর: আমাদের সকলেরই এমন লিগ্যাসি ইন্ট্রানেট সিস্টেম আছে যাদের API নেই। আপনি জানেন যেগুলো - যেখানে আপনাকে সিস্টেম A থেকে ম্যানুয়ালি ডেটা কপি করতে হবে এবং সিস্টেম B-এর একটি ফর্মে পেস্ট করতে হবে। ব্রাউজার অটোমেশন সহ একটি এজেন্ট সর্বজনীন আঠা হিসেবে কাজ করতে পারে, লিগ্যাসি সিস্টেমের স্ক্রিনটি পড়ে এবং নতুনটিতে ফর্মটি পূরণ করতে পারে।
• স্বয়ংক্রিয় ট্রায়েজ এবং প্রতিকার: আপনার মনিটরিং সিস্টেম থেকে ভোর ৩টায় P1 অ্যালার্ট পেয়েছেন? আপনার এজেন্ট স্বয়ংক্রিয়ভাবে নির্দিষ্ট ড্যাশবোর্ড URL খুলতে পারে, গ্রাফ বা লগগুলি পড়তে পারে (তার মাল্টিমোডাল ভিশন ক্ষমতা ব্যবহার করে), এবং সরাসরি আপনার স্ল্যাক চ্যানেলে একটি সারাংশ পোস্ট করতে পারে, যা কোনও ঘটনার সময় আপনার মূল্যবান মিনিট বাঁচায়।

এই পদ্ধতির সৌন্দর্য হলো, আপনি আর কোন API গুলি উপলব্ধ তা সীমাবদ্ধ রাখবেন না। যদি একজন মানুষ ব্রাউজারে এটি করতে পারে, তাহলে আপনার এজেন্টও তা করতে পারবে।

১০. উপসংহার

অভিনন্দন! আপনি কেবল একজন AI এজেন্টকে সরল ইংরেজিতে আপনি কী করতে চান তা বলে স্বয়ংক্রিয়, শক্তিশালী UI পরীক্ষা তৈরি এবং সম্পাদন করেছেন। কোনও ভঙ্গুর CSS নির্বাচক নেই, কোনও জটিল সেটআপ স্ক্রিপ্ট নেই।

তুমি শিখেছো:

• UI পরীক্ষা বেদনাদায়ক হতে হবে না: ভঙ্গুর DOM বাস্তবায়নের পরিবর্তে পরীক্ষার উদ্দেশ্যের উপর মনোযোগ দিয়ে, আমরা রক্ষণাবেক্ষণের ওভারহেড ব্যাপকভাবে কমাতে পারি।
• মডেল কনটেক্সট প্রোটোকল (MCP) আপনার এজেন্টদের সরঞ্জাম, ডেটা এবং পরিবেশে সর্বজনীন, প্লাগ-এন্ড-প্লে অ্যাক্সেস দেয়।
• আপনার স্থানীয়, বিদ্যমান Chrome সেশনে এজেন্টিক ক্ষমতা আনার জন্য BrowserMCP একটি অবিশ্বাস্য হাতিয়ার।
• দক্ষতা এবং নাট্যকার CLI পুনরাবৃত্তিযোগ্য, নির্ধারক অটোমেশন পরীক্ষার একটি নতুন স্তর উন্মোচন করে — সবকিছুই প্রগতিশীল প্রকাশ দ্বারা চালিত।
• অ্যান্টিগ্র্যাভিটির ব্রাউজার সাবএজেন্ট স্বায়ত্তশাসিত, মাল্টিমোডাল নেভিগেশন এবং আর্টিফ্যাক্ট রেকর্ডিং সরাসরি বাক্সের বাইরে প্রবর্তন করে সবকিছুকে আরও এক ধাপ এগিয়ে নিয়ে গেছে।

এখন, এগিয়ে যান এবং বিরক্তিকর জিনিসগুলি স্বয়ংক্রিয় করুন!

উপকারী লিংক

আজ আমরা যে সরঞ্জাম এবং ধারণাগুলি নিয়ে আলোচনা করেছি সেগুলি সম্পর্কে যদি আপনি আরও গভীরভাবে জানতে চান, তাহলে এই সংস্থানগুলি দেখুন:

রেপো কোড

• এজেন্টিক-ইউআই-টেস্টিং গিটহাব রেপো

মূল সরঞ্জাম এবং কাঠামো

• ব্রাউজারএমসিপি গিটহাব রিপোজিটরি
• ব্রাউজারএমসিপি ডকুমেন্টেশন
• নাট্যকার
• গুগল এআই স্টুডিও

এজেন্টিক ধারণা এবং দক্ষতা

• টিউটোরিয়াল: গুগল অ্যান্টিগ্র্যাভিটি দক্ষতা দিয়ে শুরু করা
• কোডল্যাব: অ্যান্টিগ্র্যাভিটি দক্ষতা দিয়ে শুরু করা
• ড্যাজবোর মূল ব্লগ: সেকেন্ডের মধ্যে একটি স্বয়ংক্রিয় UI পরীক্ষা তৈরি করা

অন্যান্য

• WSL-এ Google Antigravity-এর সাথে কাজ করা