🧪 Playwright MCP Automation with Allure Reports

🚀 AI-Powered End-to-End Testing with Visual Reports

Harness the power of GPT-4.1 to generate, execute, and refine Playwright tests automatically

Features • Quick Start • CI/CD • Documentation

🌟 Features

🤖 AI-Powered Generation

Leverages GPT-4.1 to create comprehensive end-to-end tests from natural language scenarios and structured context.

🔁 Iterative Workflow

Tests are automatically generated, executed, and refined until they pass successfully.

🧱 Page Object Model

Implements scalable POM design pattern for maintainable and reusable test architecture.

📊 Rich Visual Reports

Integrated Allure Reports provide interactive dashboards with detailed test steps and visualizations.

🔧 CI/CD Ready

Seamlessly integrates with Jenkins pipelines for automated test execution and report generation.

💡 GitHub Copilot Support

Enhanced with Copilot Agent Mode for intelligent test debugging and code suggestions.

🎯 What Makes This Special?

graph LR
    A[📝 Scenario Input] --> B[🤖 AI Processing]
    B --> C[🎭 Test Generation]
    C --> D[▶️ Execution]
    D --> E{✅ Pass?}
    E -->|No| F[🔧 Refine]
    F --> C
    E -->|Yes| G[📊 Allure Report]
    style A fill:#4ade80
    style G fill:#3b82f6
    style E fill:#f59e0b

🚀 Quick Start

📋 Prerequisites

Before you begin, ensure you have the following installed:

Tool	Version	Purpose
📦 Node.js	LTS (18+)	Runtime environment
🧶 npm/Yarn	Latest	Package management
💻 VS Code	Latest	IDE with AI extensions
🎭 Playwright	Latest	Browser automation
🧠 GitHub Copilot	Optional	AI-powered assistance

⚡ Installation

1️⃣ Clone the Repository

git clone https://github.com/your-username/playwright-mcp-automation.git
cd playwright-mcp-automation

2️⃣ Install Dependencies

npm install
# or
yarn install

3️⃣ Install Playwright Browsers

npx playwright install

4️⃣ Install Allure Dependencies

npm install -D allure-playwright allure-commandline

⚙️ Configuration

Update your playwright.config.ts:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  reporter: [
    ['list'],
    ['html', { open: 'never' }],
    ['allure-playwright', {
      detail: true,
      outputFolder: 'allure-results',
      suiteTitle: false,
    }],
  ],
  use: {
    trace: 'on-first-retry',
  },
});

🧪 Running Tests

▶️ Execute Tests

npx playwright test

This generates raw test data in the allure-results/ directory

📊 Generate Allure Report

npx allure generate allure-results --clean -o allure-report

🌐 View Interactive Report

npx allure open allure-report

🤖 AI-Powered Test Generation

🧠 How It Works

┌─────────────────────────────────────────────────┐
│  1️⃣  Provide Scenario + Test Context           │
│  2️⃣  MCP Tools Inspect & Interact              │
│  3️⃣  Generate Playwright Tests (POM)           │
│  4️⃣  Save to /tests/ & Execute                 │
│  5️⃣  Refine Until Tests Pass ✅                │
└─────────────────────────────────────────────────┘

💬 Example Prompt

Navigate to http://www.automationpractice.pl/index.php
Search for "T-shirts"
Verify "Faded short sleeve T-shirts" is in the results

🔄 Automated Execution Cycle

Load Context - MCP loads test requirements and page structures
Generate Steps - GPT-4.1 creates test steps using POM pattern
Execute - Test runs automatically with Playwright
Iterate - AI refines failing tests until success ✅

💡 Using GitHub Copilot Agent Mode

Supercharge your testing workflow with GitHub Copilot:

📦 Setup

Install GitHub Copilot and Copilot Chat extensions in VS Code
Enable Agent Mode for autonomous assistance

🎯 Powerful Prompts

🔹 Generate a Playwright test for login using POM
🔹 Help debug why the test is failing
🔹 Refactor this test to use async/await properly
🔹 Add assertions for error handling

