این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

خودکارسازی تست رابط کاربری با Gemini CLI، BrowserMCP و Playwright

۱. مقدمه

تست برنامه‌های وب می‌تواند کاری طاقت‌فرسا باشد. تست رابط کاربری سنتی اغلب مانند یک نبرد مداوم علیه شکنندگی به نظر می‌رسد. شما خود را در حال نوشتن اسکریپت‌های پیچیده، مدیریت CSS شکننده و انتخابگرهای XPath و پریدن از میان حلقه‌ها فقط برای تأیید یک جریان کاربری ساده می‌بینید.

اما چه می‌شد اگر می‌توانستید به یک عامل (عامل) به زبان طبیعی بگویید چه چیزی را آزمایش کند، و آن... این کار را انجام می‌داد؟

در این آزمایشگاه کد، نحوه استفاده از Gemini CLI و ابزارهای چندوجهی مانند BrowserMCP را بررسی خواهیم کرد. خواهید دید که چگونه می‌توان تست‌های خودکار رابط کاربری را با استفاده از زبان طبیعی ایجاد و اجرا کرد. توجه داشته باشید که این آزمایشگاه کد نیازی به دانش قبلی در مورد چارچوب‌ها و ابزارهای تست رابط کاربری ندارد.

آنچه یاد خواهید گرفت

پروتکل زمینه مدل (MCP) چیست و چرا می‌تواند انقلابی در این زمینه ایجاد کند؟
چگونه BrowserMCP به عامل‌های هوش مصنوعی امکان کنترل مرورگرهای وب را می‌دهد.
نحوه اجرای تست‌های خودکار رابط کاربری از Gemini CLI
درک مهارت‌های نماینده و مزایای آنها.
آموزش یک نماینده برای استفاده از نمایشنامه‌نویس با مهارت.
استفاده همزمان از ابزارهای توسعه گوگل کروم (Google Chrome DevTools MCP) و مهارت.
نگاهی گذرا به Subagent مرورگر Antigravity.
موارد استفاده دیگر برای کنترل مرورگر.

کاری که انجام خواهید داد

محیط توسعه خود را تنظیم کنید.
یک اپلیکیشن آزمایشی که نیاز به آزمایش دارد را بررسی کنید.
از رابط خط فرمان Gemini برای تعامل با برنامه از طریق BrowserMCP استفاده کنید.
به نماینده خود بیاموزید که چگونه از Playwright با مهارت نماینده استفاده کند.

۲. پیش‌نیازها

قبل از اینکه به سراغ چیزهای جالب برویم، بیایید مطمئن شویم که هر آنچه نیاز دارید را دارید.

این آزمایشگاه کد از رابط خط فرمان Gemini ، ابزارهای MCP، مهارت‌های عامل (agent skills) و یک اپلیکیشن آزمایشی React استفاده می‌کند.

ابزارها

این آزمایشگاه فرض می‌کند که شما از قبل موارد زیر را دارید:

مرورگر کروم
نودجی‌اس
رابط خط فرمان جمینی
گیت

برای استفاده از رابط خط فرمان Gemini، باید با گوگل احراز هویت کنید . چند راه برای انجام این کار وجود دارد، اما ما توصیه می‌کنیم از گزینه «ورود با گوگل» استفاده کنید. این گزینه با سهمیه رایگان سخاوتمندانه‌ای از استفاده Gemini ارائه می‌شود و نیازی به پروژه Google Cloud ندارد. اگر هنگام دنبال کردن codelab از این گزینه استفاده کنید، هیچ هزینه‌ای نخواهید داشت. (اگر از قبل کلید API Gemini دارید، می‌توانید به جای آن از این کلید استفاده کنید.)

این دستورالعمل‌ها فرض می‌کنند که شما در محیط لینوکس (یا WSL) یا macOS کار می‌کنید. اگر (مثل من) از ویندوز استفاده می‌کنید، می‌توانید با استفاده از WSL مراحل را دنبال کنید.

(توجه داشته باشید که

BrowserMCP از Google Cloud Shell کار نخواهد کرد

زیرا فقط به یک مرورگر محلی که روی همان دستگاه اجرا می‌شود متصل می‌شود.)

