playwright-mcp-demo

CESARDELATORRE/playwright-mcp-demo

3.1

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

The Playwright MCP server integrates Playwright with Model Context Protocol (MCP) to enhance browser automation capabilities, especially when used with tools like GitHub CoPilot.

Tools
1
Resources
0
Prompts
0

Testing web apps with "PlayWright" and "Playwright MCP server"

Project Summary

This project demonstrates the integration of Playwright with MCP and usage from VS Code GHCP and GH Actions.

Using "plain" Playwright without using its MCP server

Let's see how to use the "plain" Playwright in VS Code (still without its MCP server)

1. Install Playwright (for running tests)

For VS Code, I installed it by installing the Playwright VS Code extension: https://playwright.dev/docs/getting-started-vscode

You can also follow this: https://playwright.dev/docs/intro

Important note:

**For simply running Playwright Test specs, you just use the Playwright CLI or Playwright VS Code extension for running those tests. In addition to that, you can also use the Playwrigth MCP server for agent-driven browser automation using GitHub CoPilot. **

For instance, for just simply running a test you can do it with the CLI like the following:

npx playwright test e2e/microsoft-site-tests.spec.ts --project='Microsoft Edge' --reporter=line

alt text

Or with the GH Extension pressing the button: alt text

Or running the Test in Playwright UI Mode:

npx playwright test e2e/microsoft-docs-title-check.spec.ts --ui --project='Microsoft Edge' --ui-host=127.0.0.1 --ui-port=9323

alt text

Uing Playwright MCP server

2. Install Playwright MCP server

Add the following MCP config file to your the .vscode/mcp.json file.

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

3 Test mcp-playwrightw with example prompts:

User input:

Use the Playwright MCP server to go to https://www.microsoft.com and return the page then create a screenshot of it and put it in the /demo-screenshots folder with the file name as microsoft-home-page-screenshot-by-playwright-mcp-server.png

Use the Playwright MCP server to go to https://www.microsoft.com, see it in the browser and return the page title and all top navigation link texts in the chat output

alt text

alt text

alt text

Running the Playwright tests triggered by CI with Actions in Github.com

This is configured with the yaml file.

I'm using a different playwright config with the file so it's running the tests "headless" with no visual browser, otherwise, you get errors in the CI tests.

Show any of the previous executions triggered when there was a code commit/push to the repo. Open any previous execution, then open the section “Run Playwright tests” to see the tests passed.

alt text

You can also trigger it manually since it supports a manual trigger via workflow_dispatch in playwright.yml

alt text

OPTIONAL: Show the Playwright Report downloading the .zip file and opening the HTML file.

alt text