playwright-typescript-enableedge

GEN-AI 🤖 Test Automation Framework

A comprehensive test automation framework built with TypeScript and Playwright for automating the web UI and API test cases. !
Test cases can be generated / created using GenAI🤖 tools (Playwright MCP server 🎭 integrated with VS code and Github Co-Pilot) based on manual test cases

Description

This repository contains a sample repository for UI and API automation using TypeScript and Playwright. The framework follows the Page Object Model (POM) design pattern and supports both UI and API testing.
Framework also support generating automated test cases based on manual test case steps using GenAI 🤖, through 🎭 Playwright MCP server, VS code and Github Co-pilot.

Getting Started

These instructions will help you set up and run the test framework on your local machine.

Prerequisites

• Node.js (v14 or higher)
• Java (v11 or higher for Allure Report)

Installation

1. Clone the repository:

git clone https://github.com/enableedge/playwright-typescript-enableedge.git
cd playwright-typescript-enableedge

2. Install dependencies:

npm install

3. Install Playwright browsers:

npx playwright install

Running the Tests

To run all UI tests:

npm run test:ui

To run all API tests:

npm run test:api

To run specific test files:

npm run test -- <path-to-test-file>

Setting up Playwright MCP 🎭

Playwright MCP (Model Context Protocol) enables AI-assisted test generation and maintenance within VS Code.

1. Install the Playwright extension for VS Code:
   

code --install-extension ms-playwright.playwright

2. Enable Playwright MCP in VS Code settings:
   • Open VS Code settings (File > Preferences > Settings)
   • Search for "Playwright MCP"
   • Check "Enable Playwright MCP Server"
   • Or add this to your settings.json:

{
    "playwright.mcp.enabled": true
}

3. Start using Playwright MCP:

   • Open VS Code's Command Palette (CMD+Shift+P / Ctrl+Shift+P)
   • Type "Playwright: Start MCP Server" and select it
   • Check the Output panel (CMD+Shift+U / Ctrl+Shift+U) and select "Playwright MCP" from the dropdown
   • You should see logs indicating the MCP server has started

4. Generate tests:

   • With MCP running, you can use natural language to describe test scenarios e.g. Sample manual test case
   • MCP will automate the browser and generate corresponding Playwright test code Code generated as per above test case
   • The generated tests will use modern Playwright practices and locators

Tips:

• Keep the Output panel open to monitor MCP's actions
• MCP generates tests based on actual browser interactions
• The generated tests are saved in your project's test directory
• You can modify the generated tests as needed

🎬 Demo Video

Watch the live demonstration of GenAI based Playwright testing in action:

📺 Watch Demo Video - See how to write and execute tests using natural language with Playwright MCP and GitHub Copilot.

Built With

• Playwright MCP - MCP server for playwrite
• TypeScript - Programming language
• Playwright - Test automation framework
• Allure Report - Test reporting tool
• Page Object Model - Design pattern

License

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