אוטומציה של בדיקות ממשק משתמש באמצעות Gemini CLI, ‏ BrowserMCP ו-Playwright

1. מבוא

בדיקת אפליקציות אינטרנט יכולה להיות משימה מייגעת. בדיקות ממשק משתמש מסורתיות מרגישות לעיתים קרובות כמו מאבק מתמשך נגד שבירות. אתם מוצאים את עצמכם כותבים סקריפטים מורכבים, מנהלים בוררי CSS ו-XPath שבירים ועושים מאמצים רבים רק כדי לאמת תהליך פשוט של משתמש.

אבל מה אם הייתם יכולים פשוט להגיד לסוכן מה לבדוק בשפה טבעית, והוא פשוט... היה עושה את זה?

ב-Codelab הזה נסביר איך להשתמש ב-Gemini CLI ובכלים מולטי-מודאליים כמו BrowserMCP. תלמדו איך ליצור ולהריץ בדיקות אוטומטיות של ממשק משתמש באמצעות שפה טבעית. שימו לב: לא נדרש ידע מוקדם בשימוש בכלים ובמסגרות לבדיקת ממשקי משתמש כדי להשתתף בשיעור Codelab הזה.

מה תלמדו

מהו Model Context Protocol‏ (MCP) ולמה הוא משנה את כללי המשחק.
איך BrowserMCP מאפשר לסוכני AI לשלוט בדפדפני אינטרנט.
איך מריצים בדיקות ממשק משתמש אוטומטיות מ-Gemini CLI.
הסבר על מיומנויות של סוכנים ועל היתרונות שלהן.
איך מלמדים סוכן להשתמש ב-Playwright באמצעות כישור.
שימוש משולב ב-MCP וב-Skill של כלי הפיתוח ל-Google Chrome.
מבט מהיר על סוכן המשנה של דפדפן Antigravity.
תרחישי שימוש נוספים לבקרה על הדפדפן.

הפעולות שתבצעו

מגדירים את סביבת הפיתוח.
לבדוק אפליקציה לדוגמה שצריך לבדוק.
אפשר להשתמש ב-Gemini CLI כדי ליצור אינטראקציה עם האפליקציה באמצעות BrowserMCP.
איך מלמדים את הסוכן להשתמש ב-Playwright באמצעות כישורי סוכן.

2. דרישות מוקדמות

לפני שנתחיל, כדאי לוודא שיש לך את כל מה שצריך.

ב-Codelab הזה נשתמש ב-Gemini CLI, בכלי MCP, ביכולות של סוכנים ובאפליקציית הדגמה של React.

כלים

בשיעור ה-Lab הזה אנחנו יוצאים מנקודת הנחה שכבר יש לכם:

דפדפן Chrome
Nodejs
Gemini CLI
Git

כדי להשתמש ב-Gemini CLI, צריך להזדהות ב-Google. יש כמה דרכים לעשות את זה, אבל אנחנו ממליצים פשוט להשתמש באפשרות כניסה באמצעות חשבון Google. האפשרות הזו כוללת מכסה נדיבה לשימוש ב-Gemini בחינם, ולא נדרש פרויקט בענן ב-Google Cloud כדי להשתמש בה. אם תשתמשו באפשרות הזו במהלך ה-Codelab, לא תחויבו בעלות. (אם כבר יש לכם מפתח Gemini API, אתם יכולים להשתמש בו במקום).

ההוראות מבוססות על ההנחה שאתם עובדים בסביבת Linux (או WSL) או macOS. אם אתם משתמשים ב-Windows (כמוני), אתם יכולים לפעול לפי ההוראות באמצעות WSL.

(שימו לב

‫BrowserMCP לא יעבוד מ-Google Cloud Shell

, כי הוא יתחבר רק לדפדפן מקומי שפועל באותו מחשב)

הגדרת סביבת הפיתוח

