1,639 lượt đọc
1,639 lượt đọc

Playwright MCP Server là ở đây: Hãy tích hợp nó!

từ tác giả Bright Data10m2025/06/24
Read on Terminal Reader

dài quá đọc không nổi

Microsoft vừa phát hành Playwright MCP, cho phép các đại lý AI điều khiển trình duyệt web thông qua lệnh văn bản miễn phí. hướng dẫn này cho thấy tích hợp với Python và OpenAI Agents SDK, đồng thời cũng giải quyết các vấn đề chặn trình duyệt.
featured image - Playwright MCP Server là ở đây: Hãy tích hợp nó!
Bright Data HackerNoon profile picture
0-item
1-item

Tháng 4 năm 2025, Microsoft lặng lẽ ngừng hoạt độngPlaywright MCP, một máy chủ mới kết nối đại lý AI của bạn (thông qua MCP) trực tiếp với API trình duyệt Playwright.

Điều đó có nghĩa là gì trong tiếng Anh đơn giản?Your AI agent can now interact with real web pages using nothing but simple text instructions(và miễn phí!) »Click vào đây," "Lấy một screenshot“— Tất cả mà không viết một dòng mã tự động hóa trình duyệt duy nhất.

Vâng, đó là rất lớn màPlaywright MCP has already become one of the most-starred MCP servers on GitHubVà nó chỉ mới bắt đầu. 🔥

Trong hướng dẫn từng bước này, bạn sẽ thấy chính xác những gì máy chủ này có thể làm và làm thế nào để kết nối nó vào một dòng công việc AI dựa trên Python bằng cách sử dụng OpenAI Agents SDK.

Tại sao mọi người đều nói về máy chủ MCP của Playwright

Tác giả MCPlà một máy chủ MCP (Model Context Protocol) cung cấp cho các đại lý AI của bạn siêu quyền lực nghiêm trọng về tự động hóa trình duyệt thông qua API Playwright.

Tác giả MCP

Đằng sau hậu trường, thay vì dựa vào ảnh chụp màn hình hoặc các mô hình phù hợp với tầm nhìn, nó cho phép LLM tương tác với các trang web bằng cách sử dụngstructured accessibility snapshotsĐiều đó có nghĩa là tương tác nhanh hơn, sạch hơn và thân thiện với LLM nhiều hơn.

Trong thế giới củaagentic AI and agentic RAG workflows- Nơi ai cầnĐọc,click vàoNavigatorNhư một con người - đây là một trò chơi thay đổi hoàn toàn!

Và nhận được điều này: mặc dù Microsoft đã không tung ra nó với rất nhiều fanfare (không có keynote nhấp nháy, không có blog post blitz), thư viện khóa thấp này đã ngồi trên12K+ ⭐ on GitHub...và leo lên


The impressive GitHub star growth of the Playwright MCP server repository


Vì nó chỉ làm việc, và dưới đây là những gì làm cho nó đặc biệt:

  • Blazing nhanh và nhẹ: Sử dụng cây truy cập của trình duyệt, không phải là đầu vào dựa trên pixel chậm.
  • Thiết kế LLM đầu tiên: Không cần mô hình tầm nhìn. Nó được xây dựng cho giao diện văn bản có cấu trúc.
  • ️ Sử dụng công cụ xác định: Không đoán, không mơ hồ - chỉ cần hành động rõ ràng, đáng tin cậy thông qua một số công cụ.

Thêm vào đó, nó đi kèm với một CLI vững chắc và cờ tùy chỉnh hữu ích để điều khiển trình duyệt được điều chỉnh tốt.

Công nghệ này cho phép bạn xây dựng các tác nhân nghiêm túc không chỉ ảo giác, mà thực sựLàm đồ vậtWEB

Làm thế nào để sử dụng Playwright MCP Server: Bước-by-Bước hướng dẫn

Bạn đã sẵn sàng để đưa máy chủ MCP của Playwright vào hoạt động chưa? Hãy làm theo các bước dưới đây để kết nối nó với kịch bản Python của bạn bằng cách sử dụng OpenAI Agents SDK!

Điều kiện

Để làm theo cùng với hướng dẫn này, hãy chắc chắn rằng bạn có thiết lập dev của bạn sẵn sàng để cuộn:

  • Python 3.10+ được cài đặt cục bộ
  • Node.js cài đặt và làm việc (phiên bản LTS mới nhất là bạn của bạn) ️
  • Một khóa API từ một nhà cung cấp LLM được hỗ trợ (OpenAI Agents SDK cần nó, và chúng tôi khuyên bạn nên Gemini vì nó miễn phí để sử dụng)

Bước #1: Thiết lập và cấu hình dự án

Sự tích hợp Playwright + MCP này xây dựng trên những gì chúng tôi đã bao gồm trongMCP + OpenAI Agent SDK: Làm thế nào để xây dựng một đại lý AI mạnh mẽ.Vì vậy, nếu bạn chưa kiểm tra nó ra, đi trượt nó thực sự nhanh chóng.

MCP + OpenAI Agent SDK: Làm thế nào để xây dựng một đại lý AI mạnh mẽMCP + OpenAI Agent SDK: Làm thế nào để xây dựng một đại lý AI mạnh mẽ


Waiting for you to read the other tutorial…


Nhưng nếu bạn đang trong một vội vàng (chúng tôi nhận được nó),here’s the TL;DR version to get you rolling:

  1. Tạo một project folder.
  2. Bên trong nó, thêm một tệp tên là agent.py và thiết lập một môi trường ảo Python.
  3. Cài đặt các thư viện cần thiết với pip install openai-agents python-dotenv.
  4. Add a .env file to your project folder and, inside it, drop your Gemini API key like this:
GEMINI_API_KEY=<your-gemini-api-key>


Bây giờ bạn đã bị khóa, tải và sẵn sàng để bắt đầu xây dựng! 💥

Bước #2: Playwright MCP Server tích hợp

Lấy máy chủ Playwright MCP lên và chạy bên trong OpenAI Agents SDK với mã sau:


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 "./"


Nó quay lên máy chủ Playwright MCP bằng cách sử dụng Node.js.--output-dir "./"bit cho biết nơi để thả các tập tin xuất khẩu như ảnh chụp màn hình và PDF.

Note: Nếu đại lý của bạn không cần phải xuất bất kỳ tệp nào, bạn có thể bỏ qua--output-dirCụ thể là lá cờ, đó là tùy chọn!

Bước #3: Điền mã đầy đủ

Đây là những gì của bạnagent.pytập tin nên trông giống như một khi mọi thứ đã được kết nối và sập.Đây là đại lý AI toàn diện của bạn được xây dựng bởi Open AI Agents SDK, được cung cấp bởi Gemini, tích hợp với Playwright, sẵn sàng hành động thông qua 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())


Tương tự như vậy, bạn đã xây dựng một đại lý AI đầy đủ chức năng trong ~75 dòng Python.think through Gemini and act through Playwright️️

Bước #4: Kiểm tra Playwright-Powered AI Agent của bạn

Đã đến lúc kiểm tra đại lý của bạn bằng cách chạy:


python agent.py


Đây là những gì bạn sẽ thấy trên Startup:


The Playwright AI agent asking for a request


Bây giờ đánh nó với một nhanh như thế này:


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"


Kết quả này?


The actions performed by the AI agents


Yup ơiit nailed it!

Nhưng đó là nhanh, vì vậy hãy chia sẻ những gì đã xảy ra:

  1. Agent khởi động một phiên bản Chrome Playwright-powered.
  2. Ghé thăm hackernoon.com
  3. Click vào link “Trending Stories”. ️
  4. Chờ cho trang tải đầy đủ.
  5. Xuất trang sang tệp PDF có tên hackernoon-trending-stories.pdf, xuất hiện trong thư mục dự án.

Lưu ý rằng trình duyệtVẫn mởĐó là hoàn hảo nếu bạn muốn gửi một lời nhắc khác và giữ cho phiên hiện tại còn sống!


The Playwright-controlled browser after executing the required tasks


Bạn không thích điều đó và muốn kết thúc phiên và đóng trình duyệt? chỉ cần nhập một cái gì đó như:


Now, close the browser.


Đại lý sẽ tắt trình duyệt cho bạn. ✅

Bây giờ, đi kiểm tra các tập tin PDF được tạo rahackernoon-trending-stories.pdftrong thư mục dự án của bạn. cuộn qua nó, và bạn sẽ thấy:


The resulting hackernoon-trending-stories.pdf file


Tuyệt vời! aclean, full-page export of Hackernoon’s trending page, liên kết và tất cả, ở định dạng PDF sắc nét. đó là tự động hóa trình duyệt thực sự, được cung cấp bởi đại lý AI của riêng bạn.

