Skip to content
Recipes Ecosystem Source Code Docs

Browser Automation with Playwright MCP

The Playwright MCP server turns OpenCode into a browser operator. It can navigate, click, fill forms, read DOM, and verify visual state — all under your supervision.

When to use this recipe

  • You need to verify a UI flow end to end (login, checkout, settings save).
  • You want to scrape structured data from pages that don’t have a public API.
  • You’re debugging a bug that only reproduces in the real browser.

Prerequisites

  • OpenCode installed.
  • Playwright MCP server available (it ships with OpenCode’s recommended MCPs).
  • A clear target URL and a list of steps you want performed.

Steps

  1. Add the Playwright MCP server

    Register it in your OpenCode config.

    {
  "mcp": {
    "playwright": {
      "type": "local",
      "command": ["npx", "@playwright/mcp@latest"]
    }
  }
}

  2. Confirm the tools loaded

    Start OpenCode and ask it to list the available browser tools. You should see browser_navigate, browser_click, browser_snapshot, etc.

  3. State the task with a clear goal

    Give OpenCode the URL, the user credentials (if any), and the exact assertion you want.

    Open https://staging.example.com, log in with the test account, navigate to Settings, and tell me whether the new “Export data” toggle is visible. If it is, also tell me the default state of the toggle.

  4. Supervise each tool call

    Watch the tool calls. Approve navigation, clicks, and form fills. Deny anything that could write to a production database — use a staging environment.

  5. Ask for evidence

    When the flow is done, ask OpenCode to dump the relevant DOM or take a snapshot. This becomes your regression artifact.

    Save the final page DOM and a screenshot of the Settings page to ./artifacts/settings-snapshot.html and ./artifacts/settings.png respectively.

  6. Convert the flow into a test

    Ask OpenCode to translate the supervised steps into a Playwright test you can run in CI.

    Turn the flow we just performed into a Playwright test under tests/e2e/settings-export.spec.ts. Use the page-object pattern and assert the toggle visibility and default state.

Key prompt

Using the Playwright MCP server, open [URL], log in with these credentials [user/pass], navigate to [page], and verify that [specific condition]. At the end, save a DOM snapshot and a screenshot of the page to ./artifacts/. Report what you observed at each step.

Verify

  • The DOM snapshot contains the expected elements.
  • The screenshot visually shows the asserted state.
  • The generated Playwright test passes locally and in CI.

Common pitfalls

  • Running against production: Always use a staging environment. Browser automation can mutate state.
  • Brittle selectors: UI markup changes; assert on stable attributes (data-testid, role) not on CSS classes.
  • Long tool chains: A single prompt that says “do all of A, B, C, D” can fail at step C and leave the page in an odd state. Break the flow into supervised steps.

Next up