יצרתי מאגר הדגמה ב-GitHub. הוא כולל אפליקציה לדוגמה שבה אפשר להשתמש לבדיקת ממשק המשתמש. אפשר לשכפל אותו על ידי הפעלת הפקודה הבאה מהטרמינל המקומי:

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

3. אפליקציית ההדגמה שלנו

האפליקציה שאנחנו בודקים היום היא The Dazbo Omni-Dash – לוח בקרה עתידני עם ערכת נושא כהה לניהול טלמטריית אבטחה. (כן, זה היה תכנות בשיטת Vibe coding!)

למה האפליקציה הזו?

הוא נועד לספק משטח בדיקה מציאותי עם:

אימות מדומה: תהליך כניסה שדורש פרטי כניסה ספציפיים.
תוכן דינמי: כרטיסי טלמטריה ויומני אבטחה שמדמים נתונים בזמן אמת.
מצבים אינטראקטיביים: תפריטי ניווט וקלט של טפסים שמשתנים בהתאם לפעולת המשתמש.
טכנולוגיה מודרנית: המערכת מבוססת על React ו-Vite, ולכן היא מהירה ורספונסיבית.

הפעלת האפליקציה

כדי להפעיל את האפליקציה, פשוט מריצים את הפקודה:

make dev

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

שרת הפיתוח אמור להתחיל לפעול במהירות רבה, והאפליקציה תהיה זמינה בכתובת http://localhost:5173.

פשוט לוחצים על הקישור כדי לפתוח את האפליקציה בדפדפן. פשוט משאירים את התהליך הזה פועל במסוף. נבצע פקודות טרמינל עוקבות בסשן טרמינל נפרד.

4. האתגר של בדיקות ממשק משתמש

ידוע שמבחני ממשק משתמש מסורתיים הם מסובכים לביצוע, וקשים עוד יותר לתחזוקה. נקודות כאב נפוצות:

בדיקת 'חוסר יציבות': בדיקות שעוברות בדקה אחת ונכשלות בדקה הבאה בגלל בעיות בתזמון, תנאי מירוץ או נכסים שנפרסים לאט.
סלקטורים שבירים: הסתמכות על מבני DOM ספציפיים (כמו div > div > button) שנשברים עם השינוי הקל ביותר בממשק המשתמש, מה שמוביל לתחזוקה מתמדת של הסקריפט.
עקומת למידה תלולה: מפתחים צריכים לשלוט בשפות מורכבות שספציפיות לדומיין ובמאפיינים ייחודיים שספציפיים למסגרות (Cypress, ‏ Selenium, ‏ Playwright) רק כדי להפוך קליק בסיסי לאוטומטי.
השוואת סביבות: התמודדות עם מצבי אפליקציה שקשה לשכפל ועם התקורה של ניקוי נתוני בדיקה.

אנחנו צריכים דרך לבדוק את הכוונה ולא את ההטמעה.

5. ‫MCP to the Rescue

‫Model Context Protocol‏ (MCP) הוא תקן פתוח שמאפשר למודלים ולסוכני AI לקיים אינטראקציה עם כלים חיצוניים, ממשקי API ונתונים. אפשר לחשוב על זה כמתאם אוניברסלי שמאפשר למודלים ולסוכנים למצוא את הכלים שיש להם גישה אליהם ולהשתמש בהם.

באופן מסורתי, כדי לשלב מודלים גדולים של שפה (LLM) עם נתונים וכלים חיצוניים, מפתחים נדרשים לכתוב חיבורי API מותאמים אישית ומוקשחים לכל מקור נתונים חדש. כך נוצרת בעיית שילוב לא בת קיימא של M x N, שבה כל מודל וכלי חדשים מכפילים את נטל התחזוקה. הפרוטוקול Model Context Protocol ‏ (MCP) פותר את הבעיה הזו בכך שהוא מבטל את הצורך בכתיבת קוד ספציפי כדי לתזמן את היכולות האלה. במקום לקודד במפורש תהליכי עבודה מורכבים של ביצוע, המפתחים יכולים להסתמך על מודל שפה גדול (LLM) כדי לפרש את הבקשות של המשתמשים בשפה טבעית, ולחשוב באופן דינמי אילו כלים כדאי להשתמש בהם תוך כדי תנועה.

