Playwright MCP Server jest tutaj: Zintegrujmy go!

W kwietniu 2025 roku Microsoft spokojnie ustąpił.Playwright MCP, nowy serwer, który łączy agenta AI (za pośrednictwem MCP) bezpośrednio z API przeglądarki Playwright.

Co to oznacza w prostym języku angielskim?Your AI agent can now interact with real web pages using nothing but simple text instructions(I to za darmo!) »Kliknij to," "Zrób zrzut ekranuWszystko bez pisania pojedynczego wiersza kodu automatyzacji przeglądarki.

Tak, to jest tak wielkie, żePlaywright MCP has already become one of the most-starred MCP servers on GitHubI to dopiero się zaczyna. 🔥

W tym przewodniku krok po kroku zobaczysz, co dokładnie ten serwer może zrobić i jak podłączyć go do przepływu pracy AI opartego na Pythonie za pomocą OpenAI Agents SDK.

Dlaczego wszyscy mówią o Playwright MCP Server

Piosenkarz MCPjest serwerem MCP (Model Context Protocol), który daje agentom AI poważne supermocarstwa w zakresie automatyzacji przeglądarki za pośrednictwem API Playwright.

Za kulisami, zamiast polegać na zrzutach ekranu lub modelach dostosowanych do wizji, pozwala LLM na interakcję ze stronami internetowymi za pomocąstructured accessibility snapshotsOznacza to szybsze, czystsze i znacznie bardziej przyjazne dla LLM interakcje.

W świecie oPrzepływ pracy agenta AI i agenta RAGTam, gdzie trzebaczytaj,kliknij, oraznawigacjaJak człowiek – to całkowita zmiana gry!

I zdobądź to: chociaż Microsoft nie uruchomił go z dużym fanfare (brak błyszczącego słowa kluczowego, brak blitzów na blogu), ta biblioteka o niskim kluczu już siedzi na12K+ ⭐ on GitHub... i wspinaczki.

Ponieważ po prostu działa, a poniżej jest to, co czyni go wyjątkowym:

• Szybki i lekki: Używa drzewa dostępności przeglądarki, a nie powolnego wkładu na bazie pikseli.
• Projekt LLM-first: Nie ma potrzeby modelu wizji. Jest on zbudowany dla strukturalnych interfejsów tekstowych.
• Deterministyczne użycie narzędzi: brak zgadywania, brak niejednoznaczności – wystarczy jasne, niezawodne działania za pośrednictwem kilku narzędzi.

Dodatkowo ma solidny CLI i przydatne flagi dostosowania do precyzyjnego sterowania przeglądarką.

Ta technologia pozwala na budowanie poważnych agentów, które nie tylko halucynują, ale w rzeczywistoścido stuffNa stronie WEB

Jak korzystać z Playwright MCP Server: instrukcja krok po kroku

Gotowy do wprowadzenia do działania serwera Playwright MCP? Postępuj zgodnie z poniższymi krokami, aby włączyć go do skryptów Python przy użyciu OpenAI Agents SDK!

Wymagania

Aby postępować razem z tym samouczkiem, upewnij się, że masz swoją instalację deweloperską gotową do uruchomienia:

• Python 3.10+ zainstalowany lokalnie
• Node.js zainstalowany i działa (najnowsza wersja LTS jest twoim przyjacielem) ️
• Klucz API od obsługiwanego dostawcy LLM (OpenAI Agents SDK potrzebuje go i zalecamy Gemini, ponieważ jest wolny w użyciu)

Krok #1: Projektowanie i konfiguracja

Ta integracja Playwright + MCP opiera się na tym, co omówiliśmyMCP + OpenAI Agents SDK: Jak zbudować potężnego agenta AI.Więc jeśli jeszcze tego nie sprawdziłeś, idź skim to naprawdę szybko.

Ale jeśli jesteś w pośpiechu (dostaniemy to),here’s the TL;DR version to get you rolling:

1. Create a project folder.
2. W środku dodaj plik o nazwie agent.py i skonfiguruj środowisko wirtualne Python.
3. Zainstaluj wymagane biblioteki za pomocą programu openai-agents python-dotenv.
4. Dodaj plik .env do folderu projektu i w jego wnętrzu opuść klucz API Gemini w ten sposób:

GEMINI_API_KEY=<your-gemini-api-key>

Jesteś teraz zamknięty, załadowany i gotowy do rozpoczęcia budowy! 💥

Krok #2: Integracja z Playwright MCP Server

Pobierz serwer MCP Playwright i uruchom go w OpenAI Agents SDK za pomocą następującego kodu:

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

W prostym języku angielskim? toczy się na serwerze Playwright MCP przy użyciu Node.js.--output-dir "./"bit mówi, gdzie odrzucić pliki eksportowe, takie jak zrzuty ekranu i pliki PDF.

i️NoteJeśli agent nie musi eksportować żadnych plików, możesz pominąć--output-dirFlag w całości.To jest opcjonalne!

Krok #3: Pełny kod

Oto co Twójagent.pyPlik powinien wyglądać tak, jak gdyby wszystko było połączone.Tutaj jest pełny agent AI wbudowany w Open AI Agents SDK, zasilany przez Gemini, zintegrowany z Playwright, gotowy do podjęcia działań za pośrednictwem 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())

