engi-playwrightMCP

tim-morrison-insignia/engi-playwrightMCP

3.1

If you are the rightful owner of engi-playwrightMCP and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

The Model Context Protocol (MCP) server is a framework designed to facilitate browser automation and testing through a structured protocol, integrating AI capabilities for enhanced testing efficiency.

engi-playwrightMCP

A boiler plate solution for Playwright MCP (Model Context Protocol)

Features

  • Playwright MCP Server Integration: Browser automation through Model Context Protocol
  • Manual Testing: Interactive browser testing with real-time feedback
  • Automated Test Generation: AI-powered test case creation
  • Screenshot & Reporting: Automatic capture and detailed test reports
  • Multi-browser Support: Cross-browser testing capabilities

Prerequisites

  • Node.js (v18 or higher recommended)
  • npm or yarn
  • VS Code with GitHub Copilot access and extension
  • Playwright browsers (installed automatically)

Installation

# Clone the repository
git clone <repository-url>
cd engi-playwrightMCP

# Install dependencies
npm install

# Install Playwright browsers if no browsers installed before
npx playwright install

Configuration

MCP Server Setup

  1. Open the .vscode/mcp.json file in VS Code
  2. The MCP server configuration is already set up for Playwright integration
  3. Ensure GitHub Copilot is enabled in VS Code

Playwright Configuration

  • Configuration file: playwright.config.ts
  • Default browser: Chromium (headless mode)
  • For headed mode: Change headless: true to headless: false in config

Usage

Manual Testing with MCP Server

Use GitHub Copilot in Agent mode with Claude Sonnet model for interactive testing:

  1. Attach the manual test prompt:

    Add the prompt file: .github/prompts/manual-test.prompt.md

  2. Run manual test scenario:

    Follow instructions in manual-test.prompt.md.
Run the test for the following scenario:
Navigate to https://your-application-url.com
[Add more specific test steps as needed]

  3. Features of manual testing:

    • Real-time browser interaction
    • Accessibility testing
    • UI structure analysis
    • Screenshot capture
    • Detailed reporting

Automated Test Generation

Generate Playwright test files automatically using AI:

  1. Attach the auto test prompt:

    Add the prompt file: .github/prompts/auto-test.prompt.md

  2. Generate test scenario:

    Follow instructions in auto-test.prompt.md.
Generate the test for the following scenario:
Navigate to https://your-application-url.com and verify page title
[Add more specific test requirements]

  3. Generated tests include:

    • TypeScript test files
    • Proper test structure
    • Best practice assertions
    • Error handling

Running Tests

Manual Test Execution

Tests are executed through the MCP server integration with real-time browser control.

Automated Test Execution
# Run all tests
npm run test

# Run specific test file
npx playwright test <filename>

# Run tests in headed mode
npx playwright test --headed

# Generate test report
npx playwright show-report

First-Time Setup Notes

  • When running for the first time, you may see a "Continue" button with dropdown in the chat
  • Select either "Allow in this session" or "Allow in this workspace" for automatic execution
  • This enables the MCP server to run without manual intervention

Project Structure

engi-playwrightMCP/
├── .github/
│   └── prompts/                    # AI prompt templates
│       ├── manual-test.prompt.md   # Manual testing instructions
│       └── auto-test.prompt.md     # Auto test generation instructions
├── .vscode/
│   └── mcp.json                   # MCP server configuration. Only for local run in VS code
├── tests/                         # Playwright test specs for automation scripts
├── playwright.config.ts           # Playwright configuration
├── package.json                   # Project dependencies
└── README.md                      # This file

Example Test Scenarios

Manual Testing Examples

Navigate to https://your-application-url.com
- Verify page loads correctly
- Validate title of the page

Auto Test Generation Examples

Navigate to https://example.com and:
- Check page title is "Expected Title"
- Verify login form elements are present
- Test search functionality
- Validate responsive design

Troubleshooting

Common Issues

  1. MCP Server Connection: Ensure VS Code has GitHub Copilot enabled
  2. Browser Installation: Run npx playwright install if browsers are missing
  3. Permission Issues: Allow MCP server permissions when prompted
  4. Test Failures: Check network connectivity and target URL accessibility

License

This project is a boilerplate solution for educational purposes.