Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

בדיקות אוטומטיות של ממשק המשתמש באמצעות Antigravity (AGY) CLI,‏ BrowserMCP,‏ Playwright וסוכן הדפדפן

1. מבוא

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

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

בשיעור Codelab הזה נסביר איך להשתמש ב-Antigravity CLI יחד עם יכולות של סוכנים וכלים מולטי-מודאליים של MCP כמו BrowserMCP. תלמדו איך ליצור ולהריץ בדיקות אוטומטיות של ממשק המשתמש באמצעות שפה טבעית, ותראו איך כלים מבוססי-סוכנים יכולים להתמודד עם משימות מורכבות ולתת לכם כוחות-על כיוצרים.

חשוב לציין שב-Codelab הזה אנחנו מתמקדים בתרחישי שימוש ספציפיים של אוטומציה של ממשק משתמש ושליטה מרחוק בדפדפן, אבל מה שבאמת חשוב הם העקרונות הבסיסיים והעולם העצום של האפשרויות שהם פותחים. באמצעות לימוד סוכנים להשתמש ב-CLI מקומי ובשרתי MCP, אנחנו יכולים להעביר משימות מורכבות שלא היה לנו זמן או מומחיות מיוחדת לטפל בהן בעצמנו.

מה תלמדו

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

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

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

תצטרכו:

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

2. הסביבה של Antigravity

במאי 2026, ‏ Google הפסיקה את השימוש בחבילת Antigravity החדשה. זו הייתה מהפכה משמעותית ב-Antigravity, והיא הובילה לפיצול לארבעת המוצרים הבאים:

‫Antigravity 2.0, שהיא עכשיו סביבת 'בונה' ייעודית לפיתוח בעזרת סוכני AI במחשב. חשוב לציין שהוא לא כולל סביבת פיתוח משולבת (IDE). במקום זאת, אנחנו מתקשרים רק עם מנהל הסוכן. המטרה של הפלטפורמה הזו היא להוביל לעידן של 'מרעיון למוצר' באמצעות סוכנים, בלי להתעסק בקוד. הרבה בונים שלא מגיעים מרקע של קידוד יאהבו את התכונה הזו.
‫Antigravity IDE, שנותן לנו סביבת תכנות מוכרת יותר בסגנון VS Code, נתמכת על ידי מעטפת אג'נטית של Antigravity. כאן אנחנו יכולים לבצע פיתוח בעזרת סוכן Antigravity, ותמיד רואים את הקוד. מתכנתים ירגישו כאן בבית.
‫Antigravity SDK, שמספק את הכלים והתשתית שמפעילים את Antigravity, אבל הוא מוצג כ-Python Agent SDK. על ידי ייבוא מ-google.antigravity, אנחנו יכולים להשתמש ביכולות של Antigravity באופן פרוגרמטי.
‫Antigravity CLI, שהוא השלב הבא בהתפתחות של Gemini CLI המדהים. זו עדיין סביבה שבה האינטראקציה עם מודלים של Gemini מתבצעת קודם כל דרך הטרמינל. אבל ה-Antigravity CLI החדש מובנה ב-Go, וזה מורגש – הוא מהיר הרבה יותר מ-Gemini CLI, גם בהפעלה וגם בשימוש כללי. הוא משתמש באותו 'ממשק' של סוכן כמו Antigravity 2.0 וסביבת הפיתוח המשולבת (IDE), ולכן מאפשר הגדרות משותפות וקביעת תצורה משותפת בכל חבילת Antigravity.

למרות שה-Lab הזה מתמקד בשימוש ב-Antigravity CLI, אפשר לבצע את כל הפעולות שמופיעות בו גם באמצעות Agy IDE או Agy 2.0.

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

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

כלים

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

דפדפן Chrome
Node.js
Antigravity CLI
Git

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

ההוראות מבוססות על ההנחה שאתם עובדים בסביבת 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

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

האפליקציה שאנחנו בודקים היום היא 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.

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

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

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

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

כוונה לעומת הטמעה

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

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

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

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

מה זה BrowserMCP?

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

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

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