כשמשתמש מנפיק פקודה בשפה טבעית (למשל "Navigate to localhost:5173, login as ‘admin', and click the Submit button"), מודל ה-LLM מגלה את היכולות הזמינות ומפיק בקשה מובנית להפעלת כלי ספציפי. לקוח ה-MCP פועל כמתרגם, ומנתב את הבקשה הזו לשרת ה-MCP הייעודי, שמבצע את הפעולה או מאחזר את הנתונים ומחזיר את ההקשר למודל. כך ה-AI יכול לפעול באופן אוטונומי בלי שהמפתח יצטרך לקודד באופן קשיח את נתיב הביצוע הספציפי.

‫MCP יוצרת תקן אוניברסלי – שלעתים קרובות מתואר כ-USB-C לאפליקציות AI – וכך מאפשרת שימוש חוזר נרחב במוצרים מוכנים. מפתחים יכולים לבנות שרת MCP פעם אחת, וכל מארח AI שתואם ל-MCP יכול להתחבר אליו באופן מיידי, וכך נפתרת בעיית השילוב M x N. לא צריך יותר לבנות גשרים מותאמים אישית לכל פלטפורמה. במקום זאת, אפשר להשתמש במערכת האקולוגית של שרתי MCP מוכנים מראש עם קוד פתוח לשירותים נפוצים כמו GitHub,‏ Slack, מסדי נתונים וכו'. אפשר לחבר אותם ישירות לתהליכי העבודה של הסוכן. הארכיטקטורה המודולרית הזו, שפועלת בשיטת Plug and Play, מבטיחה שאם תעברו לספק מודלים גדולים של שפה אחר או תשדרגו את הכלים שלכם בהמשך, תשתית הליבה של השילוב תישאר ללא שינוי.

6. פעולות אוטומטיות באמצעות BrowserMCP

מה זה BrowserMCP?

זה הכלי הראשון שנתנסה בו היום. ‫BrowserMCP הוא שרת MCP שנותן לסוכני AI את ה "עיניים" ו "הידיים" שהם צריכים כדי ליצור אינטראקציה עם דפדפן אינטרנט. בקיצור, הוא מחקה אינטראקציה אנושית עם דפדפן. הוא קוד פתוח ואפשר לעיין במאגר GitHub כאן. כאן אפשר לעיין במאמרי העזרה הראשיים בנושא BrowserMCP.

אלה כמה מהיכולות שלו:

הוא יכול לנווט לכתובות URL.
הוא יכול לבדוק את ה-DOM.
הוא יכול ללחוץ על לחצנים ולהקליד טקסט בטפסים.
אפשר לגרור ולשחרר אותו.
הוא יכול לקרוא יומנים של מסוף הדפדפן.
היא מהירה: האוטומציה מתבצעת באופן מקומי במחשב.

התקנת Browser MCP

כדי להשתמש ב-BrowserMCP, צריך לבצע שני דברים:

מתקינים את התוסף BrowserMCP ב-Chrome (או בכל דפדפן שמבוסס על Chromium).
מגדירים את שרת ה-MCP לסוכן.

כדי להתקין את התוסף, פשוט פועלים לפי ההוראות שמופיעות כאן. הפעולה אורכת רק כמה שניות. אחרי ההתקנה, לוחצים על 'חיבור' בתוסף כדי לאפשר לסוכן לשלוט בכרטיסייה הנוכחית. (ברור שאתם רוצים שהכרטיסייה הנוכחית תהיה הכרטיסייה שבה אפליקציית ההדגמה פועלת!)

