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

১. ভূমিকা

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

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

b09119516acbc09e.png

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

আপনি যা শিখবেন

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

আপনি যা করবেন

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

২. পূর্বশর্তসমূহ

আকর্ষণীয় বিষয়গুলোতে যাওয়ার আগে, চলুন নিশ্চিত হয়ে নিই যে আপনার প্রয়োজনীয় সবকিছু আছে।

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

সরঞ্জাম

এই ল্যাবটি ধরে নেয় যে আপনার কাছে ইতিমধ্যেই নিম্নলিখিত বিষয়গুলো রয়েছে:

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

Gemini CLI ব্যবহার করার জন্য, আপনাকে Google দিয়ে প্রমাণীকরণ করতে হবে। এটি করার কয়েকটি উপায় আছে, কিন্তু আমরা কেবল 'Sign-in with Google' বিকল্পটি ব্যবহার করার পরামর্শ দিই। এই বিকল্পটির সাথে Gemini ব্যবহারের একটি বড়সড় ফ্রি কোটা পাওয়া যায় এবং এর জন্য কোনো Google Cloud প্রজেক্টের প্রয়োজন হয় না। কোডল্যাব অনুসরণ করার সময় আপনি যদি এই বিকল্পটি ব্যবহার করেন, তাহলে কোনো খরচ হবে না। (আপনার কাছে যদি আগে থেকেই একটি Gemini API কী থাকে, তবে আপনি এর পরিবর্তে সেটি ব্যবহার করতে পারেন।)

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

(লক্ষ্য করুন যে)

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

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

উন্নয়ন পরিবেশ সেটআপ করুন

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

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

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

make install

# Or if you don't have make
npm install --prefix demo-app

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

আজ আমরা যে অ্যাপটি পরীক্ষা করছি তা হলো ড্যাজবো অমনি-ড্যাশ — নিরাপত্তা টেলিমেট্রি পরিচালনার জন্য একটি ভবিষ্যৎমুখী, ডার্ক-থিমযুক্ত ড্যাশবোর্ড। (হ্যাঁ, এটি ভাইব কোড করা হয়েছে!)

3b004164e4db3f8e.png

এই অ্যাপটি কেন?

এটি একটি বাস্তবসম্মত পরীক্ষার পৃষ্ঠতল প্রদানের জন্য তৈরি করা হয়েছে, যার বৈশিষ্ট্যগুলো হলো:

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

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

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

make dev

# Or if you don't have make
npm run dev --prefix demo-app

ডেভেলপমেন্ট সার্ভারটি খুব দ্রুত চালু হয়ে যাবে এবং অ্যাপটি http://localhost:5173 ঠিকানায় পাওয়া যাবে।

dbd4ccd437f0ef92.png

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

৪. UI টেস্টিং-এর চ্যালেঞ্জ

প্রচলিত UI টেস্টিং সঠিকভাবে করা অত্যন্ত কঠিন এবং তা বজায় রাখা আরও বেশি দুরূহ। এর সাধারণ সমস্যাগুলোর মধ্যে রয়েছে:

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

7afb2d2f08c71c32.png

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

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

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

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

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

86d97bfc6d81bee7.png

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

৬. BrowserMCP দিয়ে অটোমেশন

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

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

9f43c65a25e21d2c.png

এর কয়েকটি সক্ষমতা নিচে দেওয়া হলো:

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

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

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

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

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

6008c83a31bed7ea.png

এরপরে, আমাদের আপনার ক্লায়েন্টে আসল BrowserMCP সার্ভারটি যুক্ত করতে হবে। Gemini CLI-তে এটি করা খুবই সহজ। শুধু এক্সটেনশনটি ইনস্টল করুন:

gemini extensions install https://github.com/derailed-dash/browsermcp-ext

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

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

8d1f2576a21f5f84.png

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

make dev

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

86aeb8303e5d18ad.png

এখন আমরা 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.

Gemini CLI প্রথমে পরীক্ষা করে দেখতে পারে যে ডেমো অ্যাপ্লিকেশনটি নির্দিষ্ট পোর্টে চলছে কিনা। তারপর, এটি যে টুল অ্যাকশনগুলো নিতে চলেছে, তা নিশ্চিত করার জন্য আপনাকে অনুরোধ করবে:

99d6dee1eb7f6bd1.png

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