راه‌اندازی محیط توسعه

من یک مخزن آزمایشی در گیت‌هاب ایجاد کرده‌ام. این مخزن شامل یک برنامه نمونه است که می‌توانیم برای تست رابط کاربری خود از آن استفاده کنیم. با اجرای این دستور از ترمینال محلی خود، آن را کلون کنید:

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

یک Makefile وجود دارد که راه‌اندازی محیط برای اجرای برنامه آزمایشی را برای شما آسان می‌کند. بیایید آن را اجرا کنیم تا محیط خود را مقداردهی اولیه کنیم:

make install

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

۳. اپلیکیشن آزمایشی ما

اپلیکیشنی که امروز آزمایش می‌کنیم، The Dazbo Omni-Dash است - یک داشبورد آینده‌نگرانه با تم تاریک برای مدیریت تله‌متری امنیتی. (بله، با ویبره کدنویسی شده بود!)

چرا این برنامه؟

این دستگاه طوری ساخته شده است که یک سطح آزمایش واقع‌گرایانه با موارد زیر ارائه دهد:

احراز هویت ساختگی: یک جریان ورود به سیستم که نیاز به اعتبارنامه‌های خاص دارد.
محتوای پویا: کارت‌های تله‌متری و لاگ‌های امنیتی که داده‌های بلادرنگ را شبیه‌سازی می‌کنند.
حالت‌های تعاملی: منوهای ناوبری و ورودی‌های فرم که بر اساس عملکرد کاربر تغییر می‌کنند.
فناوری مدرن: ساخته شده با React و Vite برای یک تجربه سریع و واکنش‌گرا.

راه‌اندازی برنامه

برای شروع برنامه، کافیست دستور زیر را اجرا کنید:

make dev

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

سرور توسعه باید خیلی سریع شروع به کار کند و برنامه از طریق آدرس http://localhost:5173 در دسترس خواهد بود.

ما می‌توانیم فقط روی لینک کلیک کنیم تا برنامه در مرورگر ما باز شود. فقط این فرآیند را در ترمینال خود در حال اجرا بگذارید. دستورات ترمینال بعدی را در یک بخش ترمینال جداگانه انجام خواهیم داد.

۴. چالش تست رابط کاربری

تست رابط کاربری سنتی به سختی به نتیجه می‌رسد و حفظ آن حتی سخت‌تر است. نقاط ضعف رایج عبارتند از:

تست "Flacking": تست‌هایی که یک دقیقه با موفقیت انجام می‌شوند و دقیقه بعد به دلیل مشکلات زمان‌بندی، شرایط رقابتی یا بارگذاری کند فایل‌ها، با شکست مواجه می‌شوند.
انتخابگرهای شکننده: تکیه بر ساختارهای خاص DOM (مانند div > div > button) که با کوچکترین تغییر در رابط کاربری از کار می‌افتند و منجر به نگهداری مداوم اسکریپت می‌شوند.
منحنی یادگیری بالا: مستلزم تسلط توسعه‌دهندگان بر زبان‌های پیچیده مختص دامنه و ویژگی‌های خاص چارچوب (Cypress، Selenium، Playwright) فقط برای خودکارسازی یک کلیک ساده.
برابری محیطی: دست و پنجه نرم کردن با حالت‌های برنامه که تکرار آنها دشوار است و سربار پاکسازی داده‌های آزمایشی.

ما به روشی برای آزمایش نیاز داریم که به جای اجرا، بر قصد و نیت تمرکز کند.

۵. MCP به نجات می‌آید

پروتکل زمینه مدل (MCP) یک استاندارد باز است که به مدل‌ها و عامل‌های هوش مصنوعی اجازه می‌دهد تا با ابزارهای خارجی، APIها و داده‌ها تعامل داشته باشند. آن را به عنوان یک آداپتور جهانی در نظر بگیرید که به مدل‌ها و عامل‌ها اجازه می‌دهد ابزارهایی را که به آنها دسترسی دارند، پیدا و اجرا کنند.

