Playwright MCP Server הוא כאן: בואו לשלב את זה!

באפריל 2025, מיקרוסופט נסגרה בשקטPlaywright MCP, שרת חדש שמחבר את סוכן ה- AI שלך (באמצעות MCP) ישירות ל- Playwright Browser API.

מה זה אומר באנגלית פשוטה?Your AI agent can now interact with real web pages using nothing but simple text instructions(אבל זה בחינם!) »לחץ על זה» » »צילומי מסךכל זה מבלי לכתוב שורה אחת של קוד אוטומציה של הדפדפן.

כן, זה כל כך גדולPlaywright MCP has already become one of the most-starred MCP servers on GitHubוזה רק מתחיל. 🙂

במדריך צעד אחר צעד זה, תראה בדיוק מה שרת זה יכול לעשות, וכיצד לחבר אותו לתוך זרימת עבודה מבוססת AI מבוססת Python באמצעות OpenAI Agents SDK.

למה כולם מדברים על Playwright MCP Server

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

מאחורי הקלעים, במקום לסמוך על צילומי מסך או מודלים מותאמים חזון, זה מאפשר LLMs אינטראקציה עם דפי אינטרנט באמצעותstructured accessibility snapshotsמשמעות הדבר היא אינטראקציות מהירות יותר, נקיות יותר ויותר ידידותיות ל-LLM.

In the world of סוכני AI וסוכני RAG Workflowsאיפה שמישהו צריךקריאה,קליק, וניווטכמו אדם - זה משחק משנה מוחלט!

וקבלו את זה: למרות שמיקרוסופט לא פעלה את זה עם הרבה פאנפרה (לא שיחה מרשימה, לא פוסט בלוג blitz), ספריה low-key זה כבר יושב על12K+ ⭐ on GitHub... וגם לטפס.

כי זה פשוט עובד, והנה מה שהופך אותו מיוחד:

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

בנוסף, הוא מגיע עם CLI מוצק ודגלים מותאמים אישית שימושיים לשלוט בדפדפן מתואם.

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

כיצד להשתמש ב- Playwright MCP Server: שלב אחר שלב הדרכה

מוכנים להכניס את שרת ה-MCP של Playwright לפעולה? בצע את השלבים הבאים כדי לשלב אותו בסקריפט Python שלך באמצעות OpenAI Agents SDK!

התנאים

כדי לעקוב אחר הדרכה זו, ודא שיש לך את ההתקנה dev שלך מוכן לזרוק:

• Python 3.10+ מותקן באופן מקומי
• Node.js מותקן ועובד (הגרסה האחרונה של LTS היא החבר שלך) ️
• מפתח API מספק LLM נתמך (OpenAI Agents SDK צריך את זה, ואנו ממליצים על Gemini כי הוא חופשי לשימוש)

שלב #1: הגדרת פרויקטים ועיצוב

אינטגרציה זו של Playwright + MCP מבוססת על מה שאנו מכסיםMCP + OpenAI Agents SDK: How to Build a Powerful AI Agent.אז אם עוד לא בדקתם את זה, תסתכלו על זה מהר מאוד.

אבל אם אתה ממהר (אנחנו מקבלים את זה),here’s the TL;DR version to get you rolling:

1. יצירת תיק פרוייקט.
2. בתוך זה, להוסיף קובץ בשם agent.py ולהגדיר סביבה וירטואלית Python.
3. התקן את הספריות הנדרשות עם pip install openai-agents python-dotenv.
4. הוסף קובץ .env לתיקיית הפרויקט שלך, ובפנים, להוריד את מפתח API Gemini שלך ככה:

GEMINI_API_KEY=<your-gemini-api-key>

אתה עכשיו נעול, מטען, מוכן להתחיל לבנות! 💥

שלב #2: Playwright MCP Server Integration

קבל את שרת MCP של Playwright ולהפעיל בתוך OpenAI Agents SDK עם הקוד הבא:

async with MCPServerStdio(
    name="Playwright MCP server",
    params={
        "command": "npx",
        "args": ["-y", "@playwright/mcp@latest", "--output-dir", "./"],
    },
) as server:
    # Create and initialize the AI agent with the running MCP server
    agent = await create_mcp_ai_agent(server)

    # Agent request-response cycle...
```python
This chunk of code basically runs the following shell command under the hood:
```bash
npx -y @playwright/mcp@latest --output-dir "./"

