AI Powered end to end (E2E)Testing with Playwright MCP (Model Context Protocol) and GitHub MCP

In the fast-evolving world of software testing, leveraging AI-driven tools like the Model Context Protocol (MCP) servers can transform how we build and maintain automation frameworks. This blog walks you through E2E testing using the Playwright MCP and GitHub MCP Server.

By executing code locally, pushing the code to GitHub via the GitHub MCP Server, and automating its run in GitHub Actions, this approach minimizes manual coding by letting AI tools explore the site and generate structured code, while integrating version control and deployment for scalability.

Problem Statement

Writing and maintaining end-to-end (E2E) test automation is often time-consuming, repetitive, and error-prone. Developers spend significant effort in setup, coding page objects, pushing code to repositories, and configuring CI/CD pipelines.

The solution we’re addressing is using AI-driven MCP servers (Playwright MCP + GitHub MCP) to:

• Reduce manual coding by letting AI generate structured Playwright test code (POM-based).
• Automate DevOps steps such as branch creation, code push, and CI/CD integration via GitHub MCP.
• Standardize workflows so tests run consistently both locally and in GitHub Actions.

Prerequisites

• Node.js 18+ installed (for Playwright MCP).
• JS/TS
• A GitHub account with a Personal Access Token (PAT) for repo access.
• An MCP-compatible IDE like VS Code or Cursor for server integration.
• GitHub Copilot is already setup.

To automate the e2e (end to end testing) flow lets start with Set up of Playwright and GitHub MCP Server

Playwright MCP setup Using VS Code

Setting Up Playwright MCP in VS Code

To harness Playwright MCP’s potential, you need to configure it within VS Code, allowing AI agents to communicate with Playwright-managed browsers. Below are two straightforward methods to install and configure MCP.

Method 1: Quick Setup via VS Code Terminal

The fastest way to get started is by registering the Playwright MCP server through VS Code’s terminal. This method is platform-agnostic and works for both stable and Insiders editions of VS Code.

1. Launch VS Code:

• Open VS Code (Stable) or VS Code (Insiders).
• Ensure Node.js and npm are installed, as MCP relies on them for execution.

2. Open the Terminal:

• Navigate to View > Terminal or use the shortcut Ctrl + ~ (Windows/Linux) or Cmd + ~ (macOS).

For VS Code Stable, run the below command:

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

For VS Code Insiders, run the below command:

code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

Confirm Setup:

• This command registers the MCP server, enabling VS Code extensions (e.g., GitHub Copilot) to launch it automatically when browser automation is required.
• Test by triggering an AI-driven task, such as generating a Playwright script, to ensure the server starts correctly.

Method 2: Custom Configuration in settings.json

For more control or to tailor the setup, you can manually configure Playwright MCP in VS Code’s settings.json file. This method is ideal for adding custom arguments or integrating with specific workflows.

Vs Code Settings:

• Go to File > Preferences > Settings or press Ctrl + , (Windows/Linux) or Cmd + , (macOS).
• Click the “Open Settings (JSON)” icon in the top-right corner to edit the settings.json file.

Add MCP Configuration:

• Insert the following JSON structure within the root object

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

Press enter or click to view image in full size

Below are the available tools in Playwright MCP Server.

Now let see how we can set up GitHub MCP in VS code

GitHub MCP setup Using VS Code

The GitHub MCP Server is an implementation of the Model Context Protocol (MCP) that enables AI tools to seamlessly interact with GitHub’s ecosystem. It acts as a bridge between AI-driven applications and GitHub APIs, allowing you to:

• Automate workflows such as creating branches, pushing code, or triggering CI/CD pipelines.
• Extract and manage data from repositories, issues, or pull requests.
• Build intelligent integrations where AI agents can directly collaborate with version control and project management tasks.

Prerequisites

Before getting started, make sure you have:

1. Docker installed and running on your system
2. A GitHub PAT (Personal Access Token) with appropriate permissions for the GitHub APIs you plan to use

Step 1

1. In Vs code click on Manage → Settings
2. Click on Edit setting.json
3. Add the following .JSON configuration

Below the detail of GitHub service configuration

• command: "docker" → Runs Docker as the base command.
• args → Arguments passed to Docker:
• run → Run a container.
• -i → Keep STDIN open (interactive mode).
• --rm → Remove the container after it exits.
• -e GITHUB_PERSONAL_ACCESS_TOKEN → Pass an environment variable into the container.
• mcp/github → The Docker image to run (a GitHub client).
• env → Defines environment variables for the container:
• GITHUB_PERSONAL_ACCESS_TOKEN is set to ${input:github_token} (a placeholder that gets replaced by your actual GitHub token at runtime).