به طور سنتی، ادغام مدل‌های زبان بزرگ (LLM) با داده‌ها و ابزارهای خارجی، توسعه‌دهندگان را ملزم به نوشتن اتصالات API سفارشی و کدگذاری شده برای هر منبع داده جدید می‌کرد، که یک مشکل یکپارچه‌سازی ناپایدار "M x N" ایجاد می‌کرد که در آن هر مدل و ابزار جدید، بار نگهداری را چند برابر می‌کرد. پروتکل زمینه مدل (MCP) با حذف نیاز به نوشتن کد خاص برای هماهنگ‌سازی این قابلیت‌ها، این مشکل را حل می‌کند. به جای کدگذاری صریح گردش‌های کاری پیچیده اجرا، توسعه‌دهندگان می‌توانند به LLM تکیه کنند تا درخواست‌های زبان طبیعی کاربر را تفسیر کند و به صورت پویا در مورد اینکه از کدام ابزارها استفاده کنند، استدلال کند.

وقتی کاربر یک دستور زبان طبیعی صادر می‌کند (مانند «به localhost:5173 بروید، به عنوان 'admin' وارد شوید و روی دکمه ارسال کلیک کنید» )، LLM قابلیت‌های موجود را کشف کرده و یک درخواست ساختاریافته برای فراخوانی یک ابزار خاص ایجاد می‌کند. کلاینت MCP به عنوان یک مترجم عمل می‌کند و این درخواست را به سرور MCP تعیین‌شده هدایت می‌کند، که عمل را اجرا می‌کند یا داده‌ها را دریافت کرده و زمینه را به مدل برمی‌گرداند. این امر به هوش مصنوعی این قدرت را می‌دهد که بدون نیاز به کدنویسی سخت مسیر اجرای خاص توسط توسعه‌دهنده، به صورت مستقل عمل کند.

از آنجا که MCP یک استاندارد جهانی ایجاد می‌کند - که اغلب به عنوان "USB-C برای برنامه‌های هوش مصنوعی" توصیف می‌شود - قابلیت استفاده مجدد گسترده‌ای را در دسترس قرار می‌دهد. توسعه‌دهندگان می‌توانند یک بار یک سرور MCP بسازند و هر میزبان هوش مصنوعی سازگار با MCP می‌تواند فوراً به آن متصل شود و مشکل ادغام M x N را از بین ببرد. دیگر لازم نیست برای هر پلتفرم پل‌های API سفارشی بسازید. در عوض، می‌توانید از اکوسیستم سرورهای MCP از پیش ساخته شده و متن باز برای سرویس‌های رایج مانند GitHub، Slack، پایگاه‌های داده و هر چیز دیگری استفاده کنید و آنها را مستقیماً به گردش‌های کاری عامل خود متصل کنید. این معماری ماژولار و plug-and-play تضمین می‌کند که اگر ارائه دهندگان LLM را تغییر دهید یا ابزارهای خود را بعداً ارتقا دهید، زیرساخت ادغام اصلی شما کاملاً بدون تغییر باقی می‌ماند.

۶. خودکارسازی با BrowserMCP

BrowserMCP چیست؟

این اولین ابزاری است که امروز با آن کار خواهیم کرد. BrowserMCP یک سرور MCP است که به عامل‌های هوش مصنوعی «چشم» و «دست» لازم برای تعامل با یک مرورگر وب را می‌دهد. به طور خلاصه، این سرور تعامل انسان با یک مرورگر را تقلید می‌کند. این ابزار متن‌باز است و می‌توانید مخزن گیت‌هاب آن را اینجا بررسی کنید. مستندات اصلی BrowserMCP را اینجا ببینید.

در اینجا به برخی از قابلیت‌های آن اشاره می‌کنیم:

می‌تواند به URLها پیمایش کند.
می‌تواند DOM را بررسی کند.
می‌تواند روی دکمه‌ها کلیک کند و متن را در فرم‌ها تایپ کند.
می‌تواند با کشیدن و رها کردن (drag-and-drop) انجام شود.
می‌تواند لاگ‌های کنسول مرورگر را بخواند.
سریع است: اتوماسیون به صورت محلی روی دستگاه شما اتفاق می‌افتد.

