Playwright MCP

מה זה

Playwright MCP הוא שרת Model Context Protocol, מבית Microsoft, שעוטף את ספריית האוטומציה Playwright וחושף אותה כ-MCP tools. בלשון ה-README: "a Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright... enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models." כל לקוח התומך ב-MCP - Claude Desktop, Claude Code, VS Code, Cursor, Windsurf, Codex, Copilot CLI, Goose - יכול להתחבר ולנהוג בדפדפן אמיתי.

בחירת העיצוב שהופכת אותו לשמיש בפועל עבור LLM: הוא פועל על עץ ה-accessibility של Playwright, לא על פיקסלים. הכלי browser_snapshot מחזיר ייצוג טקסטואלי מובנה של כל אלמנט אינטראקטיבי בדף, וכל אלמנט נושא מזהה ref יציב. Claude קורא את ה-snapshot, בוחר אלמנט לפי ה-ref שלו, והשרת ממיר את ה-ref בחזרה ל-Playwright locator לפני ביצוע הפעולה. אין מודל ראייה, אין חישוב קואורדינטות שביר, ואין צילומי מסך בולעי-טוקנים בלולאת הפעולה - יתרון מכריע כשמודל מבצע עשרות פעולות ברצף וכל snapshot חוזר אליו כקלט.

הפאקג' הוא @playwright/mcp ב-npm. הגרסה העדכנית (נכון ליוני 2026) היא v0.0.76, ששוחררה ב-10 ביוני 2026; הריפו הוא microsoft/playwright-mcp (כ-34.1k כוכבים), הרישיון Apache-2.0. מספרי הגרסה עדיין מתחת ל-1.0, כך שה-API והדגלים זזים - אל תקבעו פרטים מדויקים מבלי לבדוק מול ה-README של הגרסה שאתם מריצים.

ארכיטקטורה / איך זה עובד

השרת מריץ Playwright בתהליך נפרד ומגשר בינו ל-MCP client דרך stdio (או HTTP, בהפעלה עם --port). שני צירי תצורה עיקריים מגדירים את ההתנהגות.

מצב הרצה - חלון נראה או לא:

• Headed (ברירת המחדל) - חלון דפדפן גלוי שאדם יכול לצפות בו ואף להשתלט עליו. נוח לדיבוג זרימת agent ולהתחברות ידנית פעם-ראשונה לאתר מאומת.
• Headless - מופעל בדגל --headless. אין חלון, מתאים לשרתים ו-CI. שימו לב: בניגוד לאינטואיציה, headless כאן הוא ה-opt-in, לא ברירת המחדל.

מצב תפיסה - איך המודל "רואה" את הדף:

• Snapshot mode (ברירת מחדל) - עץ accessibility טקסטואלי. כל אלמנט מקבל ref שהמודל מצביע עליו. זול בטוקנים, דטרמיניסטי, ועמיד בפני שינויי עיצוב. ניתן לכוונן עם --snapshot-mode (full או none).
• Vision mode - מופעל עם --caps=vision ופותח משפחת כלים מבוססת-קואורדינטות (browser_mouse_click_xy, browser_mouse_move_xy, browser_mouse_drag_xy, browser_mouse_wheel ועוד). הכרחי לאפליקציות canvas/WebGL/מפות שבהן עץ ה-a11y ריק ואין ref לתפוס.

היכולות מקובצות תחת capabilities שניתן להפעיל בדגל --caps: vision, pdf, devtools, config, network, storage, testing. ברירת המחדל היא משטח כלים מצומצם; הפעלת capability פותחת את הכלים הנוספים שלה. זה שומר על schema קטן שלא מבזבז context אלא אם באמת צריך.

נקודה ארכיטקטונית שכדאי להכיר: עבור coding agents צרי-טוקנים, Microsoft ממליצה דווקא על נתיב ה-Playwright CLI עם SKILLS, ומסבירה ב-README ש"CLI invocations are more token-efficient: they avoid loading large tool schemas and verbose accessibility trees into the model context." ה-MCP נשאר היתרון כש"persistent state, rich introspection, and iterative reasoning" חשובים יותר מעלות הטוקנים - כלומר ללולאות autonomous ממושכות עם state רציף, לא לקריאת-טסט חד-פעמית מתוך עורך.

התקנה

Node.js 18 ומעלה הוא הדרישה היחידה. אין שלב התקנה נפרד - npx מביא את הפאקג' בהרצה הראשונה.

Claude Code (פקודה אחת):

claude mcp add playwright npx @playwright/mcp@latest

VS Code (דרך ה-CLI):

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

הרצת npx ישירה (לבדיקה שהשרת עולה):