באנגלית פשוטה? זה מסתובב לשרת Playwright MCP באמצעות Node.js.--output-dir "./"bit אומר לו היכן להשליך קבצים כמו צילומי מסך ו- PDFs.

יומייםNoteאם הסוכן שלך לא צריך לייצא קבצים כלשהם, באפשרותך לפספס את--output-dirדגל – זה אפקטיבי!

שלב #3: הקוד המלא

הנה מה שאתהagent.pyקובץ זה צריך להיראות כאילו הכל מחובר ונופף.זהו סוכן AI מלא של סוכני AI פתוחים המונח על ידי Gemini-powered, Playwright-integrated מוכן לפעול באמצעות MCP:

import asyncio
from dotenv import load_dotenv
import os
from agents import (
    Runner,
    Agent,
    OpenAIChatCompletionsModel,
    set_default_openai_client,
    set_tracing_disabled
)
from openai import AsyncOpenAI
from agents.mcp import MCPServerStdio

# Load environment variables from the .env file
load_dotenv()

# Read the required secrets envs from environment variables
GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")

async def create_mcp_ai_agent(mcp_server):
    # Initialize Gemini client using its OpenAI-compatible interface
    gemini_client = AsyncOpenAI(
        api_key=GEMINI_API_KEY,
        base_url="https://generativelanguage.googleapis.com/v1beta/openai/"
    )

    # Set the default OpenAI client to Gemini
    set_default_openai_client(gemini_client)
    # Disable tracing to avoid tracing errors being logged in the terminal
    set_tracing_disabled(True)

    # Create an agent configured to use the MCP server and Gemini model
    agent = Agent(
        name="Assistant",
        instructions="You are a helpful assistant",
        model=OpenAIChatCompletionsModel(
            model="gemini-2.0-flash",
            openai_client=gemini_client,
        ),
        mcp_servers=[mcp_server]
    )

    return agent

async def run():
    # Start the Playwright MCP server via npx
    async with MCPServerStdio(
        name="Playwright MCP server",
        params={
            "command": "npx",
            "args": ["-y", "@playwright/mcp@latest", "--output-dir", "./"],
        },
    ) as server:
        # Create and initialize the AI agent with the running MCP server
        agent = await create_mcp_ai_agent(server)

        # Main REPL loop to process user requests
        while True:
            # Read the user's request
            request = input("Your request -> ")

            # Exit condition
            if request.lower() == "exit":
                print("Exiting the agent...")
                break

            # Run the request through the agent
            output = await Runner.run(agent, input=request)

            # Print the result to the user
            print(f"Output -> \n{output.final_output}\n\n")

if __name__ == "__main__":
    asyncio.run(run())

בדיוק כמו זה, אתה בנה סוכן AI פונקציונלי לחלוטין ב ~75 שורות של Python.think through Gemini and act through Playwright️️

שלב #4: בדוק את סוכן ה- AI שלך עם Playwright-Powered

זה הזמן לבדוק את הסוכן שלך על ידי ריצה:

python agent.py

זה מה שתראו בסטארטאפ:

עכשיו תפסו אותו עם דחיפה כזאת:

Visit hackernoon.com, click on "Trending Stories", wait for the page to fully load, and then export it as a PDF file named "hackernoon-trending-stories.pdf"

את התוצאה הזו?

יופ ,it nailed it!

But that was fast, so let’s break down what happened:

1. הסוכן מפעיל דוגמה של Chrome עם Playwright.
2. זה מבקר hackernoon.com.
3. הקליקו על הקישור "הסיפורים המרגשים" ️
4. מחכה שהדף יטען לחלוטין.
5. ייצוא הדף לקובץ PDF בשם hackernoon-trending-stories.pdf, שהופיע בתיקיה של הפרויקט.

שימו לב שהדפדפןהישאר פתוחזה מושלם אם ברצונך לשלוח הודעה נוספת ולשמור על הפגישה הנוכחית בחיים!

לא אוהבים את זה ורוצים לסיים את הפגישה ולסגור את הדפדפן?

Now, close the browser.

הסוכן ייסגר את הדפדפן בשבילך.

עכשיו, ללכת לבדוק את הקובץ PDF שנוצרhackernoon-trending-stories.pdfלחצו כאן כדי לעקוב אחריו, ותראו:

מדהים ! אclean, full-page export of Hackernoon’s trending page, קישורים וכולם, בפורמט PDF חריף.זה אוטומציה דפדפן אמיתית, המופעלת על ידי סוכן AI משלך.