نصب مرورگر MCP

برای استفاده از BrowserMCP، باید دو کار انجام دهید:

افزونه BrowserMCP را در کروم (یا هر مرورگر مبتنی بر کرومیوم) نصب کنید.
سرور MCP را برای نماینده خود پیکربندی کنید.

برای نصب افزونه، فقط دستورالعمل‌های اینجا را دنبال کنید. این کار فقط چند ثانیه طول می‌کشد. و پس از نصب، روی «اتصال» در افزونه کلیک می‌کنید تا به نماینده شما اجازه کنترل برگه فعلی‌تان داده شود. (بدیهی است که می‌خواهید برگه فعلی، برگه‌ای باشد که برنامه آزمایشی روی آن اجرا می‌شود!)

در مرحله بعد، باید سرور BrowserMCP واقعی را به کلاینت خود اضافه کنیم. در Gemini CLI این کار فوق‌العاده آسان است. فقط افزونه را نصب کنید:

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

تست با BrowserMCP

حالا بریم سراغ جادو. اول، بیایید Gemini CLI را (با اجرای gemini ) در یک جلسه ترمینال جدید اجرا کنیم. (به یاد داشته باشید که برنامه آزمایشی در جلسه ترمینال اولیه ما اجرا می‌شود.) در داخل Gemini CLI، دستور /mcp را اجرا کنید تا مطمئن شوید که به درستی نصب شده است. شما باید لیستی از ابزارها را مانند این ببینید:

اگر قبلاً برنامه آزمایشی را اجرا نکردید، اکنون آن را اجرا کنید:

make dev

ما باید برنامه را در مرورگر کروم خود باز کنیم و افزونه BrowserMCP را در آن برگه متصل کنیم. پیوند را از دستور run دنبال کنید. سپس روی نماد افزونه BrowserMCP کلیک کنید و روی "اتصال" کلیک کنید.

حالا می‌توانیم از رابط خط فرمان Gemini برای اجرای تست استفاده کنیم. این خط فرمان را کپی کرده و در رابط خط فرمان Gemini خود قرار دهید:

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 ابتدا بررسی می‌کند که آیا برنامه آزمایشی روی پورت مشخص شده اجرا می‌شود یا خیر. سپس از شما می‌خواهد اقدامات ابزاری که قرار است انجام شود را تأیید کنید:

به Gemini CLI اجازه دهید تمام ابزارهای BrowserMCP را برای این جلسه اجرا کند. سپس به مرورگر برگردید و شاهد انجام تعاملات خودکار باشید!

چند نکته در مورد دستور بالا قابل توجه است:

ما با گفتن به عامل برای خروج (logout) شروع می‌کنیم، اگر برنامه از قبل وارد شده باشد. توجه داشته باشید که نیازی نیست به عامل بگوییم روی متن خاصی مانند "خروج از دروازه" کلیک کند. خود عامل به اندازه کافی هوشمند است که تشخیص دهد روی چه چیزی کلیک کند.
پس از ورود به سیستم و نمایش صفحه اصلی، عامل اطلاعات تله‌متری را ثبت می‌کند. باز هم، نیازی نیست به عامل بگوییم که در کاشی‌های خاص جستجو کند یا کلمات خاصی را مطابقت دهد. بنابراین اگر بعداً اطلاعات نشان داده شده در این صفحه را گسترش دهیم یا تغییر دهیم، این اعلان همچنان کار خواهد کرد و خروجی همچنان در جدول نشانه‌گذاری ما ثبت می‌شود.

باحاله، درسته؟

فعلاً کار ما با BrowserMCP تمام شده است، بنابراین آن را در مرورگر خود قطع کنید .

۷. اتوماسیون با مهارت‌ها و نمایشنامه‌نویس

محدودیت‌های BrowserMCP

BrowserMCP عالی است، اما چند محدودیت دارد. برای مثال:

به یک جلسه مرورگر موجود، با افزونه BrowserMCP متصل، نیاز دارد. (جلسات جدیدی ایجاد نمی‌کند.)
از مرورگرهای غیر Chromium پشتیبانی نمی‌کند.
این امر مستلزم اجرای یک فرآیند مرورگر جداگانه است که روی همان دستگاهی قرار دارد که سرور MCP در آن در حال اجرا است.
قادر به کار با سیستم فایل محلی نیست. برای مثال، نمی‌تواند: فایل‌های محلی برای اثبات اسکرین‌شات‌ها ایجاد کند، یا فایل‌هایی مانند PDF قابل دانلود را از برنامه وب دانلود و ذخیره کند.
این غیرقطعی است. سعی می‌کند اقداماتی را که شما به آن می‌گویید انجام دهد، اما وضعیت محلی، مانند یک پنجره پاپ‌آپ غیرمنتظره، می‌تواند تعامل را مختل کند.
این برنامه از عملیات "بدون سر" پشتیبانی نمی‌کند، به این معنی که نمی‌تواند بدون یک پنجره مرورگر واقعی در یک خط لوله CI/CD اجرا شود.

نمایشنامه‌نویس

Playwright ابزاری بسیار پیچیده‌تر است. این یک چارچوب اتوماسیون و تست مرورگر متن‌باز و جاافتاده است. این ابزار می‌تواند کارهای زیادی انجام دهد که BrowserMCP نمی‌تواند، از جمله تمام مواردی که در بالا به آنها اشاره کردم.

این روش برای اجرای سناریوهای تست پیچیده، قابل اعتماد و تکرارپذیر بسیار مناسب‌تر است. و به ویژه برای کار با جلسات طولانی مدت یا در واقع اجرای چندین جلسه مستقل به صورت موازی بسیار مناسب است.

اما با چنین قابلیت اضافی، منحنی یادگیری بسیار تندتری به وجود می‌آید.

مهارت‌ها

خوشبختانه، لازم نیست یاد بگیریم که چگونه مستقیماً از Playwright استفاده کنیم. در عوض، می‌توانیم از مهارت یک عامل (agent) استفاده کنیم.

خب، مهارت یک عامل دقیقاً چیست؟ آن را به عنوان مجموعه‌ای از تخصص‌های مرتبط در نظر بگیرید که می‌توانید در مواقع نیاز به انجام کاری خاص، به عامل هوش مصنوعی خود ارائه دهید. این مهارت‌ها شامل دستورالعمل‌ها، بهترین شیوه‌ها و گاهی اوقات حتی اسکریپت‌های کمکی متناسب با یک کار خاص است.

بخش واقعاً هوشمندانه ماجرا اینجاست: افشای تدریجی. به جای اینکه هر سند API قابل تصور و قانون چارچوب تست را در اعلان اولیه سیستم LLM قرار دهد - که پنجره context شما را اشغال می‌کند و توکن‌ها را می‌سوزاند، انگار که به کسی مربوط نیست - عامل فقط زمانی که واقعاً به مهارت نیاز دارد، آن را می‌خواند. این کار context پایه را مختصر و مفید نگه می‌دارد و "نحوه انجام" دقیق را به موقع دریافت می‌کند. و بله، یک مهارت می‌تواند شامل دستورالعمل‌هایی در مورد نحوه استفاده از سرورهای MCP خاص برای انجام کار باشد.

مثل آن صحنه در فیلم ماتریکس به آن فکر کنید: مامور به یک مشکل نگاه می‌کند، متوجه می‌شود که باید Playwright را بداند، مهارت را دانلود می‌کند و ناگهان: "من کونگ فو بلدم." بوم. متخصص فوری.

اگر می‌خواهید در مورد مهارت‌های ارتباطی بیشتر بدانید، به موارد زیر توجه کنید:

چرا مهارت‌ها برای نمایشنامه‌نویس ایده‌آل هستند؟

استفاده از یک مهارت در اینجا انتخاب بسیار خوبی است. Playwright فوق‌العاده قدرتمند است، اما سینتکس آن می‌تواند پیچیده باشد. با دادن مهارت Playwright به عامل، دیگر لازم نیست نگران توهم LLM خود در مورد سینتکس قدیمی یا نوشتن انتخابگرهای شکننده باشیم. ما به آن یک کتاب راهنمای معتبر و دقیق در مورد نحوه استفاده صحیح از Playwright می‌دهیم.

من قصد دارم از Playwright CLI و مهارت‌های مرتبط با آن استفاده کنم.

با این رویکرد، ما Playwright CLI را به صورت محلی نصب می‌کنیم و سپس دانش لازم برای استفاده از آن را به عامل خود می‌دهیم. برای جلوگیری از هرگونه سردرگمی: من هیچ سرور Playwright MCP نصب نمی‌کنم.

نصب

بیایید ابتدا رابط خط فرمان متن‌باز Microsoft Playwright را نصب کنیم. اگر هنوز این کار را انجام نداده‌اید، با تایپ کردن / 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 ما دانلود می‌کند:

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 مشخص شده باز می‌شود.

من همچنین می‌خواهم Gemini بتواند از Playwright در حالت "headed" استفاده کند، یعنی با یک رابط کاربری قابل مشاهده. اما این مهارت به Gemini نمی‌گوید که چگونه این کار را انجام دهد. بنابراین این خطوط را به ~/.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 را مجدداً راه‌اندازی کنید و سپس دستور زیر را اجرا کنید:

/mcp disable browsermcp

حالا از Gemini می‌خواهیم که با Playwright به برنامه ما هدایت شود. اما برخلاف BrowserMCP، نیازی نیست ابتدا مرورگر را باز کنیم. Playwright این کار را با یک فرآیند محلی برای ما انجام می‌دهد.

این دستور را در 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 قبل از اجرای هر ابزاری، اجازه شما را خواهد گرفت.)

اینجا چه فرقی دارد؟

لازم نبود اول مرورگر را اجرا کنیم.
ما نیازی به شروع و اتصال یک افزونه مرورگر نداشتیم.
لازم نیست به عامل بگوییم که ابتدا از سیستم خارج شود. تست از یک جلسه "تمیز" نمونه‌سازی می‌شود.
ما می‌توانیم از صفحه عکس بگیریم و آنها را به عنوان فایل‌های محلی ذخیره کنیم.

کمی بعد باید یک فایل dashboard.png در پوشه output ببینید.

توجه داشته باشید که فراخوانی‌های ابزار را در Gemini CLI اجرا خواهید کرد، اما رابط کاربری مرورگر را نخواهید دید. دلیل این امر این است که Playwright به طور پیش‌فرض در "حالت بدون سر" اجرا می‌شود.

اما اگر دوباره با این اعلان اصلاح‌شده اجرا کنید، می‌توانید رابط کاربری را نیز ببینید:

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 باید چیزی شبیه به این باشد:

چقدر عالی بود؟

۸. اما صبر کنید، Chrome DevTools MCP هم وجود دارد!

Chrome DevTools مجموعه‌ای از ابزارهای توسعه‌دهندگان وب است که در مرورگر کروم تعبیه شده و برای توسعه و اشکال‌زدایی وب در نظر گرفته شده است. مدت زیادی است که وجود دارد. می‌دانید... کنسولی که می‌توانید هنگام باز کردن More Tools -> Developer Tools در کروم با آن تعامل داشته باشید.

اما حالا سرور MCP مخصوص به خودش را دارد، که سال گذشته هنگام بررسی خودکارسازی مرورگر از Gemini CLI وجود نداشت. اما حالا می‌توانید هر کاری را که می‌توانید با BrowserMCP انجام دهید و بیشتر کارهایی را که می‌توانید با Playwright انجام دهید، بدون نصب چیزی در مرورگر خود و بدون نصب یک CLI محلی، انجام دهید.

بیایید امتحانش کنیم!

در حال حاضر، ما تأیید کرده‌ایم که در Google Cloud Shell کار می‌کند. بنابراین، برای این بخش، بیایید از Google Cloud Shell در کنسول Google Cloud استفاده کنیم.