npx @playwright/mcp@latest

בהפעלה הראשונה Playwright יוריד את קבצי הבינארי של הדפדפן במידת הצורך. אפשר להקדים זאת ידנית:

npx playwright install chromium

הגדרות

בלוק ה-mcpServers הסטנדרטי עובד ב-Claude Desktop, Cursor, Windsurf ורוב הלקוחות האחרים. הכניסו אותו ל-claude_desktop_config.json:

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

התאמות נפוצות מועברות כערכי args נוספים. שימו לב ש---browser מקבל אחד מ-chrome, firefox, webkit, msedge (ולא "chromium"):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--browser=chrome",
        "--viewport-size=1440,900",
        "--user-data-dir=/tmp/pw-profile",
        "--caps=vision,network",
        "--isolated"
      ]
    }
  }
}

דגלים שכדאי להכיר: --headless (כבוי כברירת מחדל), --isolated (פרופיל בזיכרון בלבד, נמחק עם סגירת הדפדפן), --user-data-dir (פרופיל מתמיד בנתיב משלכם), --config (קובץ JSON הצהרתי), --port (מעבר ל-HTTP transport במקום stdio).

לסביבות נעולות, קובץ JSON של הגדרות בשילוב --config /path/to/playwright-mcp.json מאפשר לקבע user-agent, viewport, מצב storage, origins מורשים ונתיבי הקלטה בצורה הצהרתית במקום לפזר דגלים בשורת הפקודה.

דוגמאות שימוש

שלושה workflows נפוצים שמדגימים את הטווח. הראשון הוא smoke test של "האם הדף הזה באמת עובד" - מה שהיה פעם קובץ Cypress הוא עכשיו פרומפט בשפה חופשית.

1. Smoke-test לדף נחיתה. מנסחים ל-Claude: "פתח את הדף, מלא את טופס יצירת הקשר בנתוני sandbox, שלח, אשר שהודעת התודה מופיעה." קריאות הכלים ש-Claude אכן פולט:

browser_navigate { url: "https://example.com" }
browser_snapshot
browser_fill_form {
  fields: [
    { ref: "input-name",  value: "QA Bot" },
    { ref: "input-phone", value: "0500000000" },
    { ref: "input-msg",   value: "smoke test" }
  ]
}
browser_click { ref: "submit-button" }
browser_wait_for { text: "תודה" }
browser_take_screenshot { filename: "thankyou.png" }

2. Scrape של דף המרונדר ב-JS. fetch סטטי נכשל על אפליקציות React שעוברות hydration. Playwright MCP פשוט מריץ את הדף:

browser_navigate { url: "https://example-store.com/products" }
browser_wait_for  { text: "Add to cart" }
browser_evaluate  {
  expression: "Array.from(document.querySelectorAll('[data-product-card]'))
                .map(el => ({
                  title: el.querySelector('h3')?.innerText,
                  price: el.querySelector('.price')?.innerText
                }))"
}

תוצאת browser_evaluate מגיעה בחזרה כ-JSON מובנה שהמודל יכול לסכם. להרצות חוזרות, browser_network_requests + browser_network_request מאפשרים ל-Claude לבדוק את ה-XHR הבסיסי ולדלג על ה-DOM לחלוטין.

3. סשן מאומת שנשמר. מצביעים על --user-data-dir לתיקייה פעם אחת, מתחברים עם חשבון Google או GitHub אמיתי במצב headed, וכל סשן Claude הבא משתמש מחדש ב-cookies. כלי ה-cookie וה-storage-state (browser_cookie_get, browser_storage_state, browser_set_storage_state) מאפשרים ל-agent לבדוק או להעביר את הסשן מבלי להזליג אותו בחזרה לקונטקסט המודל.

משטח הכלים

בליבה (זמינה תמיד) יושבים כ-21 כלי אוטומציה; capabilities נוספים פותחים עוד עשרות. עיקרי הדברים:

• ניווט וטאבים: browser_navigate, browser_navigate_back, browser_tabs, browser_resize, browser_close.
• אינטראקציה: browser_click, browser_type, browser_fill_form, browser_select_option, browser_press_key, browser_hover, browser_drag, browser_drop, browser_file_upload, browser_handle_dialog.
• תפיסה: browser_snapshot (עץ a11y), browser_take_screenshot, browser_console_messages, browser_wait_for.
• קוד ורשת: browser_evaluate, browser_run_code_unsafe, browser_network_requests / browser_network_request, ובתוך --caps=network: browser_route / browser_route_list / browser_unroute ו-browser_network_state_set (throttle/offline).
• Storage (--caps=storage): משפחות clear/delete/get/list/set מלאות ל-browser_cookie_*, browser_localstorage_*, browser_sessionstorage_*, בנוסף ל-browser_storage_state ו-browser_set_storage_state.
• Testing (--caps=testing): browser_generate_locator, browser_verify_element_visible, browser_verify_list_visible, browser_verify_text_visible, browser_verify_value - assertions שהמודל יכול לתכנן נגדן ישירות.
• DevTools (--caps=devtools): browser_highlight / browser_hide_highlight, browser_annotate, browser_start_video / browser_stop_video / browser_video_chapter, browser_start_tracing / browser_stop_tracing, browser_resume.
• PDF (--caps=pdf): browser_pdf_save.
• Vision (--caps=vision): browser_mouse_click_xy, browser_mouse_move_xy, browser_mouse_drag_xy, browser_mouse_down, browser_mouse_up, browser_mouse_wheel - כולן מבוססות-קואורדינטות.

מה חדש / גרסה

הגרסה הנוכחית (נכון ליוני 2026) היא v0.0.76 (10 ביוני 2026). תוספות שכדאי להכיר: browser_fill_form לקלט קבוצת שדות בקריאה אחת במקום N זוגות click+type (חיסכון אמיתי בטוקנים ובלולאות), משפחת browser_verify_* שמכווצת "snapshot, parse, decide" ל-assertion יחידה, browser_generate_locator שמייצר locator יציב מתוך אלמנט שנבחר, ומודל ה-capabilities עצמו - חלוקת הכלים ל-vision/pdf/devtools/config/network/storage/testing מאפשרת להפעיל בדיוק את משטח הכלים שצריך מבלי לזהם context.

דבר נוסף לעקוב: Microsoft ממצבת את נתיב ה-Playwright CLI עם SKILLS כמומלץ ל-coding agents צרי-טוקנים, מהנימוק שקריאות CLI לא טוענות tool schemas גדולים ועצי a11y מילוליים לתוך הקונטקסט. Playwright MCP נשאר הבחירה הנכונה ללולאות agentic בעלות state רציף - רק כדאי לדעת שהפיצול קיים ולבחור לפי סוג העבודה.

למה זה חשוב בפועל

בשימוש יומיומי המנוף הגדול הוא שאפשר להפסיק לכתוב scrapers קטנים וטסטים חד-פעמיים. כל דבר שמערב דפדפן אמיתי - אימות שדיפלוי אכן רונדר, smoke-test על דף טרי, שליפת נתונים מובנים מ-SPA שנראה ל-curl כקליפה ריקה - הופך לפרומפט בשפה חופשית במקום לקוד שיש לתחזק.

לעבודת accessibility זה יתרון שקט: browser_snapshot כבר מדבר בשפת עץ ה-a11y, ולכן "האם הווידג'ט הזה נגיש לקורא מסך" הופך לשאלה שניתן לענות עליה בקריאת כלי אחת במקום לפתוח axe ולקרוא דוח. ברירת המחדל של snapshot-mode מחזיקה את לולאת הפעולה זולה מספיק כדי להשאיר את Claude מריץ זרימת E2E מבלי לצפות כל הזמן במד הטוקנים.

היתרון הנוסף הוא משפחת ה-browser_verify_* החדשה - browser_verify_element_visible, browser_verify_text_visible, browser_verify_value. אלה מכווצים את מה שהיה "snapshot, parse, decide" לטענת assertion יחידה שהמודל יכול לתכנן נגדה. בשילוב עם קלט השדות ב-batch של browser_fill_form, זרימת טופס בחמישה שלבים שהייתה עשר קריאות כלי היא עכשיו שתיים או שלוש.

מגבלה אמיתית שכדאי לסמן: הפרופיל המתמיד חי בנתיב עם hash של workspace (~/Library/Caches/ms-playwright/mcp-{channel}-{workspace-hash} ב-macOS), ומותרת רק מופע דפדפן אחד לפרופיל. אם רוצים ששני סשני Claude יגשו לאותו אתר במקביל, יש להריץ כל אחד עם --isolated או להפנות אותם לנתיבי --user-data-dir נפרדים. מניסיון, כדאי להחזיק פרופיל מתמיד יציב לסשנים שדורשים התחברות, ופרופיל --isolated חד-פעמי לבדיקות smoke זמניות - הפיצול הזה לבדו מסיר את רוב באגי "למה הדפדפן נלחם בעצמו".

מקור

ריפו: github.com/microsoft/playwright-mcp. פאקג': npmjs.com/package/@playwright/mcp. רישיון: Apache 2.0.