וזה, חברים, זהhow you build an AI agent with Playwright + MCP"הדבר הזה חזק מאוד, תן לו לבשל.

המגבלות הנסתרות של MCP של כותב משחק (והכיצד להתגבר עליהם)

מדהים, אולי אתה חושב:

"בסדר, יש לי את הכלים... LLM שיכול לחשוב, שרת MCP שיכול לגרד, ו-Playwright לשלוט בדפדפן.

"בסדר, יש לי את הכלים... LLM שיכול לחשוב, שרת MCP שיכול לגרד, ו-Playwright לשלוט בדפדפן.

לא כל כך מהר 🙂

כמובן, יש רקtwo core things AI agents need to thrive:

1. Access to real-time web data (✅ handled by scraping-capable MCP integrations)
2. היכולת אינטראקציה עם דפדפן (✅ הכנס Playwright MCP)

אבל הנה המקום שבו הדברים מתחילים להיות מעניינים...

נסו לשאול את סוכן ה- AI המנוהל על ידי Playwright משהו כמו:

Visit g2.com, wait for the page to load, and take a screenshot

אז מה קורה? ↓↓↓

זה ניווט ל G2. ✅ ממתין. ✅ לוקח צילומי מסך. ✅ אבל יש תופעה:the page is blocked behind a verification wall.

ואפילו הסוכן מספיק אדיב כדי לומר לכם:

Your request -> Visit g2.com, wait for the page to load, and take a screenshot
Output -> 
Okay, I navigated to g2.com, waited for 5 seconds, took a snapshot of the page, and then took a screenshot. However, the page is showing a verification requirement. I am unable to complete the request.

לא, זה לא "משחק נגמר" עבורנו כבני אדם, אבל אולי ... זהמשחק Overעבור Thedefault Playwright browser setup

אז מה לא בסדר?אז הנה הנושא:Vanilla Chrome!♂️

הדפדפן Playwright שולט מחוץ לקופסה לא נועד למנוע בלוקים.הוא דלף אותות בכל מקום, כגון דגלים אוטומציה, תצורות מוזרות, וכן הלאה.To the point that most websites—jsut like G2 —instantly know it’s a bot

אז מהי הפתרון? 👉 APlaywright-compatible infrastructureהוקם כדי לתמוך בזרימת העבודה של סוכניםremote browsers that don’t get blockedאנחנו מדברים על:

• אינסופית ️
• עובדים ללא ראש או ראש 👁️ עוד >>
• מנוהל על ידי רשת פרוקסי עם 100M+ IPs מגורים
• מתוכנן להתערב כמו משתמש אמיתי ️ ♂️

שואלים את עצמכם מהו כלי הקסם הזה?Bright Data’s Agent Browserהגדרת הדפדפן המסתורית שלך, מתוחכמת, ידידותית לאיי-איי:

אם אתה תוהה איך לחבר אותו להתקנה MCP של Playwright שלך, זה פשוט כמו להעביר נקודת קצה CDP:

async with MCPServerStdio(
    name="Playwright MCP server",
    params={
        "command": "npx",
        "args": [
            "-y", "@playwright/mcp@latest",
            # other arguments...
            "--cdp-endpoint", "<YOUR_BRIGHT_DATA_AGENT_BROWSER_CDP_URL>"
        ],
    },
) as server:
    # Your agent logic here...

And just like that,אין יותר קירות בוטים, אין יותר ממים עצובים של גרו.

מוכן ליצור תנועות עבודה אגנטיות אשרלמעשהלעבוד באינטרנט חי?Bright Data’s Agent Browser has your back!

ראו את זה בפעולה בשילוב אחר כאן:

מחשבות סופיות

עכשיו אתה יודע איך להפעיל כל סוכן AI שנבנה עם OpenAI Agents SDK - בין אם הוא פועל על GPT, Gemini, או כל דבר הבא - על ידי חיבור אותו לשרת MCP של Playwright עבור שליטה אמיתית בדפדפן.

הראינו גם כיצד להעלות את הרמה עוד יותר על ידי להתגבר על בלוקי דפדפן באמצעות Bright Data.Agent Browser, רק חלק מהתשתית החזקה של AIאנחנו נבנו כדי לתמוך בזרימות עבודה בעולם האמיתי של AI בקנה מידה גדול.

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