Copilot analyzes your context and provides intelligent suggestions and fixes!

🏗️ CI/CD Integration

🔧 Jenkins Setup

Prerequisites Checklist

✅ Jenkins server running
✅ Node.js & npm installed on build agents
✅ Playwright browsers configured
✅ Allure CLI available

📦 Required Jenkins Plugins

Navigate to Manage Jenkins → Plugins → Available:

✅ Allure Jenkins Plugin
✅ NodeJS Plugin

🧰 Configure Global Tools

NodeJS Configuration:

Go to Manage Jenkins → Global Tool Configuration
Under NodeJS, add version (e.g., NodeJS 18)
Check "Install automatically"

Allure CLI Configuration:

Download and unzip Allure CLI
Add bin/ folder to Jenkins agent PATH

🎬 Create Freestyle Job

New Item → Freestyle project
Name: Playwright-E2E-Tests
Source Code Management: Git
- Repository URL: https://github.com/your-username/your-repo-name.git
Build Environment:
- ✔️ Provide Node & npm bin folder to PATH
- Select configured NodeJS version

Build Steps (Execute Shell/Batch):

npm install
npx playwright install
npx playwright test --reporter=line,allure-playwright

Post-Build Action: Allure Report
- Path to results: allure-results

📊 Jenkins Pipeline (Jenkinsfile)

pipeline {
    agent any
    
    tools {
        nodejs 'NodeJS 18' // Match Jenkins Global Tool Configuration
    }
    
    environment {
        // Optional: Add Allure path if installed manually
        PATH = "${env.PATH};C:\\allure-commandline\\bin"
    }
    
    stages {
        stage('📦 Install Dependencies') {
            steps {
                echo 'Installing dependencies...'
                bat 'npm install'
                bat 'npx playwright install'
            }
        }
        
        stage('🧪 Run Playwright Tests') {
            steps {
                echo 'Running Playwright tests with Allure reporter...'
                bat 'npx playwright test --reporter=line,allure-playwright'
            }
        }
        
        stage('📊 Generate Allure Report') {
            steps {
                echo 'Generating Allure HTML Report...'
                bat 'npx allure generate allure-results --clean -o allure-report'
            }
        }
    }
    
    post {
        always {
            echo 'Publishing Allure Report...'
            allure includeProperties: false,
                   jdk: '',
                   reportBuildPolicy: 'ALWAYS',
                   results: [[path: 'allure-results']]
        }
    }
}

💡 Note: Use bat for Windows agents, sh for Linux/macOS agents

🚀 Pipeline Setup in Jenkins

Create new Pipeline project
Configure Pipeline:
- Choose "Pipeline script from SCM"
- SCM: Git
- Repository URL: Your GitHub repo
- Script Path: Jenkinsfile (case-sensitive)
Save and click Build Now

✅ Example Implementation

🔍 Test Scenario

Goal: Search for a product on automationpractice.pl

Steps:

🧭 Navigate to homepage
🔎 Search for "T-shirts"
✅ Validate "Faded short sleeve T-shirts" appears

Implementation: Built using Page Object Model with AI-generated test logic

📁 Project Structure

playwright-mcp-automation/
├── 📂 tests/              # Test files (AI-generated)
├── 📂 pages/              # Page Object Models
├── 📂 allure-results/     # Raw test results
├── 📂 allure-report/      # Generated HTML reports
├── 📄 playwright.config.ts
├── 📄 Jenkinsfile
├── 📄 package.json
└── 📄 README.md

📚 Documentation

🔗 Useful Resources

Resource	Link
🎭 Playwright Docs	playwright.dev
📊 Allure Reports	docs.qameta.io/allure
🤖 GitHub Copilot	github.com/features/copilot
🔧 Jenkins	jenkins.io

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Name		Name	Last commit message	Last commit date
testcontext		testcontext
tests-examples		tests-examples
tests		tests
.gitignore		.gitignore
Jenkinsfile		Jenkinsfile
README.md		README.md
allure.yml		allure.yml
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts

Latest commit

History

Folders and files

Repository files navigation