Podobnie, zbudowałeś w pełni funkcjonalnego agenta AI w ~75 wierszach Pythona.think through Gemini and act through Playwright️️

Krok #4: Sprawdź swojego agenta AI napędzanego pisarzem

Nadszedł czas, aby przetestować swojego agenta, wykonując:

python agent.py

Oto, co zobaczycie na starcie:

Zacznijcie od tego, że przyśpieszycie takimi słowami:

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"

I ten wynik?

Jurek ,it nailed it!

Ale to było szybkie, więc podzielmy to, co się stało:

1. Agent uruchamia instancję Chrome obsługiwaną przez Playwright.
2. Odwiedza hackernoon.com
3. Kliknij na link „Trends Stories”. ️
4. Poczekaj aż strona zostanie w pełni załadowana.
5. Eksportuje stronę do pliku PDF o nazwie hackernoon-trending-stories.pdf, który pojawił się w folderze projektu.

Należy zauważyć, że przeglądarkaPozostań otwartyJest to idealne rozwiązanie, jeśli chcesz wysłać kolejną prośbę i utrzymać aktualną sesję na żywo!

Nie podoba Ci się to i chcesz zakończyć sesję i zamknąć przeglądarkę?

Now, close the browser.

Agent zamknie przeglądarkę dla Ciebie. ✅

Teraz przejdź do sprawdzenia wygenerowanego pliku PDFhackernoon-trending-stories.pdfPrzewiń przez nią, a zobaczysz:

Fajnie! aclean, full-page export of Hackernoon’s trending page, linki i wszystko, w formacie PDF. To prawdziwa automatyzacja przeglądarki, zasilana przez własnego agenta AI.

I to, panowie, jesthow you build an AI agent with Playwright + MCPTa rzecz jest poważnie potężna. – Niech to gotować.

Ukryte ograniczenia playwritera MCP (i jak je wyeliminować)

Cudowne! może myślisz:

"W porządku, mam narzędzia... LLM, który może myśleć, serwer MCP, który może skrapać, i Playwright, aby kontrolować przeglądarkę.

"W porządku, mam narzędzia... LLM, który może myśleć, serwer MCP, który może skrapać, i Playwright, aby kontrolować przeglądarkę.

Nie tak szybko 🙂 🙂

Oczywiście, istnieją tylkotwo core things AI agents need to thrive:

1. Dostęp do danych internetowych w czasie rzeczywistym (✅ obsługiwane przez integracje MCP zdolne do skrapienia)
2. Możliwość interakcji z przeglądarką (✅ wprowadź Playwright MCP)

Oto, gdzie sprawy stają się ciekawe...

Spróbuj zapytać swojego agenta AI napędzanego Playwright o coś takiego jak:

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

A co się dzieje? 🙂

Nawiguje do G2. ✅ Czekam. ✅ Wykonuje zrzut ekranu. ✅ Ale jest złapanie:the page is blocked behind a verification wall.

A agent jest nawet wystarczająco uprzejmy, aby ci powiedzieć:

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, to nie jest „koniec gry” dla nas jako istot ludzkich.game overDla tegodefault Playwright browser setup

Co więc poszło nie tak?A oto temat:Vanilla Chrome!♂️

Przeglądarka Playwright kontroluje z pudełka nie jest zaprojektowany, aby uniknąć blokady. To wycieka sygnały w całym miejscu, takie jak automatyzacja flagi, dziwne konfiguracje, i tak dalej....To the point that most websites—jsut like G2 —instantly know it’s a bot

Jakie jest rozwiązanie? aPlaywright-compatible infrastructureopracowany w celu wspierania przepływów pracy agentów naremote browsers that nie get blockedA my rozmawiamy:

• Nieskończoność ️
• Praca bez głowy lub głowy 👁️
• Obsługiwany przez sieć proxy z ponad 100 milionami adresów IP mieszkalnych
• Zaprojektowany do mieszania się jak prawdziwy użytkownik ️ ♂️

Zastanawiasz się, czym jest to magiczne narzędzie?Bright Data’s Agent Browser— twój ukryty, skalowalny, przyjazny dla AI zestaw przeglądarki:

Jeśli zastanawiasz się, jak podłączyć go do konfiguracji MCP Playwright, jest to tak proste, jak przejście punktu końcowego 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...

ijust like that,nie więcej bloków! nie więcej ścian botów. nie więcej smutnych memów Gru.

gotowe do tworzenia przepływów pracy agentów, któreW rzeczywistościPraca na żywo w Internecie?Bright Data’s Agent Browser has your back!

Zobacz go w akcji w innej integracji tutaj:

Ostatnie myśli

Now you know how to supercharge any AI agent built with the OpenAI Agents SDK—whether it’s running on GPT, Gemini, or whatever’s coming next—by plugging it into the Playwright MCP server for real browser control.

Pokazaliśmy również, jak podnieść poziom jeszcze bardziej, przezwyciężając blokady przeglądarki za pomocą Bright Data.Agent Browser, tylko jeden kawałek potężnej infrastruktury AIzbudowaliśmy, aby wspierać rzeczywiste przepływy pracy AI na skalę.

W firmie Bright Data nasza misja jest prosta: uczynić sztuczną inteligencję dostępną dla wszystkich, wszędzie, więc do następnego razu – bądź ciekawy, bądź odważny i buduj przyszłość sztucznej inteligencji.