How to Supercharge Playwright with Claude: Auto-Generate UI, API & DB Tests Using MCP Playwright

Modern test automation is evolving rapidly.

Instead of manually writing test files, engineers can now use AI to generate production-ready Playwright tests in seconds.

In this guide, you’ll learn how to connect Claude (Desktop or VS Code) with the mcp-playwright framework to generate UI, API, and database tests automatically.

1. What Is MCP Playwright?

mcp-playwright is a modular Playwright framework designed to support AI-driven test generation.

Key capabilities:

• Automatic test file generation
• Structured support for UI, API, and DB tests
• Designed for integration with LLMs

It acts as a foundation layer where AI can generate consistent and scalable test files.

2. Setup: Clone and Install the Framework

Open your terminal and run:

git clone https://github.com/executeautomation/mcp-playwright.git
cd mcp-playwright
npm install

After setup, your project will include:

tests/
playwright.config.ts
prompts/

The prompts/ folder is especially useful for storing reusable AI instructions.

3. Choose Your Claude Environment

You can use Claude in two ways:

Option A: Claude Desktop

• Dedicated application
• Ideal for iterative prompting
• Clean UI experience

Option B: Claude in VS Code (Recommended)

• Install Claude extension
• Works directly inside your codebase
• Provides context-aware suggestions

4. Connect Claude to Your Codebase

VS Code Setup

1. Install a Claude extension
2. Open the mcp-playwright project
3. Allow indexing of files
4. Start prompting with full project context

This allows AI to understand:

• Folder structure
• Existing test patterns
• Framework conventions

5. Generate Test Files Using Claude

This is where AI becomes powerful.

Instead of writing tests manually, you describe behavior—and Claude generates the code.

A. Generate a UI Test

Prompt:

Generate a Playwright UI test:

- Navigate to https://example.app/login
- Login with valid credentials
- Go to Dashboard
- Create a new project with random name
- Verify project appears in list
- Use best practice selectors
- Follow mcp-playwright structure
- Save as: tests/ui/createProject.spec.ts

Example Output:

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

test('Create project via UI', async ({ page }) => {
  await page.goto('https://example.app/login');

  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');

  await page.waitForSelector('#dashboard');

  const projectName = `Project-${Date.now()}`;
  await page.click('#create-project');
  await page.fill('#project-name', projectName);
  await page.click('#save-project');

  await expect(page.locator('.project-list')).toContainText(projectName);
});

B. Generate an API Test

Prompt:

Write a Playwright API test:

- POST https://example.api/v1/users
- Create user with random data
- Validate 201 response
- GET created user
- Validate fields
- Save as tests/api/createUser.spec.ts

Example Output:

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

test('Create and fetch user via API', async ({ request }) => {
  const newUser = {
    name: `User-${Date.now()}`,
    email: `user${Date.now()}@test.com`
  };

  const postResponse = await request.post('/v1/users', {
    data: newUser
  });

  expect(postResponse.status()).toBe(201);

  const responseData = await postResponse.json();

  const getResponse = await request.get(`/v1/users/${responseData.id}`);
  const userData = await getResponse.json();

  expect(userData.email).toBe(newUser.email);
});

C. Generate a Database Test

Prompt:

Write a database test:

- Connect to PostgreSQL
- Insert customer record
- Query the record
- Validate fields
- Cleanup after test
- Save as tests/db/customerDb.spec.ts

Example Output:

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

test('Database validation test', async () => {
  const client = new Client({
    connectionString: process.env.DB_URL
  });

  await client.connect();

  const name = `Customer-${Date.now()}`;

  await client.query(
    'INSERT INTO customers(name) VALUES($1)',
    [name]
  );

  const res = await client.query(
    'SELECT name FROM customers WHERE name=$1',
    [name]
  );

  expect(res.rows[0].name).toBe(name);

  await client.query(
    'DELETE FROM customers WHERE name=$1',
    [name]
  );

  await client.end();
});

6. Reusable Prompt Templates

UI Template

Generate a Playwright UI test:
- Steps:
- Expected result:
Save to: tests/ui/[name].spec.ts

API Template

Generate API test:
- Endpoint:
- Payload:
- Expected response:
Save to: tests/api/[name].spec.ts

DB Template

Generate DB test:
- Database type:
- Query:
- Expected result:
Save to: tests/db/[name].spec.ts

7. Best Practices for AI-Generated Tests

• Be specific in prompts (URLs, selectors, assertions)
• Keep tests focused (one behavior per file)
• Use clear naming conventions
• Review generated code before committing
• Iterate and refine prompts

8. Run Your Tests

Execute your tests using:

npx playwright test

You should see:

• UI tests executing
• API tests validating
• Database tests passing

Why This Approach Works

This workflow combines:

• Structured frameworks
• AI-generated intelligence
• Scalable automation practices

The result is:

• Faster test creation
• Consistent structure
• Reduced manual effort

Final Thoughts

AI is transforming test automation from manual scripting to intelligent system design.

By combining Claude with mcp-playwright, you can:

• Generate test files instantly
• Maintain consistency across projects
• Scale automation with minimal effort

The future of QA is not writing more code.

It is designing systems that generate and maintain code for you.