Generate Playwright Tests with AI Agent Exploration

What you’ll get

Automated tests for your website, written by an AI that actually clicks around your site like a user first. “Playwright” is a popular tool for automated browser testing; here an AI agent explores your pages, works out what they do, then writes runnable Playwright tests (and even catches bugs along the way). It saves you from scripting every test by hand. It is intermediate: you edit a couple of config files and use VS Code’s agent mode.

Tools you need

• Playwright MCP (free): the piece that lets an AI agent drive a real browser and generate Playwright tests. (“MCP” is the standard way AI tools connect to abilities like this.)
• VS Code (free): the editor where you set it up and run the agent.

Steps

1. Make a project folder: create a new folder and open it in VS Code. Your tests and config will live here.

2. Add the Playwright MCP config: create a file named mcp.json in the folder’s root with this, which tells VS Code how to start Playwright MCP:

   {
     "servers": {
       "playwright": {
         "command": "npx",
         "args": ["@playwright/mcp@latest"]
       }
     }
   }

3. Add the agent’s instructions: create a .github folder, and inside it a file named generate_tests.prompt.md with the agent’s brief:

   ---
   tools: ['playwright']
   mode: 'agent'
   ---
   - You are a Playwright test generator.
   - Given a scenario, generate a Playwright test for it.
   - DO NOT write test code from the scenario alone.
   - DO run the steps one by one using the Playwright MCP tools.
   - When asked to explore a website:
     1. Navigate to the given URL.
     2. Explore one key piece of functionality, then close the browser.
     3. Write a Playwright TypeScript test (using @playwright/test) based on what you did,
        following best practices: role-based locators, auto-retrying assertions, and no
        manual timeouts (Playwright auto-waits when the right locators are used).
   - Save the test in the tests directory.
   - Run the test and iterate until it passes.
   - Add assertions that verify the expected behavior, with descriptive titles and comments.

4. Start VS Code Agent Mode: open the command palette (Ctrl+Shift+P or Cmd+Shift+P), type “Agent Mode”, and start it. Make sure the prompt file is in the agent’s context (keep it open or reference it).

5. Tell the agent to explore your site: in the agent input, point it at your app:

   Explore https://debs-obrien.github.io/playwright-movies-app

   A browser opens and closes as the agent clicks around, reporting what it finds.

6. Review the generated tests: when it finishes, it summarizes what it explored (homepage, search, theme toggle) and writes a test file (like tests/search.spec.ts) into your tests folder, then tells you whether the test passed.

Original source

Based on a DEV Community post by debs_obrien showing how Playwright MCP in agent mode can explore a web app on its own, discover features, and write runnable tests, sometimes finding bugs manual testing missed.

Notes & variations

• Free-tier viability: Playwright and its MCP are free and open-source, so the whole workflow is accessible.
• Common pitfall: a vague brief. If the agent’s instructions are unclear, it explores the wrong things. Keep the role, the goal, and the test style explicit (as above).
• Tip for better results: scope the work in your explore command, for example “Explore 3 key features of the site and generate 2 tests”, and make sure your app is up and stable so the agent can navigate it reliably.