בשלב הבא, צריך להוסיף את שרת ה-BrowserMCP בפועל ללקוח. ב-Gemini CLI זה קל מאוד. פשוט מתקינים את התוסף:

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

בדיקה באמצעות BrowserMCP

ועכשיו לקסם. קודם כל, נפעיל את Gemini CLI (על ידי הרצת gemini) בסשן טרמינל חדש. (נזכיר שהאפליקציה להדגמה פועלת בסשן הטרמינל הראשוני שלנו). ב-Gemini CLI, מריצים את הפקודה /mcp כדי לוודא שהכלי מותקן בצורה תקינה. אמורה להופיע רשימה של כלים, כמו זו שמופיעה כאן:

אם לא הפעלתם את אפליקציית ההדגמה קודם, מפעילים אותה עכשיו:

make dev

צריך לפתוח את האפליקציה בדפדפן Chrome ולחבר את התוסף BrowserMCP בכרטיסייה הזו. לוחצים על הקישור מהפקודה run. לאחר מכן לוחצים על סמל התוסף BrowserMCP ואז על 'חיבור'.

עכשיו אפשר להשתמש ב-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 יבדוק קודם שאפליקציית ההדגמה פועלת ביציאה שצוינה. לאחר מכן תתבקשו לאשר את הפעולות שהכלי מתכנן לבצע:

אפשר להריץ את כל כלי BrowserMCP בסשן הזה ב-Gemini CLI. אחר כך חוזרים לדפדפן וצופים באינטראקציות האוטומטיות.

כמה דברים שכדאי לשים לב אליהם בהנחיה שלמעלה:

אנחנו מתחילים בכך שאומרים לסוכן להתנתק, אם האפליקציה כבר מחוברת. שימו לב שלא צריך להגיד לנציג ללחוץ על טקסט ספציפי כמו 'יציאה מהשער'. הוא חכם מספיק כדי להבין על מה ללחוץ.
אחרי שהסוכן מתחבר ומציג את הדף הראשי, הוא אוסף את נתוני הטלמטריה. שוב, לא צריך להגיד לנציג לחפש משבצות ספציפיות או להתאים מילים ספציפיות. לכן, אם נרחיב או נשנה בהמשך את המידע שמוצג בדף הזה, ההנחיה הזו עדיין תפעל והפלט עדיין יתועד בטבלת ה-Markdown שלנו.

מגניב, נכון?

סיימנו להשתמש ב-BrowserMCP כרגע, לכן צריך לנתק אותו בדפדפן.

7. אוטומציה באמצעות Skills ו-Playwright

המגבלות של BrowserMCP

‫BrowserMCP הוא כלי מצוין, אבל יש לו כמה מגבלות. לדוגמה:

כדי להשתמש בה, צריך סשן דפדפן קיים שבו התוסף BrowserMCP מחובר. (הוא לא יוצר סשנים חדשים).
הוא לא תומך בדפדפנים שאינם מבוססי Chromium.
נדרש תהליך דפדפן נפרד שפועל באותה מכונה שבה פועל שרת ה-MCP.
הוא לא יכול לעבוד עם מערכת הקבצים המקומית. לדוגמה, הוא לא יכול: ליצור קבצים מקומיים כדי לשמור צילומי מסך כהוכחה, או להוריד ולאחסן קבצים מאפליקציית האינטרנט, כמו קובץ PDF שאפשר להוריד.
התוצאה לא דטרמיניסטית. הוא ינסה לבצע את הפעולות שתגידו לו, אבל מצב מקומי, כמו חלון קופץ לא צפוי, עלול לשבש את האינטראקציה.
הוא לא תומך בפעולה 'דפדפן בלי GUI', כלומר הוא לא יכול לפעול בפייפליין של CI/CD בלי חלון דפדפן אמיתי.

‫Playwright

‫Playwright הוא כלי מתוחכם הרבה יותר. זוהי מסגרת בדיקה ואוטומציה של דפדפנים, שהיא מבוססת קוד פתוח ומבוססת היטב. הוא יכול לעשות הרבה דברים ש-BrowserMCP לא יכול לעשות, כולל כל התכונות שציינתי למעלה.

