Ai Driven Test Automation With Playwright Cursor MCP Server

🚀 Playwright Test Framework Project

This project includes UI and API tests for the Zeigo web dashboard using Playwright for end-to-end (E2E) testing.

🚀 Quick Start

Prerequisites

1. Node.js: Install Node.js v20 or a later version.
2. Environment Setup: Create a .env file with the following configuration:

# Base URL
API_BASE_URL=https://your-api-url
UI_BASE_URL=https://your-ui-url

Steps

1. Install Playwright and its dependencies:

npm install
npx playwright install
npm install dotenv

2. Install the VS Code Playwright extension:

code --install-extension ms-playwright.playwright

3. Run tests

Test Execution Options

• UI Tests: Execute UI tests via npm run test:ui.
• API Tests: Execute API tests via npm run test:api.
• Debugging: Use the Playwright debugging tools for debugging.

✨ Features

Playwright offers reliable end-to-end testing capabilities for modern web applications, with the following features:

• Multi-browser testing support
• Cross-platform testing support
• Support for multiple languages (TypeScript, JavaScript, Python, .NET, Java)
• Mobile web testing support
• Parallel test execution
• Built-in debugging tools

📚 Documentation

• Playwright Official Documentation
• Running Tests Guide

📦 Installation

Project Structure

• .vscode/: Workspace-specific settings.
• ui-tests/specs/: UI test specification files.
• api-tests/specs/: API test specification files.
• pages/: Page Object Model (POM) files.
• utils/: Utility functions or helpers.
• .env: Environment variable file.
• .gitignore: Files to be excluded from version control.

💻 Usage Examples

Using Advanced Features of Playwright

Create Custom Assertions

// custom-assertions.ts
export async function customAssertion(page: Page, expectedText: string) {
  await page.waitForSelector('text=Hello World');
}

Use Data-Driven Testing

import { defineScenario } from 'playwright-cucumber';

defineScenario('Data-driven testing', ({ Given, When, Then }) => {
  Given('the user enters {string} and {string}', async function (username, password) {
    // Test steps
  });
});

Execute Tests in Parallel

npm run test --parallel=4

Instructions for Using Two MCP Servers

Playwright Debugging Command

playwright codegen https://example.com

Shut Down the Running Playwright Service

pkill -f "node playwright"

Intercept API Requests with Playwright

page.setRequestInterception(true);
page.on('request', request => {
  if (request.url().includes('api')) {
    request.respond({
      status: 200,
      body: JSON.stringify({ message: 'Test response' })
    });
  }
});

Playwright Network Recording Feature

playwright dev --trace-dir traces

How to Run Two MCP Servers Simultaneously

1. Open two terminal windows.
2. In the first terminal, start the Context7 MCP server:

npx -y @upstash/context7-mcp@latest

3. In the second terminal, start the Playwright MCP server:

npx playwright-mcp

⚠️ Important Note

You cannot run two MCP servers in the same terminal because each server occupies the terminal's input/output. However, you can run these two servers in two separate terminals.