Step 2

1. Open the link https://github.com/settings/personal-access-tokens
2. Create token from Setting -> Developer settings

Once token e.g input:github_token is created its display in Fine-grained-tokens sub -section

You see above we have created PAT , now what will happen when we try to push the code without creating Personal Access Tokens.

Push the code without Creating PAT (Personal Access Tokens)

When user try to push the code without PAT below error is display and user not able to push the code in CI/CD GitHub

Set up for Playwright and GitHub MCP Server is done now next step is to create the test cases and push the code using GitHub MCP server.

Create basic framework using Playwright MCP

Now lets create a basic Playwright framework which include the complete folder structure using POM.

Run the below prompt in Vs Code using GitHub Copilot

Prompt :

Create a POM model for below steps using Playwright and Java script
1.Open https://www.saucedemo.com/
2.Login with username and password
3.Add product “Sauce Labs Backpack” into the cart
4.Open the cart
5.Click on Checkout button
6.Fill random data in First Name,Last Name and Zip
7.Click on continue button
8.Click on Finish button
9.Verify message Thank you for your order!

So far we have created the test cases by running the prompt in GitHub Copilot. Now lets creare the branch using prompt.

Create branch Using Prompt

Now create a branch e.g with name `e2eMCPTesting` using below prompt.

Run the below Prompt :

Prompt :

Create Branch with name "e2eMCPTesting"

We have created the branch using prompt but to push the code in CI/CD either you have to create the branch in Manually or we can create by providing the prompt.

Create branch In GitHub (Manually)

Now branch is created next step is login into GitHub and create a branch e.g with same name `e2eMCPTesting` So that we can push the code.

*** Alternate method if you don't want to create Repo mamually ***

1.Give Prompt to login into Github.com and will ask to login 
with the valid crediential.

2.Then it will enter Repo name and finally create the repository

Branch is created next step is push the code into CI/CD

Push Code Using Prompt

Run the below prompt to push the code into CI/CD (GitHub).

Prompt :

Push the code on The remote repository URL https://github.com/<owner-name>/e2eMCPTesting.git

In the below screenshot you can see code is pushed in GitHub

Code is pushed next step is to execute the test cases.

Run the Code in CI/CD (GitHub Action)

So far test cases are executed and code is pushed in GitHub next step is to run the test cases in GitHub Actions.

Now run the below prompt in copilot to run the test cases in GitHub Action.

Prompt :
Run the test cases in GitHub Actions

In the below screenshot you can see test cases start executing in GitHub Action.

In the below screenshot you can see test cases are executed successfully in GitHub action.

In the below screenshot you can see .html report generated successfully.

Open the report and verify test cases are executed successfully.

So this way using Playwright and GitHub MCP server we can automate e2e scenario.

Some Prompt to communicate to GitHub Action

Now let test GitHub action with some prompt

Prompt -1

Prompt -1
Can you check for me in GitHub action is all test cases are passed in last code push

In the below screenshot you can see the same result that Prompt answering.

Prompt -2

Prompt -2
In GitHub action Re-run previous job

Prompt -3

Prompt -2
In GitHub action run the test cases only for webkit browser

In the below screenshot you can see as i give the prompt its updating .config file itself first then pushing the code and running test cases in webkit browser only.

In the below screenshot in GitHub action test cases are executing for webkit browser only.

There are benefits to using MCP however, from a security perspective we must keep a few key considerations in mind.

Security perspective

From a security perspective, it’s critical to handle Personal Access Tokens (PATs) and repository credentials with care. Always:

• Protect credentials: Always create fine-grained Personal Access Tokens (PATs) with minimal scope and store them as encrypted secrets in GitHub Actions rather than in plain text locally.
• Review AI output: Never push AI-generated code blindly. Inspect tests for skipped validations, insecure selectors, or configurations that could weaken test reliability.
• Update dependencies: Keep Playwright, Docker images, and MCP servers patched to avoid exposing the pipeline to known vulnerabilities.
• Access controls: Restrict who can trigger MCP-powered workflows and ensure logs don’t leak sensitive information.

Wrap-up

AI-powered MCP servers bring a major shift to how we think about end-to-end testing. Instead of spending hours on boilerplate coding, repository setup, or manual CI/CD configuration, developers can lean on Playwright MCP and GitHub MCP to take care of the repetitive groundwork

This approach doesn’t eliminate the role of test engineers — it enhances it. Teams can focus their energy on meaningful work such as designing resilient test cases, tackling complex scenarios, and improving overall test coverage, while AI takes care of the routine automation work.