W kwietniu 2025 roku Microsoft spokojnie ustąpił. , nowy serwer, który łączy agenta AI (za pośrednictwem MCP) bezpośrednio z API przeglądarki Playwright. Playwright MCP Co to oznacza w prostym języku angielskim? (I to za darmo!) » ," " Wszystko bez pisania pojedynczego wiersza kodu automatyzacji przeglądarki. Your AI agent can now interact with real web pages using nothing but simple text instructions Kliknij to Zrób zrzut ekranu Tak, to jest tak wielkie, że I to dopiero się zaczyna. 🔥 Playwright MCP has already become one of the most-starred MCP servers on GitHub 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 jest serwerem MCP (Model Context Protocol), który daje agentom AI poważne supermocarstwa w zakresie automatyzacji przeglądarki za pośrednictwem API Playwright. Piosenkarz MCP Piosenkarz MCP Za kulisami, zamiast polegać na zrzutach ekranu lub modelach dostosowanych do wizji, pozwala LLM na interakcję ze stronami internetowymi za pomocą Oznacza to szybsze, czystsze i znacznie bardziej przyjazne dla LLM interakcje. structured accessibility snapshots W świecie o Tam, gdzie trzeba , , oraz Jak człowiek – to całkowita zmiana gry! Przepływ pracy agenta AI i agenta RAG czytaj kliknij nawigacja 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 na ... i wspinaczki. 12K+ ⭐ on GitHub 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ści Na stronie WEB do stuff 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śmy Więc jeśli jeszcze tego nie sprawdziłeś, idź skim to naprawdę szybko. . MCP + OpenAI Agents SDK: Jak zbudować potężnego agenta AI MCP + OpenAI Agents SDK: Jak zbudować potężnego agenta AI MCP + OpenAI Agents SDK: Jak zbudować potężnego agenta AI Ale jeśli jesteś w pośpiechu (dostaniemy to), : here’s the TL;DR version to get you rolling 
 
 
 
 
 Create a project folder. W środku dodaj plik o nazwie agent.py i skonfiguruj środowisko wirtualne Python. Zainstaluj wymagane biblioteki za pomocą programu openai-agents python-dotenv. 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. bit mówi, gdzie odrzucić pliki eksportowe, takie jak zrzuty ekranu i pliki PDF. --output-dir "./" i️ Jeśli agent nie musi eksportować żadnych plików, możesz pominąć Flag w całości.To jest opcjonalne! Note --output-dir Krok #3: Pełny kod Oto co Twój Plik 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: 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())
 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: 
 
 
 
 
 
 Agent uruchamia instancję Chrome obsługiwaną przez Playwright. Odwiedza hackernoon.com Kliknij na link „Trends Stories”. ️ Poczekaj aż strona zostanie w pełni załadowana. Eksportuje stronę do pliku PDF o nazwie hackernoon-trending-stories.pdf, który pojawił się w folderze projektu. Należy zauważyć, że przeglądarka Jest to idealne rozwiązanie, jeśli chcesz wysłać kolejną prośbę i utrzymać aktualną sesję na żywo! Pozostań otwarty 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 PDF Przewiń przez nią, a zobaczysz: hackernoon-trending-stories.pdf Fajnie! a , linki i wszystko, w formacie PDF. To prawdziwa automatyzacja przeglądarki, zasilana przez własnego agenta AI. clean, full-page export of Hackernoon’s trending page I to, panowie, jest Ta rzecz jest poważnie potężna. – Niech to gotować. how you build an AI agent with Playwright + MCP 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ą tylko : two core things AI agents need to thrive 
 
 
 Dostęp do danych internetowych w czasie rzeczywistym (✅ obsługiwane przez integracje MCP zdolne do skrapienia) 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. Dla tego game over default Playwright browser setup A oto temat: ♂️ Co więc poszło nie tak? 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? a opracowany w celu wspierania przepływów pracy agentów na A my rozmawiamy: Playwright-compatible infrastructure remote browsers that   get blocked nie nie 
 
 
 
 
 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? — twój ukryty, skalowalny, przyjazny dla AI zestaw przeglądarki: Bright Data’s Agent Browser Przeglądarka Agent Bright Data https://www.youtube.com/watch?v=T59GCkpk5zY&embedable=true 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...
 i nie więcej bloków! nie więcej ścian botów. nie więcej smutnych memów Gru. just like that, gotowe do tworzenia przepływów pracy agentów, które Praca na żywo w Internecie? W rzeczywistości Bright Data’s Agent Browser has your back! Zobacz go w akcji w innej integracji tutaj: https://www.youtube.com/watch?v=JG_INdktGsk&embedable=true 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. , tylko jeden kawałek potężnej infrastruktury AI . Agent Browser zbudowaliś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.

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 jest tutaj: Zintegrujmy go!

About Author

UWAGI

ZAWIEŚĆ TAGI

ARTYKUŁ TEN ZOSTAŁ PREZENTOWANY W

Related Stories

Meet Sora: HackerNoon Company of the Week

MashRadar Reviewed HackerNoon - Everything You Need to Know

Reach More Readers! BOOST Your Story on HackerNoon

Understanding Metaverse: A Basic Explanation

Meet Sora: HackerNoon Company of the Week

MashRadar Reviewed HackerNoon - Everything You Need to Know

Reach More Readers! BOOST Your Story on HackerNoon

Understanding Metaverse: A Basic Explanation

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps