কীভাবে Policybazaar এজেন্টের জন্য Chrome DevTools এবং মডার্ন ওয়েব নির্দেশিকা ব্যবহার করে অডিটিং ওভারহেড ৯২% কমিয়েছে এবং স্ক্রিন ডেলিভারি >৯০% ত্বরান্বিত করেছে

Aman Soni

Swetha Gopalakrishnan

প্রকাশিত: ১০ নভেম্বর, ২০২৬

Policybazaar হল ভারতের অন্যতম প্রধান বীমা প্ল্যাটফর্ম, যেখানে ৯৭ মিলিয়নেরও বেশি রেজিস্টার করা গ্রাহক রয়েছে। এর প্রায় ৮০% গ্রাহক প্রতি মাসে ওয়েবসাইট ভিজিট করেন। এর মূল কোম্পানি, PB Fintech, সম্প্রতি Pensionbazaar লঞ্চ করেছে, যা অবসরকালীন প্ল্যানিংয়ের জন্য একটি এন্ড-টু-এন্ড প্ল্যাটফর্ম এবং Paisabazaar Marketing & Consulting Private Limited-এর অধীনে একটি ব্র্যান্ড।

উভয় টিমই আগে থেকে কোডিং এজেন্ট ব্যবহার করে, যা দ্রুত কোড লেখে, কিন্তু সেই কোড ব্রাউজারে কী করে তা দেখতে পায় না। এজেন্টরা প্রায়শই পুরনো ওয়েব প্যাটার্ন ব্যবহার করতেন এবং স্ক্রিন সঠিকভাবে রেন্ডার হয়েছে কিনা তা চেক করার কোনও উপায় ছিল না, তাই ইঞ্জিনিয়ারদের এখনও সবকিছু ম্যানুয়ালি যাচাই করতে হয়।

এই সমস্যার সমাধান করতে, দুটি কোম্পানি তাদের এজেন্টিক ওয়ার্কফ্লোতে দুটি টুল একত্রিত করেছে: মডেলকে আধুনিক ওয়েব স্ট্যান্ডার্ড শেখানোর জন্য মডার্ন ওয়েব নির্দেশিকা এবং এজেন্টদের কাজ পরীক্ষা ও যাচাই করার জন্য লাইভ, হেডলেস ব্রাউজার দিতে এজেন্টের জন্য Chrome DevTools।

এর প্রভাব এখানে দেওয়া হল:

চ্যালেঞ্জ: দ্রুত কোড, ধীর যাচাইকরণ

Policybazaar এবং Pensionbazaar দুটি ভিন্ন সমস্যার সম্মুখীন হয়েছিল যা স্ট্যান্ডার্ড AI কোডিং ওয়ার্কফ্লো প্রোডাকশন লেভেলে অপ্টিমাইজ করতে পারেনি।

Pensionbazaar: দীর্ঘ প্রশ্ন-উত্তর চক্র সহ নতুন স্ক্রিন

Pensionbazaar-এর জন্য মাল্টি-স্টেপ রিটায়ারমেন্ট ফ্রিডম স্কোর ক্যালকুলেটর, কাস্টমাইজ করা যায় এমন ইনভেস্টমেন্ট এক্সপেন্স প্রোজেকশন এবং অটোমেটেড সাজেশন রিপোর্টের মতো ডজন ডজন নতুন, জটিল স্ক্রিনের প্রয়োজন ছিল। টিম কোডিং এজেন্ট ও Figma MCP সার্ভার ব্যবহার করে সেগুলি তৈরি করেছে, কিন্তু দুটি সমস্যার কারণে প্রশ্ন-উত্তর চক্র দীর্ঘ হয়ে গেছে।

প্রথমে, এজেন্টরা অন্ধকারে কোডিং করছিলেন। বেস মডেল কোড জেনারেট করতে পারে, কিন্তু এটি রেন্ডার করা ইন্টারফেস দেখতে, ডিজাইনের স্পেসিফিকেশনের সাথে কম্পিউট করা স্টাইল তুলনা করতে, লেআউট শিফ্ট শনাক্ত করতে বা নেটওয়ার্ক ওয়াটারফল পড়তে পারে না। তাই ক্লিপ করা UI এবং লেআউট শিফটের মতো সম্পর্কিত সমস্যাগুলি ম্যানুয়াল QA পর্যন্ত পৌঁছে গেছে।

দ্বিতীয়ত, জেনারেট করা কোডটি পুরনো ছিল। আধুনিক ওয়েব প্ল্যাটফর্ম সম্পর্কে সচেতন না থাকার কারণে, এজেন্টরা পুরনো ওয়ার্কঅ্যারাউন্ড ব্যবহার করে, বিল্ট-ইন <dialog> এলিমেন্ট ব্যবহার করার পরিবর্তে ভারী জাভাস্ক্রিপ্ট মোডাল লেখে, অপ্রয়োজনীয় পলিফিল যোগ করে এবং fetchpriority-এর মতো পারফর্ম্যান্স সংক্রান্ত ইঙ্গিত বাদ দিয়ে দেয়।

Policybazaar: ৩০টি ল্যান্ডিং পৃষ্ঠা এবং একটি ম্যানুয়াল অডিট

Policybazaar-এর লাইফ ইন্স্যুরেন্স টিম বিভিন্ন ইন্স্যুরেন্স প্রোডাক্টের জন্য প্রায় ৩০টি ল্যান্ডিং পৃষ্ঠা চালায় এবং প্রতিটি পৃষ্ঠায় বিভিন্ন মার্কেটিং ক্যাম্পেনের জন্য আলাদা আলাদা ভ্যারিয়েশন থাকতে পারে। একসাথে, তারা প্রতিদিন ২০০,০০০ থেকে ৩০০,০০০ ভিজিটর পান এবং প্রতিটি পৃষ্ঠা মাসিক ডিজাইন এবং বিজনেস-লজিক আপডেট পায়। টিমকে Core Web Vitals স্কোর বেশি রাখতে হবে এবং নিশ্চিত করতে হবে যে প্রতিটি ভেরিয়েন্ট অ্যাক্সেসযোগ্য থাকে এবং প্রতিটি স্ক্রিন সাইজে সঠিকভাবে রেন্ডার হয়।

অটোমেশনের আগে, একজন ইঞ্জিনিয়ার প্রতিটি পৃষ্ঠা ম্যানুয়ালি অডিট করেছেন:

1. বাস্তব-জগতের ব্যবহারকারীর ডেটা সংগ্রহ করতে PageSpeed Insights চালান।
2. Core Web Vitals স্কোর ও সাজেশন মূল্যায়ন করুন।
3. ডেভেলপমেন্ট বা স্টেজিং বিল্ড পরীক্ষা করুন, স্কোরের পিছনে থাকা সমস্যাগুলি নির্ণয় করুন এবং কোড ফিক্স প্রয়োগ করুন।

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

তাদের ওয়ার্কফ্লো পরিবর্তন করার আগে, টিম তিনটি লক্ষ্য সেট করে: অডিট কভারেজ অবিচ্ছিন্ন করার সময় পারফরম্যান্স অডিটে ব্যয় করা ডেভেলপার সময় ৮০%-এর বেশি কমানো, যাচাইকৃত রিপোর্টের মাধ্যমে QA টার্নঅ্যারাউন্ড ছোট করা এবং স্ক্রিন তার ওয়্যারফ্রেমের সাথে মেলেনি বলে উত্থাপিত UI বাগগুলি কমানো।

সমাধান: যাচাই করার জন্য কোড লুপ

Pensionbazaar কোড লেখা এবং তা চেক করার মধ্যে ব্যবধান কমিয়েছে। এজেন্ট কোড লেখে, একটি ক্লিন ব্রাউজার ইনস্ট্যান্স শুরু করে, ভিজ্যুয়াল প্যারিটি, লেআউট ব্রেকিং, কনসোল এরর এবং পারফর্ম্যান্সের জন্য প্রোগ্রাম্যাটিকভাবে পৃষ্ঠাটি অডিট করে এবং ন্যূনতম হিউম্যান ইন্টারভেনশনের মাধ্যমে এটি যে সমস্যাগুলি খুঁজে পায় তা সমাধান করে। তাদের এজেন্ট Figma MCP থেকে ডিজাইনটি পায়, তাই এটি রেন্ডার করা পৃষ্ঠার সাথে ডিজাইনারদের উদ্দেশ্য তুলনা করতে পারে।