উপরের নির্দেশটি সম্পর্কে কয়েকটি বিষয় লক্ষণীয়:

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

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

আপাতত BrowserMCP নিয়ে আমাদের কাজ শেষ, তাই আপনার ব্রাউজারে এটি ডিসকানেক্ট করুন

৭. স্কিলস এবং প্লেরাইটের সাহায্যে অটোমেশন

BrowserMCP-এর সীমাবদ্ধতা

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

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

নাট্যকার

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

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

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

দক্ষতা

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

fdadb11ff7d25b75.png

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

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

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

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

নাট্যকারের জন্য দক্ষতা কেন উপযুক্ত

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

আমি প্লেরাইট সিএলআই এবং এর সংশ্লিষ্ট দক্ষতাটি ব্যবহার করতে যাচ্ছি।

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

ইনস্টল করা

চলুন প্রথমে ওপেন সোর্স মাইক্রোসফট প্লেরাইট সিএলআই (Microsoft Playwright 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

এবং এখন চলুন স্কিলটি যোগ করি। এই কমান্ডটি সরাসরি গিটহাব থেকে স্কিল সাবফোল্ডারটি আমাদের জেমিনি স্কিলস ফোল্ডারে ডাউনলোড করবে:

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

এর ফলে একটি ব্রাউজার সেশন চালু হবে, যা নির্দিষ্ট ইউআরএল-এ খুলবে।

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

# 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

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

Gemini CLI-তে এই প্রম্পটটি প্রবেশ করান:

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.

(বরাবরের মতোই, Gemini CLI যেকোনো টুল চালানোর আগে অনুমতি চাইবে।)

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

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

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

লক্ষ্য করুন যে আপনি Gemini CLI-তে টুল কলগুলো চলতে দেখবেন, কিন্তু ব্রাউজার UI দেখতে পাবেন না। এর কারণ হলো Playwright ডিফল্টভাবে 'হেডলেস মোডে' চলে।

কিন্তু আপনি যদি এই সংশোধিত প্রম্পটটি দিয়ে আবার চালান, তাহলে আপনি 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 record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

শীঘ্রই, Gemini CLI আউটপুটটি দেখতে অনেকটা এইরকম হবে:

c8d69d883439b7c7.png

সেটা কী দারুণ ছিল!

৮. কিন্তু দাঁড়ান, Chrome DevTools MCP-ও তো আছে!

ক্রোম ডেভটুলস হলো ক্রোম ব্রাউজারে অন্তর্নির্মিত একগুচ্ছ ওয়েব ডেভেলপার টুল, যা ওয়েব ডেভেলপমেন্ট এবং ডিবাগিংয়ের জন্য ব্যবহৃত হয়। এটি অনেক দিন ধরেই আছে। আপনি তো জানেনই... ক্রোমে ‘More Tools -> Developer Tools’ খুললে যে কনসোলটি ব্যবহার করা যায়।

কিন্তু এখন এটির নিজস্ব একটি এমসিপি সার্ভার আছে, যা গত বছর জেমিনি সিএলআই (Gemini CLI) থেকে ব্রাউজার অটোমেশনের কথা ভাবার সময় ছিল না। কিন্তু এখন, আপনি আপনার ব্রাউজারে কিছু ইনস্টল না করেই এবং কোনো লোকাল সিএলআই ইনস্টল না করেই, ব্রাউজারএমসিপি (BrowserMCP) দিয়ে যা যা করতে পারেন তার সবকিছু এবং প্লেরাইট (Playwright) দিয়ে করা যায় এমন বেশিরভাগ কাজ করতে পারবেন।

চলুন চেষ্টা করে দেখা যাক!

এই মুহূর্তে, আমরা যাচাই করে দেখেছি যে এটি গুগল ক্লাউড শেলে কাজ করছে। তাই, এই অংশের জন্য, চলুন গুগল ক্লাউড কনসোলের মধ্যে গুগল ক্লাউড শেল ব্যবহার করি।

কনসোলটি খুলুন এবং একটি ক্লাউড শেল সেশন খুলুন। সেখান থেকে:

# Clone the sample app - like we did before
git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

# Build the application - like we did before
make install

# Install the Chrome DevTools MCP server Gemini CLI Extension
gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp

এখন আমাদের ক্লাউড শেলে একটি ক্রোম এক্সিকিউটেবল ইনস্টল করতে হবে:

# Get the latest executable for Ubuntu
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

# Install it
sudo apt install ./google-chrome-stable_current_amd64.deb -y

# Check it and get the executable path
which google-chrome

# Cleanup
rm google-chrome-stable_current_amd64.deb

শেষ একটি ধাপ: Chrome DevTools MCP সার্ভারকে আমাদের জানাতে হবে যে Chrome এক্সিকিউটেবলটি কোথায় খুঁজে পাওয়া যাবে। আমরা MCP সার্ভার কনফিগারেশনে executable-path অপশনটি সেট করে এবং এটিকে headless করে এটি করতে পারি। এর জন্য আমাদের ~/.gemini/extensions/chrome-devtools-mcp/gemini-extension.json ফাইলটি এডিট করতে হবে:

{
  "name": "chrome-devtools-mcp",
  "version": "latest",
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executable-path=/usr/bin/google-chrome",
        "--headless"
      ]
    }
  }
}