کنسول را باز کنید و یک جلسه Cloud Shell ایجاد کنید. از آنجا:

# 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

حالا باید یک فایل اجرایی کروم را در Cloud Shell نصب کنیم:

# 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 بگوییم که فایل اجرایی کروم را کجا پیدا کند. می‌توانیم این کار را با تنظیم گزینه executable-path در پیکربندی سرور MCP و 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 از Cloud Shell اجرا کنید و مانند قبل با استفاده از دستور /mcp list بررسی کنید که سرور MCP در حال اجرا باشد.

در نهایت، ما آماده‌ایم تا آن را با یک اعلان آزمایش کنیم.

بیایید کمی متفاوت عمل کنیم. این بار، به رابط خط فرمان Gemini می‌گوییم که برنامه آزمایشی را اجرا کرده و به آن متصل شود:

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.

طبق معمول، از شما خواسته می‌شود که به سرور MCP اجازه اجرا بدهید. اما متوجه خواهید شد که سعی می‌کند یک مهارت را فعال کند. درست است: این افزونه شامل هم سرور MCP و هم مهارتی است که عامل را در مورد بهترین نحوه استفاده از سرور MCP راهنمایی می‌کند. عالی!

چند ثانیه بعد، رابط خط فرمان Gemini باید نتایج را در جدول ارائه دهد و تصویر صفحه را ذخیره کرده باشد. می‌توانید تصویر صفحه را از Cloud Shell دانلود کنید تا مطمئن شوید که مشکلی ندارد.

۹. می‌توانید این کار را در حالت ضدجاذبه و به صورت پیش‌فرض انجام دهید!

گوگل آنتی‌گراویتی شامل زیرمجموعه مرورگر (Browser Subagent ) است که قابلیت‌های مشابهی با Playwright CLI ارائه می‌دهد. وقتی از Gemini در Antigravity می‌خواهید که یک URL را به صورت تعاملی نمایش دهد، این زیرمجموعه به طور خودکار نمایش داده می‌شود.

این زیرعامل هدف سطح بالای شما (مثلاً "بررسی کنید که آیا فرم ورود کار می‌کند") را در نظر می‌گیرد، طرح‌بندی صفحه را از طریق اسکرین‌شات‌ها و DOM به صورت بصری تجزیه و تحلیل می‌کند و خودش کلیک‌ها و کلیدهای فشرده شده را تشخیص می‌دهد. این اساساً یک هوش مصنوعی بصری و چندوجهی است که درست مانند یک انسان در وب پیمایش می‌کند. و بهترین بخش؟ این زیرعامل به طور خودکار ویدیوها را ضبط می‌کند و از هر کاری که انجام می‌دهد اسکرین‌شات می‌گیرد و آنها را مستقیماً در فضای کاری محلی شما به عنوان اثبات بصری از آنچه انجام داده است، ذخیره می‌کند. آنتی‌گراویتی این شواهد بصری را مصنوعات می‌نامد.

نکته‌ای برای کاربران WSL: راه‌اندازی Browser Agent در Antigravity کمی دردسرساز است. من موفق شدم آن را راه‌اندازی کنم ، اما Subagent را در این محیط ناپایدار و غیرقابل اعتماد می‌دانم. بنابراین این یکی از دلایلی است که من عاشق Playwright CLI هستم!

۱۰. سایر موارد استفاده برای خودکارسازی مرورگر

خودکارسازی مرورگر فقط به این معنی نیست که قبل از شروع به کار، دکمه ورود شما کار کند. وقتی متوجه شوید که می‌توانید یک مدرک لیسانس مدیریت (LLM) را مستقیماً به یک مرورگر وصل کنید، دنیای کاملاً جدیدی از پروژه‌های خودساخته و خودجوش به روی شما باز می‌شود.

اگر در حال ساخت عامل‌های هوش مصنوعی خودتان هستید، در اینجا چند روش وجود دارد که می‌توانید از ابزارهایی مانند BrowserMCP یا Playwright CLI برای انجام کارهای سنگین استفاده کنید:

دستیار تحقیق شخصی: تصور کنید که به نماینده خود یک URL خاص را نشان می‌دهید و از او می‌خواهید که در مورد موضوعی تحقیق کند، اما سایت نیاز به ورود به سیستم و پیمایش منوهای پیچیده دارد. به جای نوشتن یک وب اسکرپر سفارشی که هفته آینده خراب می‌شود، فقط به نماینده خود می‌گویید که وارد سیستم شود، به داده‌ها پیمایش کند و آن را برای شما خلاصه کند.
یکپارچه‌ساز «صندلی چرخان»: همه ما سیستم‌های اینترانت قدیمی داریم که API ندارند. شما آن‌هایی را که می‌شناسید - جایی که باید داده‌ها را از سیستم A به صورت دستی کپی کنید و آن را در فرمی در سیستم B قرار دهید. یک عامل با اتوماسیون مرورگر می‌تواند به عنوان چسب جهانی عمل کند، صفحه سیستم قدیمی را بخواند و فرم را در سیستم جدید پر کند.
تریاژ و اصلاح خودکار: آیا ساعت ۳ صبح از سیستم مانیتورینگ خود هشدار P1 دریافت کرده‌اید؟ نماینده شما می‌تواند به طور خودکار URL داشبورد خاص را باز کند، نمودارها یا گزارش‌ها را بخواند (با استفاده از قابلیت‌های دید چندوجهی آن) و خلاصه‌ای را مستقیماً در کانال Slack شما ارسال کند و در طول یک حادثه، دقایق گرانبهایی را برای شما ذخیره کند.

زیبایی این رویکرد این است که شما دیگر محدود به API های موجود نیستید. اگر یک انسان بتواند کاری را در مرورگر انجام دهد، عامل شما نیز می‌تواند.

۱۱. نتیجه‌گیری

تبریک! شما به سادگی با گفتن آنچه که می‌خواستید به یک عامل هوش مصنوعی به زبان ساده انجام دهد، تست‌های رابط کاربری خودکار و قوی را ساخته و اجرا کرده‌اید. بدون انتخابگرهای CSS شکننده، بدون اسکریپت‌های تنظیمات پیچیده.

شما آموخته‌اید:

تست رابط کاربری لازم نیست دردناک باشد: با تمرکز بر هدف تست به جای پیاده‌سازی شکننده DOM، می‌توانیم سربار نگهداری را به میزان زیادی کاهش دهیم.
پروتکل زمینه مدل (MCP) به عامل‌های شما دسترسی جهانی و آسان به ابزارها، داده‌ها و محیط‌ها را می‌دهد.
BrowserMCP ابزاری فوق‌العاده برای آوردن قابلیت‌های عامل‌محور به جلسات محلی و موجود کروم شماست.
Skills و Playwright CLI سطح جدیدی از تست خودکار قطعی و تکرارپذیر را ارائه می‌دهند - که همگی از طریق افشای تدریجی قدرت می‌گیرند.
مرورگر Subagent شرکت Antigravity با معرفی ناوبری خودکار و چندوجهی و ضبط مصنوعات، همه چیز را یک قدم فراتر می‌برد.

حالا، بروید و کارهای خسته‌کننده را خودکار کنید!

لینک‌های مفید

اگر می‌خواهید عمیق‌تر به ابزارها و مفاهیمی که امروز پوشش دادیم بپردازید، این منابع را بررسی کنید:

کد مخزن

مخزن گیت‌هاب agentic-ui-testing - لطفاً اگر این آزمایشگاه کد را مفید یافتید، یک ستاره به مخزن اضافه کنید!

ابزارها و چارچوب‌های اصلی

مخزن گیت‌هاب BrowserMCP
مستندات BrowserMCP
افزونه‌ی رابط خط فرمان مرورگر Gemini - لطفاً اگر این آزمایشگاه کد را مفید یافتید، یک ستاره به مخزن اضافه کنید!
نمایشنامه‌نویس
استودیوی هوش مصنوعی گوگل
ابزارهای توسعه کروم
ابزارهای توسعه کروم (Chrome DevTools MCP)

مفاهیم و مهارت‌های عامل‌محور

دیگر