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

1. מבוא

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

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

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

מה תלמדו

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

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

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

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

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

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

כלים

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

דפדפן Chrome
‫Gemini CLI (שעצמו תלוי ב-nodejs)
Git

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

(חשוב לזכור

הכלי BrowserMCP לא יפעל מ-Google Cloud Shell

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

יצירת פרויקט ב-Google Cloud

אם כבר יש לכם מפתח Gemini API, אתם יכולים להשתמש בו ולדלג על השלב הזה.

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

אם אתם מכירים את Google Cloud, אתם יכולים ליצור פרויקט חדש כאן. אפשר גם ליצור פרויקט בענן ב-Google Cloud ישירות מתוך Google AI Studio.

איך יוצרים מפתח Gemini API בחינם

עכשיו יוצרים מפתח Gemini API ב-Google AI Studio. לוחצים על 'קבלת מפתח API'.

יוצג לכם משהו כזה:

כאן יופיעו המפתחות הקיימים שלכם, אם יש כאלה. לחלופין, כדי ליצור מפתח חדש, לוחצים על 'יצירת מפתח API'.

כאן אפשר לבחור פרויקט קיים ב-Google Cloud או ליצור פרויקט חדש. יצרתי פרויקט חדש בשם agentic-ui-demo:

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

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

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

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

לאחר מכן, יוצרים עותק של קובץ .env.template לדוגמה שנקרא .env. אפשר לעשות את זה בכלי העריכה או פשוט להריץ את הפקודה הבאה:

cp .env.template .env

מעדכנים את קובץ ה-‎ .env עם מפתח ה-API שלכם. (חשוב לזכור: אף פעם לא מבצעים צ'ק-אין לקובץ ‎ .env עם מידע כמו מפתח ה-API!) הדרך הכי קלה לעשות את זה היא לפתוח את הקובץ בכלי העריכה.

עכשיו נטען את משתנה הסביבה:

source .env

יצרתי קובץ Makefile כדי שיהיה לך קל להגדיר את הסביבה להפעלת אפליקציית ההדגמה. בוא נריץ אותו כדי לאתחל את הסביבה שלנו:

make install

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

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

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

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

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

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

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

make dev

שרת הפיתוח אמור להתחיל לפעול במהירות רבה, והאפליקציה תהיה זמינה בכתובת 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' לא בר-קיימא, שבה כל מודל וכלי חדשים מכפילים את נטל התחזוקה. פרוטוקול הקשר של המודל (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. לא צריך יותר לבנות גשרים מותאמים אישית של API לכל פלטפורמה. במקום זאת, אפשר להשתמש במערכת האקולוגית של שרתי MCP מוכנים מראש עם קוד פתוח לשירותים נפוצים כמו GitHub,‏ Slack, מסדי נתונים וכו'. אפשר לחבר אותם ישירות לתהליכי העבודה של הסוכן. הארכיטקטורה המודולרית הזו, שפועלת בשיטת Plug and Play, מבטיחה שאם תעברו לספק מודלים גדולים לשונית (LLM) אחר או תשדרגו את הכלים שלכם בהמשך, תשתית הליבה של השילוב תישאר ללא שינוי.

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

מה זה BrowserMCP?

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

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

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

התקנת Browser MCP

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

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

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

לאחר מכן, צריך להוסיף את הגדרות ה-MCP ללקוח:

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

איפה מגדירים את זה? זה תלוי בסוכן שלך. לדוגמה, ב-Gemini CLI: ~/.gemini/settings.json. החיפוש ייראה בערך כך:

בדיקה באמצעות 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 באופן מקומי, ואז מספקים לסוכן שלנו את הידע שהוא צריך כדי להשתמש בו. למען הסר ספק: אני לא מתקין שרת MCP של Playwright.

התקנה

קודם נתקין את 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

עכשיו נוסיף את המיומנות. הפקודה הזו תוריד את תיקיית המשנה של המיומנות ישירות מ-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 פועל כברירת מחדל ב'דפדפן בלי GUI'.

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

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.

הפלט של Gemini CLI אמור להיראות כך:

איזה כיף היה!

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

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

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

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

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

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

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

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

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

10. סיכום

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

למדתם:

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

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

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

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

קוד מאגר

מאגר GitHub של agentic-ui-testing

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

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

אחר

עבודה עם Google Antigravity ב-WSL