התקנת Browser MCP

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

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

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

בשלב הבא, מגדירים את שרת ה-MCP בפועל ב-Antigravity. אנחנו עושים את זה על ידי הוספת הגדרת השרת browsermcp לקובץ mcp_config.json הגלובלי שלנו.

יוצרים או עורכים את הקובץ ~/.gemini/config/mcp_config.json ומוסיפים את ההגדרה הבאה:

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

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

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

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

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

make dev

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

עכשיו אפשר להשתמש ב-CLI של Agy כדי להריץ בדיקה. מעתיקים את ההנחיה הזו ומדביקים אותה ב-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.

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

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

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

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

מגניב, נכון?

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

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

המגבלות של BrowserMCP

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

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

‫Playwright

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

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

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

מיומנויות

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

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

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

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

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

למה מיומנויות מתאימות ל-Playwright

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

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

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

התקנה

קודם נתקין את Microsoft Playwright CLI בקוד פתוח. אם עדיין לא עשיתם את זה, יוצאים מה-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 כדי שהסוכן לא יתבלבל לגבי הכלים שבהם צריך להשתמש. מפעילים מחדש את Antigravity CLI ‏ (agy). אפשר להשבית זמנית את שרת browsermcp ישירות דרך TUI:

כדי לפתוח את חלונית הניהול של MCP, מקלידים /mcp בתיבת ההנחיה.
משתמשים במקשי החיצים (למעלה/למטה) כדי לבחור באפשרות browsermcp ומקישים על Enter או Return.
מזיזים את הסמן שמאלה כדי לבחור באפשרות 'השבתה' ומקישים על Enter כדי להשבית אותה.

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

מזינים את ההנחיה הזו ב-CLI של Agy:

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.

(כמו תמיד, ה-CLI יבקש הרשאה לפני הפעלת כלים).

מה שונה כאן?

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

אחרי זמן קצר, קובץ dashboard.png אמור להופיע בתיקיית הפלט.

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

הפלט של Agy CLI אמור להיראות בערך כך:

איזה כיף היה!

9. סוכן הדפדפן המובנה של Antigravity

פלטפורמת Google Antigravity מגיעה עם סוכן דפדפן מובנה משלה ( סוכן משנה של דפדפן) שמספק אוטומציה של דפדפן מחוץ לקופסה, בלי שתצטרכו להתקין כלי נפרד כמו Playwright CLI.

איך זה עובד

כדי לשלוט בדפדפן, סוכן הדפדפן המובנה פועל ישירות דרך פרוטוקול כלי הפיתוח ל-Chrome‏ (CDP), כך שלא צריך תוספים לדפדפן או פלאגינים ביניים ב-Antigravity 2.0 וב-IDE.

כשמפעילים את Antigravity, הוא מתחבר למופע של Chrome דרך יציאת ניפוי באגים מקומית באמצעות חיבור WebSocket. הוראות ברמה גבוהה מהסוכן מתורגמות ישירות לפקודות CDP ברמה נמוכה ש:

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

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

זמינות הכלי

סוכן הדפדפן המובנה עדיין לא נתמך ב-CLI של Antigravity (Agy CLI) שמתבסס על טרמינל. עם זאת, אפשר להשתמש בו כבר היום ב-Antigravity IDE וב-Antigravity 2.0. אנחנו מקווים שבעדכון עתידי של Agy CLI תהיה תמיכה בסוכן הדפדפן.

הערה למשתמשי WSL: עכשיו קל יותר מבעבר להפעיל את סוכן הדפדפן ב-Antigravity ב-WSL. במקום להתמודד עם ניתוב רשת מורכב והעברת יציאות, צריך פשוט להפעיל את מצב הרשת 'משוקף' בהגדרות של WSL. מדריך מפורט זמין במאמר פתרון בעיות ב-WSL באמצעות Google Antigravity: ‏ Agy 2.0 ו-Agy IDE Edition.

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

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

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

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

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

11. סיכום

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

למדתם:

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

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

12. קישורים שימושיים

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

קוד מאגר

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

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

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

אחר