দারুণ! এখন আর কোনো সমস্যা হওয়ার কথা না। ক্লাউড শেল থেকে gemini চালু করুন এবং আগের মতোই /mcp list কমান্ডটি ব্যবহার করে MCP সার্ভারটি চলছে কিনা তা পরীক্ষা করুন।

অবশেষে, আমরা একটি প্রম্পটের মাধ্যমে এটি পরীক্ষা করার জন্য প্রস্তুত।

চলুন, কাজটা একটু অন্যভাবে করা যাক। এবার আমরা Gemini CLI-কে ডেমো অ্যাপ্লিকেশনটি চালু করতে এবং এর সাথে সংযোগ স্থাপন করতে বলব:

Launch my demo application with `make dev`. Then, using Chrome DevTools MCP, connect to the application at  the exposed localhost URL. 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.

বরাবরের মতোই, আপনাকে এমসিপি সার্ভারটি চালানোর অনুমতি দিতে বলা হবে। কিন্তু আপনি আরও লক্ষ্য করবেন যে এটি একটি স্কিল সক্রিয় করার চেষ্টা করে। হ্যাঁ, ঠিকই ধরেছেন: এই এক্সটেনশনটিতে এমসিপি সার্ভার এবং এমন একটি স্কিল উভয়ই রয়েছে, যা এজেন্টকে এমসিপি সার্ভারটি সবচেয়ে ভালোভাবে কীভাবে ব্যবহার করতে হবে সে বিষয়ে নির্দেশনা দেয়। চমৎকার!

কয়েক সেকেন্ড পরে, Gemini CLI টেবিলে ফলাফল প্রদর্শন করবে এবং স্ক্রিনশটটি সেভ করে ফেলবে। স্ক্রিনশটটি ঠিক আছে কিনা তা পরীক্ষা করার জন্য, আপনি Cloud Shell থেকে এটি ডাউনলোড করে নিতে পারেন।

d2ce9c408a2f40be.png

৯. আপনি অ্যান্টিগ্র্যাভিটিতে কোনো পূর্বপ্রস্তুতি ছাড়াই এটি করতে পারেন!

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

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

WSL ব্যবহারকারীদের জন্য একটি দ্রষ্টব্য: Antigravity-তে ব্রাউজার এজেন্টকে কাজ করানোটা বেশ ঝামেলার। আমি এটিকে কাজ করাতে সক্ষম হয়েছি , কিন্তু এই পরিবেশে সাবএজেন্টটিকে আমার কাছে অসামঞ্জস্যপূর্ণ এবং অবিশ্বস্ত মনে হয়েছে। তাই এই কারণেই আমি Playwright CLI পছন্দ করছি!

১০. ব্রাউজার অটোমেশনের অন্যান্য ব্যবহার

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

আপনি যদি নিজের এআই এজেন্ট তৈরি করেন, তাহলে কঠিন কাজগুলো সহজ করার জন্য BrowserMCP বা Playwright CLI-এর মতো টুল ব্যবহার করার কয়েকটি উপায় নিচে দেওয়া হলো:

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

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

১১. উপসংহার

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

আপনি শিখেছেন:

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

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

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

রিপো কোড

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

সক্রিয় ধারণা ও দক্ষতা

অন্যান্য