Skip to main content

Let AI Explore Your Site & Write Tests with Playwright MCP

Playwright MCP in Agent Mode enables AI to explore websites autonomously, detect bugs, and generate meaningful end-to-end tests automatically.

This powerful approach allows AI to:

  • Navigate through your application like a real user
  • Discover functionalities you might have missed
  • Identify edge cases and potential bugs
  • Generate comprehensive test suites without manual coding
  • Provide detailed test execution steps for review

While human oversight remains important, the combination of AI exploration and automated test generation provides a powerful foundation for modern web application testing.

Create a Test Generation Prompt​

Start with creating a reusable prompt file in your .github folder named generate_tests.prompt.md. By doing this you can then reuse the same prompt for different websites and scenarios.

---
tools: ['playwright']
mode: 'agent'
---

You are a playwright test generator.
You are given a scenario and you need to generate a playwright test for it.
DO NOT generate test code based on the scenario alone.
DO run steps one by one using the tools provided by the Playwright MCP.

When asked to explore a website, navigate to the specified URL
and explore one key functionality of the site.
When finished, close the browser and implement a
Playwright TypeScript test that uses @playwright/test
based on message history using Playwright's best practices
including role based locators, auto retrying assertions and with no added timeouts
unless necessary as Playwright has built in retries
and autowaiting if the correct locators and assertions are used.

Save the generated test file in the tests directory
and execute the test file, iterating until the test passes.
Include appropriate assertions to verify the expected behavior
and structure tests properly with descriptive test titles and comments.

Exploring a Website with AI​

Once you have the Playwright MCP installed, you can start exploring websites and generating tests. In VS Code Agent Mode, choose a model that supports MCPs and with your prompt added to context, simply type:

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

The agent will then begin its autonomous exploration of your application.

What Happens During Exploration?​

Initial Navigation: The agent starts by navigating to your specified URL and taking a page snapshot to understand what's available on the page. It can see all interactive elements and begin exploring them systematically.

Feature Discovery: The agent explores your application like a real user would, typically following the natural tab order of elements such as search functionality, navigation elements, theme toggles, login forms, and other interactive components.

Bug Detection: One of the most interesting aspects of using AI for exploration is its ability to discover edge cases you might have missed.
The agent doesn't just test one feature but explores multiple aspects of your application including homepage functionality, search features, movie details pages, theme toggling, and navigation patterns.

Test Generation Process​

After exploration, the agent summarizes its findings and selects key functionality to focus on for test generation. Here's what the generated test might look like:

import { test, expect } from '@playwright/test';

test.describe('Movie search', () => {
  test('Search for a movie by title', async ({ page }) => {
    // Navigate to the movies app
    await page.goto('https://debs-obrien.github.io/playwright-movies-app');
    
    // Click on the search button to activate the search input
    await page.getByRole('search').click();
    
    // Type 'Star Wars' into the search input and press Enter
    const searchTerm = 'Star Wars';
    await page.getByRole('textbox', { name: 'Search Input' }).fill(searchTerm);
    await page.getByRole('textbox', { name: 'Search Input' }).press('Enter');
    
    // Verify we're on the search results page with correct title
    await expect(page).toHaveTitle(`${searchTerm} - Search Results`);
    
    // Verify the search results heading contains the search term
    await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm);
    await expect(page.getByRole('heading', { name: 'search results', level: 2 })).toBeVisible();
    
    // Verify that search results are displayed
    await expect(page.getByRole('list', { name: 'movies' })).toBeVisible();
    
    // Click on a movie from search results
    const firstMovie = page.getByRole('list', { name: 'movies' }).getByRole('link').first();
    const movieTitleElement = firstMovie.getByRole('heading', { level: 2 });
    const movieTitle = await movieTitleElement.textContent() || '';
    await firstMovie.click();
    
    // Verify that the movie details page is loaded with the correct title
    await expect(page.getByRole('heading', { level: 1 })).toHaveText(movieTitle);
    
    // Verify movie details sections are present
    await expect(page.getByText('The Synopsis')).toBeVisible();
    await expect(page.getByText('The Cast')).toBeVisible();
    
    // Verify recommended movies section is present
    await expect(page.getByRole('heading', { name: 'Recommended Movies' })).toBeVisible();
    
    // Go back to search results
    await page.getByRole('button', { name: 'Back' }).click();
    
    // Verify we're back on the search results page
    await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm);
  });
});

The generated tests use Playwright's role-based locators (getByRole, getByText, getByLabel), which are more resilient and accessible than traditional CSS selectors. The tests use web-first assertions with built-in retries, making them more reliable without needing custom timeouts. The tests include multiple assertion points to verify navigation behavior, page titles and content, element visibility, and complete user interaction flows.

After generating the test, the AI automatically fixes any linting errors and runs the test to ensure it passes. The process is highly iterative. You can refine your prompts for better results, increase the number of tests generated, direct the agent to explore specific areas of your application, and build upon generated tests with additional test cases.