নিচের ভিডিওতে এই লুপটি অ্যাকশনে দেখানো হয়েছে। এজেন্ট নতুন স্ক্রিনের জন্য Figma ডিজাইন পড়ে, এটি প্রয়োগ করে এবং তারপর রেন্ডার করা পৃষ্ঠা পরীক্ষা করতে এবং এটি যে পার্থক্যগুলি খুঁজে পায় তা ঠিক করতে এজেন্টের জন্য Chrome DevTools ব্যবহার করে।

ধাপ ১: আধুনিক ওয়েব স্ট্যান্ডার্ডে এজেন্টকে গ্রাউন্ড করা

Pensionbazaar টিম চেয়েছিল যে জেনারেট করা কোড যেন আধুনিক ওয়েব পেশাদার পদ্ধতি অনুসরণ করে, বর্তমান প্ল্যাটফর্ম ফিচার ব্যবহার করে এবং পুরনো ব্রাউজারেও কাজ করে। ম্যানুয়ালি চেক করা খুবই ক্লান্তিকর এবং এজেন্টরা সবসময় প্ল্যাটফর্মের সাথে আপ-টু-ডেট থাকেন না। মডার্ন ওয়েব নির্দেশিকা এই সমস্যার সমাধান করে। এটি একটি এজেন্ট স্কিল, যা Chrome এবং ওয়েব কমিউনিটির ওয়েব বিশেষজ্ঞদের দ্বারা লিখিত এবং রক্ষণাবেক্ষণ করা হয়, যা ২০০টিরও বেশি ব্যবহারের ক্ষেত্রে কভার করে। এটি এজেন্টদের আধুনিক ওয়েব প্ল্যাটফর্ম API এবং পারফর্ম্যান্স ও অ্যাক্সেসিবিলিটি সংক্রান্ত পেশাদার পদ্ধতির দিকে পরিচালিত করে যা আপনার বেসলাইন টার্গেটের সাথে মানানসই। আপনি কোনও টার্গেট সেট না করলে, এটি ডিফল্ট হিসেবে বেসলাইন ব্যাপকভাবে উপলভ্য-এ সেট হয়ে যায়।

এজেন্ট Figma ফাইল থেকে প্রসঙ্গ নেওয়ার পরে, কোড লেখার সময় এটি মডার্ন ওয়েব নির্দেশিকা ব্যবহার করে। Pensionbazaar-এর জন্য, এটি তিনভাবে কোড পরিবর্তন করেছে:

• নেটিভ এলিমেন্ট জাভাস্ক্রিপ্ট ওয়ার্কঅ্যারাউন্ড পরিবর্তন করেছে। এজেন্টটি প্ল্যানের বিবরণ সংক্রান্ত মোডালের জন্য বিল্ট-ইন <dialog> এলিমেন্ট এবং Popover API এবং আর্থিক সারাংশ কার্ডের জন্য CSS Grid ও Flexbox ব্যবহার করেছে।
• এজেন্ট পারফর্ম্যান্স সংক্রান্ত ইঙ্গিত যোগ করেছে যা বেস মডেল সাধারণত বাদ দিয়ে দেয়। এর মধ্যে ছিল হিরো LCP ছবিতে fetchpriority="high", বিলো-দ্য-ফোল্ড প্ল্যান কার্ডে loading="lazy" এবং scheduler.yield() সহ সময়-ভিত্তিক এক্সিকিউশন বাজেট, যাতে Interaction to Next Paint (INP) সুরক্ষিত থাকে।
• আধুনিক ফিচার পুরনো ব্রাউজারে কাজ করা বন্ধ করেনি। Pensionbazaar পুরনো ব্রাউজার ভার্সনে কাজ করে, যা Browserslist-এ উল্লেখ করা আছে। এজেন্ট, ওয়ান-টাইম পাসওয়ার্ড (OTP) ফিল্ডে :user-invalid CSS সিউডো-ক্লাস এবং autoComplete="one-time-code"-এর মতো ফিচার ব্যবহার করেছে। পুরনো ব্রাউজার এগুলি এড়িয়ে যায় এবং মূল ফাংশনালিটি কাজ করতে থাকে।

বেস মডেলগুলি খুব একটা খারাপ ছিল না। পারফর্ম্যান্সের জন্য, টিম দেখেছে যে সেগুলি পেশাদার পদ্ধতির সাথে প্রায় ৭০% সামঞ্জস্যপূর্ণ। এজেন্টের নিজস্ব রিপোর্টে ১২টি মডার্ন ওয়েব নির্দেশিকা নিয়ম তালিকাভুক্ত করা হয়েছে যা বাকি ফাঁক পূরণ করেছে। চারটি উদাহরণ:

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

আমন সোনি, ইঞ্জিনিয়ারিং ম্যানেজার, Policybazaar

ধাপ ২: এজেন্টকে একটি ব্রাউজার দিন

এজেন্টের জন্য Chrome DevTools হল টুলের একটি সেট, যার মধ্যে একটি MCP সার্ভার, একটি CLI এবং এজেন্টের দক্ষতা অন্তর্ভুক্ত, যা কোডিং এজেন্টকে রানটাইম ডিবাগিং ডেটাতে রিয়েল-টাইম অ্যাক্সেস দেয়, যেমন কনসোল লগ, নেটওয়ার্ক ট্রাফিক, অ্যাক্সেসিবিলিটি ট্রি এবং অন্যান্য DevTools ক্ষমতা।

টিম তাদের কোডিং এজেন্ট, Claude Code-এ প্লাগ-ইন হিসেবে এজেন্টের জন্য Chrome DevTools ইনস্টল করেছে:

# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

টিম চেয়েছিল যে প্রতিটি টেস্ট যেন একটি ক্লিন ব্রাউজার ইনস্ট্যান্সে রান করে, যাতে ইনস্টল করা Chrome এক্সটেনশন ফলাফলে প্রভাব ফেলতে না পারে এবং ব্যক্তিগত বা সংবেদনশীল ডেটা লিক না হয়। এটি পেতে, MCP সার্ভার কনফিগারেশনে args অ্যারেতে --isolated যোগ করুন:

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}

আপনার টেস্টের জন্য যদি আগে থেকে সাইন-ইন করা ব্রাউজার সেশনের প্রয়োজন হয়, তাহলে --autoConnect ব্যবহার করুন।

ধাপ ৩: এজেন্টকে নিজের কাজ চেক ও ঠিক করতে দিন

ইঞ্জিনিয়ারিং টিম এজেন্টের নির্দেশাবলীতে চেকের তালিকা তৈরি করে, হয় প্রম্পট হিসেবে অথবা এজেন্টের স্কিল হিসেবে। উচ্চ স্তরে, এজেন্ট নিম্নলিখিত কাজগুলি করে:

• DOM ট্রি ও কম্পিউটেড CSS পরীক্ষা করে এবং Figma ডিজাইনের সাথে সেগুলির তুলনা করে।
• রেসপন্সিভনেস পরীক্ষা করার জন্য মোবাইল ভিউপোর্টে পৃষ্ঠার সাইজ পরিবর্তন করে।
• স্ক্রিপ্ট, রেন্ডার-ব্লকিং রিসোর্স এবং অন্যান্য পারফর্ম্যান্স সংক্রান্ত সমস্যার কারণে হওয়া লং অ্যানিমেশন ফ্রেম (LoAF) খুঁজে পেতে পারফর্ম্যান্স ট্রেস রেকর্ড করে।
• ইঞ্জিনিয়ার পর্যালোচনা করার আগে ডিজাইন সংক্রান্ত অমিল, পারফর্ম্যান্স সংক্রান্ত সমস্যা ও কনসোল ব্যতিক্রম ঠিক করতে কোড আবার লেখে।

নিম্নলিখিত সারণীতে দেখানো হয়েছে যে এজেন্টের জন্য Chrome DevTools-এর কোন টুল প্রতিটি চেক সমর্থন করে:

এজেন্ট কোনও সমস্যা খুঁজে পেলে, যেমন ছোট স্ক্রিনে টেক্সট কেটে যাওয়া, ফ্লেক্স র‍্যাপ ভেঙে যাওয়া বা অপ্টিমাইজ না করা ছবির কারণে লে-আউট শিফ্ট হওয়া, এটি একটি ছোট সংশোধন লুপ চালায়:

1. এজেন্টের জন্য Chrome DevTools সঠিক সমস্যা ক্যাপচার করে।
2. এজেন্ট ডেটা বিশ্লেষণ করে এবং সমস্যাযুক্ত CSS বা জাভাস্ক্রিপ্ট আবার লেখে।
3. সমস্যার সমাধান হয়েছে কিনা তা কনফার্ম করতে এজেন্ট পৃষ্ঠাটি রিলোড করেন।

একটি স্ক্রিনে, এজেন্ট পৃষ্ঠাটি রেন্ডার করে দেখেছে যে হেডার লেআউট, স্পেসিং এবং গ্রেডিয়েন্ট ডিজাইনের সাথে মেলেনি। এটি প্রাসঙ্গিক .scssটি ফাইল ঠিক করেছে। এছাড়াও, এটি পৃষ্ঠার সাথে ইন্টার‍্যাক্ট করেছে, যেমন অ্যাকর্ডিয়নগুলি প্রসারিত করে চেক করা যে তাদের খোলা অবস্থা ডিজাইনের সাথে মিলেছে কিনা।

ধাপ ৪: প্রশ্ন-উত্তর যাচাই করা রিপোর্ট জমা দিন

যাচাইকরণ সম্পূর্ণ হলে, এজেন্ট প্রোডাকশন-রেডি কোড এবং QA টিমের জন্য অডিট রিপোর্ট ডেলিভার করে। রিপোর্টে এগুলি অন্তর্ভুক্ত:

• Figma ডিজাইনের সাথে ভিজ্যুয়াল তুলনা যা পিক্সেলের পার্থক্য হাইলাইট করে, স্ক্রিনশট, DOM স্ন্যাপশট এবং কম্পিউটেড স্টাইল থেকে তৈরি।
• বিভিন্ন স্ক্রিন সাইজে রেন্ডার করা পৃষ্ঠার স্ক্রিনশট।
• performance_start_trace এবং performance_analyze_insight থেকে Core Web Vitals এবং পারফর্ম্যান্স ডায়াগনস্টিক, যেমন Speed Index এবং Total Blocking Time (TBT)।
• lighthouse_audit থেকে SEO, পেশাদার পদ্ধতি ও অ্যাক্সেসিবিলিটির জন্য লাইটহাউস স্কোর।
• সারি ও টগল আড়াল করার মতো ইন্টার‍্যাকশনের জন্য পাস বা ফেল চেক, কনসোল এরর ও সারি এডিট করা, সারি মুছে দেওয়া ও খালি স্ট্যাটের মতো অ্যাপ্লিকেশন স্ট্যাট পরিবর্তন।

৩০টি ক্যাম্পেন পৃষ্ঠায় একই পদ্ধতি প্রয়োগ করুন

Policybazaar তার মূল প্ল্যাটফর্মে, ম্যানুয়ালি PageSpeed Insights রান করার পরিবর্তে Kiro-তে এজেন্টের জন্য Chrome DevTools-এর মাধ্যমে অডিট রান করে। ক্যাম্পেন পৃষ্ঠা লাইভ হওয়ার আগে, একজন ইঞ্জিনিয়ার মোবাইল ও ডেস্কটপের জন্য স্টেজিং URL-এর বিরুদ্ধে অডিট ট্রিগার করেন। এজেন্ট পারফর্ম্যান্স ও Lighthouse অডিট রান করে এবং এজেন্টের জন্য Chrome DevTools অটোমেটিক ল্যাব ডেটার পাশাপাশি রিয়েল-ওয়ার্ল্ড Chrome User Experience Report (CrUX) ফিল্ড ডেটা পুল করে। এটি PageSpeed Insights-এর ধাপটি সম্পূর্ণভাবে পরিবর্তন করেছে।

