playwright-mcp

A step-by-step guide that uses MCP Playwright server with MCP client windsurf/VS Code, supporting both UI and API testing

UI: nextjs.org

API: https://fakerestapi.azurewebsites.net/

Prerequisites

• Node v18 or newer
• MCP Playwright server
• MCP clients (Claude Desktop, Windsurf, VS Code)

Setup/Installtion

• Create a empty project/folder with name playwright-mcp

• Open with any editor(windsurf/VS code) and initialise project with playwright(just run below command on terminal and accept everything)

  • Install dependencies
    • npm init playwright@latest

• Configure MCP Playwright server

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

• Run the following prompt with the Claude Sonnet 4 LLM agent to generate UI tests for the Next.js.org footer links

Use the available tools and navigate to nextjs.org website

analyse the content and create me a suite of tests which will test the footer links of nextjs website

place the tests in @testsfolder

Note: The generated test suites will vary based on the chosen LLM, and the same prompt may produce different outputs

what's next, need to run the tests after prompt finishes generating tests

Run All Footer Tests

npx playwright test tests/nextjs-footer.spec.ts
npx playwright test tests/footer-links-validation.spec.ts
npx playwright test tests/footer-comprehensive.spec.ts

Run Specific Test Categories

# Run only structure validation tests
npx playwright test tests/nextjs-footer.spec.ts --grep "should display all expected footer sections"

# Run only link validation tests
npx playwright test tests/footer-links-validation.spec.ts --grep "should validate"

# Run comprehensive tests
npx playwright test tests/footer-comprehensive.spec.ts

Generate Test Report

npx playwright test --reporter=html

API tests for https://fakerestapi.azurewebsites.net/

• Run the following prompt to generate API tests for the schema: https://fakerestapi.azurewebsites.net/swagger/v1/swagger.json

Note: The generated test suites will vary based on the chosen LLM, and the same prompt may produce different outputs

Run generated API tests

npx playwright test tests/api/fakerest.spec.ts