Quickstart: Automatiseer browsertaken met de Playwright-werkruimten remote MCP-server

In deze quickstart verbind je een AI-agent met de remote MCP-server van Playwright-werkruimten. De agent gebruikt een beheerde cloudbrowser om een webpagina te openen, de toegankelijkheidssnapshot te inspecteren, de inhoud van de pagina te rapporteren en de browsersessie te sluiten.

De externe MCP-server biedt browserautomatiseringstools via streambare HTTP. Je hoeft geen Playwright, browserbinaries of een lokale MCP-server in de agentomgeving te installeren.

Nadat je deze quickstart hebt voltooid, heb je een MCP-client verbonden met een Playwright-werkruimte en kun je een agent-gestuurde browsertaak uitvoeren vanuit GitHub Copilot CLI of Microsoft Foundry.

Prerequisites

• Een Azure-account met een actief abonnement. Als je geen Azure-abonnement hebt, maak dan een gratis account aan voordat je begint.
• Een Playwright-werkruimte die is ingeschakeld voor de remote MCP-preview.
• De Azure-rol Contributor of Owner op werkruimteniveau. Deze rol is vereist om een workspace access token te creëren. Voor meer informatie, zie Toegang beheren tot een Playwright-werkruimte.
• Een van de volgende MCP-klanten:
  • GitHub Copilot CLI met MCP-ondersteuning.
  • Een Microsoft Foundry-project met toestemming om projectverbindingen te maken en agents te configureren.

Een verificatiemethode kiezen

Gebruik Microsoft Entra ID wanneer je MCP-client OAuth of managed identity ondersteunt. De externe MCP-server gebruikt deze resource identifier en gedelegeerde scope:

Resource: https://mcp.playwright.microsoft.com
Scope: https://mcp.playwright.microsoft.com/Playwright.Mcp.Tools

De server publiceert OAuth protected-resource metadata. Clients die OAuth-detectie ondersteunen, waaronder Visual Studio Code, kunnen de autorisatieserver en de vereiste scope afleiden uit het werkruimtegebonden MCP-eindpunt. De ingelogde identiteit moet toegang hebben tot de Playwright-werkruimte via Azure role-based access control (RBAC).

Gebruik alleen een workspace access token wanneer de MCP-client niet kan authenticeren met Microsoft Entra ID. Toegangstokens zijn minder veilig en worden standaard uitgeschakeld.

Maak een workspace-toegangstoken aan voor compatibiliteit

Sla deze sectie over wanneer je Microsoft Entra ID gebruikt. Als toegangstokenauthenticatie nog niet is ingeschakeld voor de werkruimte:

Maak een toegangstoken voor de werkruimte aan

Deze quickstart maakt gebruik van sleutelgebaseerde authenticatie. De MCP-client stuurt een workspace-toegangstoken in de x-api-key requestheader.

1. Meld u aan bij het Azure-portaal.
2. Open je Playwright-werkruimte.
3. Selecteer onder InstellingenToegangsbeheer.
4. Selecteer het selectievakje Playwright Service Access Token als dit nog niet is geselecteerd.
5. Selecteer Het token genereren.
6. Voer een naam en vervaldatum in en genereer vervolgens de token.
7. Kopieer het token onmiddellijk. Je kunt de waarde later niet meer terughalen.

Het token is gekoppeld aan de gebruiker die het aanmaakt. De dienst evalueert de huidige Azure role-based access control (RBAC) rechten van die gebruiker wanneer het token wordt gebruikt. Gebruik een korte houdbaarheidsperiode voor deze quickstart.

Voor meer informatie, zie Beheren werkruimtetoegangstokens.

Bouw het externe MCP-eindpunt

Open in het Azure-portaal de Overzichtspagina van je Playwright-werkruimte. Gebruik de werkruimteregio en werkruimte-ID om het externe MCP-eindpunt te bouwen.

Het eindpunt gebruikt het volgende formaat:

https://<region>.mcp.playwright.microsoft.com/playwrightworkspaces/<workspace-id>/mcp

Voorbeeld:

https://eastus.mcp.playwright.microsoft.com/playwrightworkspaces/00000000-0000-0000-0000-000000000000/mcp

Gebruik het eindpunt voor de regio waar de werkruimte is uitgerold.

Verbind een MCP-client

Kies de MCP-client die je wilt gebruiken.

GITHUB COPILOT CLI

Om de Playwright-werkruimten remote MCP-server toe te voegen aan de GitHub Copilot CLI:

1. Open de CLI van GitHub Copilot.
2. Voer /mcp add in.
3. Voer een unieke servernaam in, zoals playwrightWorkspace.
4. Selecteer HTTP als servertype.
5. Voer het externe MCP-eindpunt in.
6. Voeg een HTTP-header toe die wordt genoemd x-api-key en gebruik het workspace-toegangstoken als waarde.
7. Selecteer Auto voor uitgestelde tools.
8. Druk op Esc om de server klaar te maken.

Microsoft Foundry

Verbind de externe server als een aangepaste MCP-tool. Foundry slaat de workspace access token op in een projectverbinding.

Om de externe MCP-server te verbinden:

1. Open je project in het Microsoft Foundry-portaal.
2. Selecteer Build>Tools en selecteer vervolgens Add Tool>Custom>Model Context Protocol.
3. Voer playwrightWorkspace in als de unieke naam.
4. Voer het externe MCP-serverendpoint in.
5. Selecteer sleutelgebaseerde authenticatie.
6. Voer x-api-key in als naam van de referentiegegevens en het toegangstoken voor de werkruimte als de waarde van de referentiegegevens.
7. Selecteer Maak verbinding met. Foundry maakt de projectkoppeling.

Maak of open een agent, voeg de remote MCP-tool toe en selecteer de projectverbinding. Eis goedkeuring voor elke toolcall terwijl je de integratie evalueert. Goedkeuring vereist zodat je de toolnaam en argumenten vóór elke browserbewerking kunt inspecteren.

Raadpleeg Connect Microsoft Foundry agents to MCP server endpoints voor de huidige verbindingsvelden en het goedkeuringsgedrag.

Start je eerste browsertaak

Stuur de volgende prompt naar de makelaar:

Use the Playwright workspace tools to create a browser session, open
https://example.com, inspect the page snapshot, and report the main heading
and page URL. Close the browser session when the task finishes. Always close
the session if a browser step fails.

Controleer of de agent deze volgorde volgt:

1. Roept create_browser_session en behoudt de teruggekeerde browserSessionId.
2. Roept browser_navigate aan met de sessie-ID en https://example.com.
3. Oproepen browser_snapshot of browser_find met dezelfde sessie-ID.
4. Geeft de Voorbeelddomeinkop en de pagina URL op.
5. Roept close_browser_session aan met de sessie-ID.

Een succesvol resultaat lijkt op de volgende output:

Heading: Example Domain
URL: https://example.com/
Browser session closed.

Het exacte antwoord verschilt per agent en model. Het resultaat van de sessiecreatie kan ook een live-view URL bevatten. De uiteindelijke reactie op zich bevestigt geen opschoning. Controleer de geschiedenis van toolaanroepen en verifieer of close_browser_session is geslaagd.

De hulpbronnen opschonen

Wanneer je de quickstart hebt afgerond:

1. Bevestig dat de agent heeft gebeld close_browser_session.
2. Als je een Playwright-werkruimte alleen voor deze quickstart hebt aangemaakt, verwijder dan de resourcegroep. Verwijder geen resourcegroep die bronnen bevat die je wilt behouden.

Volgende stap