הוא מתאים הרבה יותר להרצת תרחישי בדיקה מורכבים, מהימנים וחוזרים. הוא מתאים במיוחד לעבודה עם סשנים ארוכים, או להרצת כמה סשנים עצמאיים במקביל.

אבל היכולות הנוספות האלה מגיעות עם עקומת למידה תלולה יותר.

מיומנויות

למזלנו, אנחנו לא צריכים ללמוד איך להשתמש ב-Playwright ישירות. במקום זאת, אפשר להשתמש במיומנות של סוכן.

אז מהי בעצם מיומנות של סוכן? אפשר לחשוב על זה כעל חבילה קומפקטית של מומחיות בתחום מסוים, שאפשר להעביר לסוכן ה-AI כשהוא צריך לבצע משהו ספציפי. הוא כולל הוראות, שיטות מומלצות ולפעמים אפילו סקריפטים מסייעים שמותאמים למשימה מסוימת.

החלק החכם באמת הוא חשיפה הדרגתית. במקום לדחוף כל מסמך API וכל כלל של מסגרת בדיקה להנחיית המערכת הראשונית של ה-LLM – מה שגורם לניצול של חלון ההקשר ולשימוש מוגזם בטוקנים – הסוכן קורא את המיומנות רק כשהוא באמת צריך אותה. ההקשר הבסיסי נשאר מצומצם ויעיל, והמערכת מאחזרת את ההסבר המפורט בדיוק בזמן. כן, מיומנות יכולה לכלול הוראות לשימוש בשרתי MCP ספציפיים כדי לבצע את המשימה.

אפשר לחשוב על זה כמו הסצנה בסרט 'המטריקס': הסוכן מסתכל על בעיה, מבין שהוא צריך לדעת Playwright, מוריד את המיומנות ופתאום: "אני יודע קונג פו". בום. מומחה מיידי.

כדי לקבל מידע נוסף על מיומנויות, אפשר לעיין במקורות המידע הבאים:

למה Skills מתאימים ל-Playwright

שימוש במיומנות כאן הוא בחירה מצוינת. ‫Playwright הוא כלי חזק מאוד, אבל התחביר שלו יכול להיות מסובך. אם נותנים לסוכן מיומנות Playwright, לא צריך לדאוג לגבי הזיות של מודל שפה גדול (LLM) לגבי תחביר לא עדכני או כתיבה של סלקטורים שבירים. אנחנו מספקים לו מדריך מוסמך ומותאם אישית שמסביר בדיוק איך להשתמש ב-Playwright בצורה נכונה.

אני אשתמש ב-Playwright CLI ובמיומנות שמשויכת אליו.

בגישה הזו אנחנו מתקינים את Playwright CLI באופן מקומי, ואז מספקים לסוכן שלנו את הידע שדרוש לו כדי להשתמש בו. למען הסר ספק: אני לא מתקין שרת Playwright MCP.

התקנה

קודם נתקין את Microsoft Playwright CLI בקוד פתוח. אם עדיין לא עשיתם זאת, יוצאים מ-Gemini CLI על ידי הקלדת /quit``. לאחר מכן, בטרמינל:

# 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 במצב 'עם ראש', כלומר עם ממשק משתמש גלוי. אבל המיומנות לא אומרת ל-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

בדיקה באמצעות Playwright

כמו קודם, צריך להפעיל את האפליקציה (אם היא לא פועלת כבר). מבצעים את הפעולות הבאות בסשן הטרמינל הראשוני:

make dev

לאחר מכן, בסשן הטרמינל השני, נשבית באופן זמני את BrowserMCP כדי שהסוכן לא יתבלבל לגבי הכלים שבהם צריך להשתמש. מפעילים מחדש את Gemini CLI ומריצים את הפקודה:

/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 אמור להיראות כך:

איזה כיף היה!

8. אבל רגע, יש גם את MCP של כלי פיתוח ל-Chrome!

כלי הפיתוח ל-Chrome הם קבוצה של כלים למפתחי אתרים שמובנים בדפדפן Chrome, ומיועדים לפיתוח אתרים ולניפוי באגים. הוא קיים כבר הרבה זמן. אתם יודעים... המסוף שאפשר ליצור איתו אינטראקציה כשפותחים את האפשרות 'כלים נוספים' -> 'כלים למפתחים' ב-Chrome.

אבל עכשיו יש לו שרת 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

עכשיו צריך להתקין קובץ הפעלה של Chrome ב-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

שלב אחרון: צריך להגיד לשרת ה-MCP של כלי הפיתוח ל-Chrome איפה נמצא קובץ ההפעלה של Chrome. כדי לעשות את זה, צריך להגדיר את האפשרות 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 פועל באמצעות הפקודה /mcp list, כמו קודם.

לבסוף, אנחנו מוכנים לבדוק את זה באמצעות הנחיה.

בוא ננסה לעשות את זה קצת אחרת. הפעם, נגיד ל-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.

כמו תמיד, תתבקשו לאשר את הפעלת שרת ה-MCP. אבל תשימו לב שהוא גם מנסה להפעיל מיומנות. נכון: התוסף הזה מכיל גם את שרת ה-MCP וגם מיומנות שמנחה את הסוכן איך הכי טוב להשתמש בשרת ה-MCP. איזה יופי!

כמה שניות לאחר מכן, Gemini CLI אמור להציג את התוצאות בטבלה ולשמור את צילום המסך. אפשר להוריד את צילום המסך מ-Cloud Shell כדי לוודא שהוא נראה בסדר.

9. אפשר לעשות את זה ב-Antigravity Out of the Box!

‫Google Antigravity כולל את Browser Subagent, שמספק יכולות דומות ל-Playwright CLI. כשמבקשים מ-Gemini ב-Antigravity להתחיל הרצה של כתובת URL באופן אינטראקטיבי, הוא יוצר את הסוכן המשנה הזה באופן אוטומטי.

הסוכן המשני הזה מקבל את היעד ברמה הגבוהה (למשל, 'בדיקה אם טופס הכניסה פועל'), מנתח חזותית את פריסת הדף באמצעות צילומי מסך ו-DOM, ומגלה בעצמו את הקליקים והקשות המקשים. זהו למעשה AI ויזואלי רב-אופני שמנווט באינטרנט בדיוק כמו שאדם עושה. והכי חשוב - הוא מצלם סרטונים ויוצר צילומי מסך של כל מה שהוא עושה, ושומר אותם ישירות בסביבת העבודה המקומית כהוכחה ויזואלית למה שהוא ביצע. ‫Antigravity קורא להוכחות החזותיות האלה ארטיפקטים.

הערה למשתמשי WSL: קצת מסובך לגרום לסוכן הדפדפן לפעול ב-Antigravity. הצלחתי להפעיל אותו, אבל לדעתי הסוכן המשנה לא עקבי ולא אמין בסביבה הזו. לכן זו אחת הסיבות שאני אוהב את Playwright CLI!

10. תרחישי שימוש נוספים באוטומציה של דפדפנים

אוטומציה של דפדפנים לא נועדה רק לוודא שכפתור הכניסה שלכם פועל לפני פריסה ביום שישי בצהריים. אחרי שמבינים שאפשר לחבר מודל שפה גדול (LLM) ישירות לדפדפן, נפתח עולם חדש של פרויקטים ביתיים מבוססי-סוכנים.

אם אתם בונים סוכני AI משלכם, הנה כמה דרכים שבהן תוכלו להשתמש בכלים כמו BrowserMCP או Playwright CLI כדי לבצע את העבודה הקשה:

עוזר המחקר האישי: דמיינו שאתם מפנים את הסוכן לכתובת URL ספציפית ומבקשים ממנו לחקור נושא מסוים, אבל האתר דורש התחברות וניווט בתפריטים מורכבים. במקום לכתוב סקריפר אינטרנט בהתאמה אישית שייפסק לפעול בשבוע הבא, פשוט אומרים לסוכן להתחבר, לנווט אל הנתונים ולסכם אותם בשבילכם.
המשלב 'כיסא מסתובב': לכולנו יש מערכות אינטראנט מדור קודם שאין להן ממשקי API. אתם מכירים את המקרים האלה – שבהם צריך להעתיק נתונים באופן ידני ממערכת א' ולהדביק אותם בטופס במערכת ב'. סוכן עם אוטומציה של דפדפן יכול לשמש כדבק אוניברסלי, לקרוא את המסך של המערכת מדור קודם ולמלא את הטופס במערכת החדשה.
מיון ותיקון אוטומטיים: קיבלתם התראה ברמת חומרה P1 ממערכת הניטור בשעה 3 לפנות בוקר? הסוכן יכול לפתוח אוטומטית את כתובת ה-URL הספציפית של לוח הבקרה, לקרוא את הגרפים או את היומנים (באמצעות יכולות הראייה הרב-מודאליות שלו) ולפרסם סיכום ישירות בערוץ Slack שלכם, וכך לחסוך לכם דקות יקרות במהלך תקרית.

היתרון בגישה הזו הוא שאתם כבר לא מוגבלים לממשקי API זמינים. אם בן אדם יכול לעשות את זה בדפדפן, גם הסוכן שלכם יכול.

11. סיכום

מעולה! הרגע יצרתם והפעלתם בדיקות אוטומטיות ויציבות של ממשק משתמש, פשוט על ידי תיאור במילים פשוטות באנגלית לסוכן AI מה אתם רוצים שהוא יעשה. אין סלקטורים ב-CSS שעלולים להישבר ואין סקריפטים מורכבים להגדרה.

למדתם:

בדיקות ממשק משתמש לא חייבות להיות מסובכות: אם מתמקדים במטרה של הבדיקה ולא בהטמעה של DOM שעלולה להיות בעייתית, אפשר לצמצם באופן משמעותי את עלויות התחזוקה.
הפרוטוקול Model Context Protocol ‏ (MCP) מעניק לסוכנים שלכם גישה אוניברסלית ופשוטה לשימוש בכלים, לנתונים ולסביבות.
‫BrowserMCP הוא כלי מדהים להוספת יכולות של AI אקטיבי לפעילויות קיימות ב-Chrome באופן מקומי.
התכונות Skills ו-Playwright CLI מאפשרות לבצע בדיקות אוטומטיות חוזרות ודטרמיניסטיות ברמה חדשה – והכול מבוסס על חשיפה הדרגתית.
התוסף Browser Subagent של Antigravity לוקח את הכול צעד אחד קדימה, ומציג ניווט אוטונומי ורב-אופני והקלטת ארטיפקטים כבר מההתקנה.

עכשיו אפשר להתחיל ליצור אוטומציה למשימות המשעממות.

קישורים שימושיים

אם אתם רוצים להעמיק בנושאים ובכלים שדיברנו עליהם היום, כדאי לעיין במקורות המידע הבאים:

קוד מאגר

מאגר GitHub של agentic-ui-testing – אם ה-Codelab הזה היה שימושי, נשמח אם תוסיפו כוכב למאגר!

כלים ומסגרות ליבה

מאגר GitHub של BrowserMCP
מסמכי תיעוד של BrowserMCP
תוסף ל-Gemini CLI של BrowserMCP – אם ה-Codelab הזה היה שימושי, נשמח אם תוסיפו כוכב למאגר!
‫Playwright
Google AI Studio
כלי פיתוח ל-Chrome
Chrome DevTools MCP

מושגים ומיומנויות אג'נטיים

אחר