Và điều đó, thưa quý vị, làhow you build an AI agent with Playwright + MCPCái này có sức mạnh nghiêm túc. - Hãy để nó nấu ăn.

Các hạn chế ẩn của Playwright MCP (Và làm thế nào để vượt qua chúng)

Bạn có thể đang suy nghĩ:


“Được rồi, tôi có các công cụ... một LLM có thể suy nghĩ, một máy chủ MCP có thể cạo, và Playwright để điều khiển trình duyệt.

“Được rồi, tôi có các công cụ... một LLM có thể suy nghĩ, một máy chủ MCP có thể cạo, và Playwright để điều khiển trình duyệt.


Không quá nhanh 😍😍😍

Chắc chắn, chỉ cótwo core things AI agents need to thrive:

  1. Truy cập dữ liệu web thời gian thực (✅ được xử lý bởi tích hợp MCP có khả năng cạo)
  2. Khả năng tương tác với một trình duyệt (✅ nhập Playwright MCP)

Nhưng đây là nơi mọi thứ trở nên thú vị...


Tell me more!


Hãy thử hỏi đại lý AI Playwright của bạn một cái gì đó như:

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

Chuyện gì sẽ xảy ra? - Điều này!


Note the G2 verification page


Nó điều hướng đến G2. ✅ Waits. ✅ Take a screenshot. ✅ Nhưng có một bắt:the page is blocked behind a verification wall.


Don’t get disappointed like Gru…


Và đại lý thậm chí còn đủ lịch sự để nói với bạn:


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.


Nope, it’s not “game over” for us as human beings. But maybe... it's Game OverĐối với thedefault Playwright browser setup

Vậy điều gì đã sai?Đây là vấn đề:Vanilla Chrome!♂️

Trình duyệt Playwright điều khiển ra khỏi hộp không được thiết kế để tránh các khối. Nó rò rỉ tín hiệu khắp nơi, chẳng hạn như cờ tự động, cấu hình kỳ lạ, và như vậy....To the point that most websites—jsut like G2 —instantly know it’s a bot. 🤖 🚫

Vậy giải pháp là gì? a.Playwright-compatible infrastructureĐược xây dựng để hỗ trợ các dòng công việc đại lý trênremote browsers that Đừng get blockedChúng ta đang nói chuyện:

Đừng
  • Infinitely Scalable ️
  • Làm việc không có đầu hoặc đầu 👁️ thêm nữa ››
  • Được cung cấp bởi một mạng proxy với 100M+ địa chỉ IP dân cư
  • Được thiết kế để pha trộn như một người dùng thực sự ️ ♂️

Bạn đang băn khoăn về công cụ kỳ diệu này là gì? chào hỏiTrình duyệt Bright Data’s Agent– stealthy, scalable, AI-friendly trình duyệt stack của bạn:

Trình duyệt Bright Data’s Agent


Nếu bạn đang tự hỏi làm thế nào để cắm nó vào thiết lập Playwright MCP của bạn, nó đơn giản như thông qua một điểm cuối 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...


just like that, no more blocks! No more bot walls. No more sad Gru memes.

Sẵn sàng để xây dựng các dòng công việc đại lý màThực tếLàm việc trên web trực tiếp?Bright Data’s Agent Browser has your back!

Xem nó trong hành động trong một hội nhập khác ở đây:


Suy nghĩ cuối cùng

Bây giờ bạn biết làm thế nào để quá tải bất kỳ đại lý AI được xây dựng với OpenAI Agents SDK - cho dù nó đang chạy trên GPT, Gemini, hoặc bất cứ điều gì sắp tới - bằng cách kết nối nó vào máy chủ Playwright MCP để kiểm soát trình duyệt thực sự.

Chúng tôi cũng chỉ ra cách nâng cấp thêm bằng cách vượt qua các khối trình duyệt bằng cách sử dụng Bright Data.Agent Browser, chỉ là một phần của cơ sở hạ tầng AI mạnh mẽchúng tôi đã được xây dựng để hỗ trợ các dòng công việc AI thực tế trên quy mô lớn.

Tại Bright Data, sứ mệnh của chúng tôi rất đơn giản: làm cho AI có thể tiếp cận được với mọi người, ở khắp mọi nơi.Vì vậy, cho đến lần sau – hãy tò mò, can đảm và tiếp tục xây dựng tương lai của AI.

Trending Topics

blockchaincryptocurrencyhackernoon-top-storyprogrammingsoftware-developmenttechnologystartuphackernoon-booksBitcoinbooks