এজেন্ট তখন পারফর্ম্যান্স স্কোর, এটি যে বাধাগুলি খুঁজে পেয়েছে এবং একজন ইঞ্জিনিয়ারের ঠিক করার জন্য উন্নতির একটি অগ্রাধিকার তালিকা রিপোর্ট করে। একটি প্রি-রিলিজ অডিটে, এটি এমন নন-ক্রিটিক্যাল API কল ফ্ল্যাগ করেছে যা পৃষ্ঠা লোড হওয়ার সময় একের পর এক ফায়ার হয়েছে এবং ক্রিটিক্যাল রেন্ডারিং কাজের সাথে প্রতিযোগিতা করেছে। পৃষ্ঠাটি লাইভ হওয়ার আগেই টিম সমস্যার সমাধান করে দিয়েছে।

একজন ইঞ্জিনিয়ারের একটি পারফর্ম্যান্স অডিট করতে যে সময় লাগে, সেই সময়ের মধ্যে এজেন্ট এখন ১২টি পারফর্ম্যান্স অডিট সম্পূর্ণ করে। এর ফলে ম্যানুয়াল প্রচেষ্টার পরিমাণ ৯২% হ্রাস পায়।

ব্যবহারকারীর অভিজ্ঞতা ভালো রাখার জন্য ওয়েব পারফর্ম্যান্স আমাদের কাছে গুরুত্বপূর্ণ, কিন্তু ডজন ডজন ল্যান্ডিং পৃষ্ঠা জুড়ে ম্যানুয়ালি অডিট করা, ওয়াটারফল ও ট্রেস মূল্যায়ন করা ক্লান্তিকর এবং একটি বড় বাধা ছিল। এজেন্টের জন্য Chrome DevTools এই প্রসেসকে ট্রান্সফর্ম করেছে এবং আমাদের ইঞ্জিনিয়ারদের পারফর্ম্যান্স অডিটিংয়ের সময় ৯২% কমিয়েছে, যার ফলে তারা আরও জটিল কাজে মনোযোগ দেওয়ার সুযোগ পেয়েছেন।

আমন সোনি, ইঞ্জিনিয়ারিং ম্যানেজার, Policybazaar

প্রভাব

এজেন্টের জন্য মডার্ন ওয়েব নির্দেশিকা এবং Chrome DevTools, Policybazaar এবং Pensionbazaar-এ ফ্রন্টএন্ড টেস্টিংয়ের কাজকে ম্যানুয়াল, রিঅ্যাক্টিভ প্রসেস থেকে অটোমেটেড, প্রোঅ্যাক্টিভ প্রসেসে পরিণত করেছে। নিচের সারণীতে পরিবর্তনের আগে ও পরে ওয়ার্কফ্লোর তুলনা করা হয়েছে:

৯২% কমানোর ফলে টিমের ৮০%-এর বেশি কমানোর লক্ষ্যমাত্রা পূরণ হয়েছে। ল্যান্ডিং পৃষ্ঠা রিগ্রেশন স্টেজিং বা QA-তে পৌঁছানোর আগেই ধরা পড়ে। Pensionbazaar-এ, কোড এসে পৌঁছায় যা আগে থেকেই অডিট করা থাকে এবং এতে বিভিন্ন ভিউপোর্টের স্ক্রিনশট থাকে, যার ফলে ডিজাইন, ইঞ্জিনিয়ারিং এবং QA-এর মধ্যে বারবার যোগাযোগ করার প্রয়োজন হয় না।

আপনার টিমের জন্য টেকঅ্যাওয়ে

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

রিসোর্স

• মডার্ন ওয়েব নির্দেশিকা
• মডার্ন ওয়েব নির্দেশিকা সোর্স রিপোজিটরি
• এজেন্টের জন্য Chrome DevTools সংক্রান্ত ডকুমেন্টেশন
• GitHub-এ এজেন্টের জন্য Chrome DevTools