באפריל 2025, מיקרוסופט נסגרה בשקט , שרת חדש שמחבר את סוכן ה- AI שלך (באמצעות MCP) ישירות ל- Playwright Browser API. Playwright MCP מה זה אומר באנגלית פשוטה? (אבל זה בחינם!) » » » » כל זה מבלי לכתוב שורה אחת של קוד אוטומציה של הדפדפן. 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 (Model Context Protocol) המספק לסוכני ה-AI שלך כוחות גדולים של אוטומציה דפדפן באמצעות API של Playwright. שחקן MCP שחקן MCP מאחורי הקלעים, במקום לסמוך על צילומי מסך או מודלים מותאמים חזון, זה מאפשר LLMs אינטראקציה עם דפי אינטרנט באמצעות משמעות הדבר היא אינטראקציות מהירות יותר, נקיות יותר ויותר ידידותיות ל-LLM. structured accessibility snapshots 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 MCP + OpenAI סוכנים SDK: איך לבנות סוכן AI חזק MCP + OpenAI סוכנים SDK: איך לבנות סוכן AI חזק אבל אם אתה ממהר (אנחנו מקבלים את זה), : here’s the TL;DR version to get you rolling 
 
 
 
 
 יצירת תיק פרוייקט. בתוך זה, להוסיף קובץ בשם agent.py ולהגדיר סביבה וירטואלית Python. התקן את הספריות הנדרשות עם pip install openai-agents python-dotenv. הוסף קובץ .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. bit אומר לו היכן להשליך קבצים כמו צילומי מסך ו- PDFs. --output-dir "./" יומיים אם הסוכן שלך לא צריך לייצא קבצים כלשהם, באפשרותך לפספס את דגל – זה אפקטיבי! Note --output-dir שלב #3: הקוד המלא הנה מה שאתה קובץ זה צריך להיראות כאילו הכל מחובר ונופף.זהו סוכן AI מלא של סוכני AI פתוחים המונח על ידי Gemini-powered, Playwright-integrated מוכן לפעול באמצעות MCP: agent.py 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: 
 
 
 
 
 
 הסוכן מפעיל דוגמה של Chrome עם Playwright. זה מבקר hackernoon.com. הקליקו על הקישור "הסיפורים המרגשים" ️ מחכה שהדף יטען לחלוטין. ייצוא הדף לקובץ PDF בשם hackernoon-trending-stories.pdf, שהופיע בתיקיה של הפרויקט. שימו לב שהדפדפן זה מושלם אם ברצונך לשלוח הודעה נוספת ולשמור על הפגישה הנוכחית בחיים! הישאר פתוח לא אוהבים את זה ורוצים לסיים את הפגישה ולסגור את הדפדפן? Now, close the browser.
 הסוכן ייסגר את הדפדפן בשבילך. עכשיו, ללכת לבדוק את הקובץ PDF שנוצר לחצו כאן כדי לעקוב אחריו, ותראו: hackernoon-trending-stories.pdf מדהים ! א , קישורים וכולם, בפורמט PDF חריף.זה אוטומציה דפדפן אמיתית, המופעלת על ידי סוכן AI משלך. clean, full-page export of Hackernoon’s trending page וזה, חברים, זה "הדבר הזה חזק מאוד, תן לו לבשל. how you build an AI agent with Playwright + MCP המגבלות הנסתרות של MCP של כותב משחק (והכיצד להתגבר עליהם) מדהים, אולי אתה חושב: 
 
 "בסדר, יש לי את הכלים... LLM שיכול לחשוב, שרת MCP שיכול לגרד, ו-Playwright לשלוט בדפדפן. "בסדר, יש לי את הכלים... LLM שיכול לחשוב, שרת MCP שיכול לגרד, ו-Playwright לשלוט בדפדפן. לא כל כך מהר 🙂 כמובן, יש רק : two core things AI agents need to thrive 
 
 
 Access to real-time web data (✅ handled by  ) scraping-capable MCP integrations היכולת אינטראקציה עם דפדפן (✅ הכנס 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.
 לא, זה לא "משחק נגמר" עבורנו כבני אדם, אבל אולי ... זה עבור The משחק Over default Playwright browser setup אז הנה הנושא: ♂️ אז מה לא בסדר? Vanilla Chrome! הדפדפן Playwright שולט מחוץ לקופסה לא נועד למנוע בלוקים.הוא דלף אותות בכל מקום, כגון דגלים אוטומציה, תצורות מוזרות, וכן הלאה. To the point that most websites—jsut like G2 —instantly know it’s a bot אז מהי הפתרון? 👉 A הוקם כדי לתמוך בזרימת העבודה של סוכנים אנחנו מדברים על: Playwright-compatible infrastructure remote browsers that   get blocked don’t לא 
 
 
 
 
 אינסופית ️ עובדים ללא ראש או ראש 👁️ עוד >> מנוהל על ידי רשת פרוקסי עם 100M+ IPs מגורים מתוכנן להתערב כמו משתמש אמיתי ️ ♂️ שואלים את עצמכם מהו כלי הקסם הזה? הגדרת הדפדפן המסתורית שלך, מתוחכמת, ידידותית לאיי-איי: Bright Data’s Agent Browser דפדפן Agent Browser Bright Data https://www.youtube.com/watch?v=T59GCkpk5zY&embedable=true אם אתה תוהה איך לחבר אותו להתקנה 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! ראו את זה בפעולה בשילוב אחר כאן: https://www.youtube.com/watch?v=JG_INdktGsk&embedable=true מחשבות סופיות עכשיו אתה יודע איך להפעיל כל סוכן AI שנבנה עם OpenAI Agents SDK - בין אם הוא פועל על GPT, Gemini, או כל דבר הבא - על ידי חיבור אותו לשרת MCP של Playwright עבור שליטה אמיתית בדפדפן. הראינו גם כיצד להעלות את הרמה עוד יותר על ידי להתגבר על בלוקי דפדפן באמצעות Bright Data. , רק חלק מהתשתית החזקה של AI . Agent Browser אנחנו נבנו כדי לתמוך בזרימות עבודה בעולם האמיתי של AI בקנה מידה גדול ב-Bright Data, המשימה שלנו היא פשוטה: להפוך את ה-AI לנגיש לכולם, בכל מקום, אז עד הפעם הבאה – להישאר סקרנים, להישאר אמיצים ולהמשיך לבנות את העתיד של ה-AI.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

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

About Author

הערות

תלו תגים

מאמר זה הוצג ב

Related Stories

The TechBeat: 5 Low-Cost Cybersecurity Measures SMBs Can’t Afford to Not Implement (3/4/2024)

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

Synthetic Audio is Now Available for 70,000+ HackerNoon Stories

The TechBeat: Investigating Internet Freedom: Unseen Aspects of Our Online Existence (1/22/2024)

The TechBeat: 5 Low-Cost Cybersecurity Measures SMBs Can’t Afford to Not Implement (3/4/2024)

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

Synthetic Audio is Now Available for 70,000+ HackerNoon Stories

The TechBeat: Investigating Internet Freedom: Unseen Aspects of Our Online Existence (1/22/2024)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps