Generating Playwright Tests with GitHub Copilot + MCP: A Quick Guide

Model Context Protocol (MCP) is an open standard developed by Anthropic, the creators of the Claude LLMs. It facilitates interactions between AI models and external tools and data sources. MCP follows a client-server architecture, where clients typically host LLM models, and servers provide context, prompts, and tools for clients to utilise. In our case, the client would be GitHub Copilot and the server is the Playwright MCP. We will be using this pair to automate browser interactions and generate test scripts.

Setups

1. Install the server

Install the Playwright MCP server on your project by adding the following snippet to a JSON file under your .vscode folder:

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

This ensures a project-specific installation. For a global setup, add it to your global settings file instead.

2. Start the server

Start the MCP server by clicking start on the json file you just created. Then, in the GitHub Copilot tools menu, verify that “Playwright MCP” is listed as an available tool.

3. Optional: Add instructions

Add a list of Playwright specific instructions for Copilot by clicking the Add Context button, the instructions I used are the following mostly from the following video:

• You are a playwright test generator
• You are given a scenario and you need to generate a playwright test
• DO NOT generate test code based on the scenario alone
• DO run steps one by one using the tools provided by playwright
• Only after all steps are completed, emit a playwright typescript test
• Excute the test file and iterate until the test passes
• Save generated test file in the tests/specs folder

Usage

Set Copilot to agent mode and select a language model of your choice. In my example, I used Claude 3.5 Sonnet. We can then ask it to generate test scenarios. For instance, if we want to test the search function on the Playwright movies app, we could simply ask the following:

generate the following scenario:
1. navigate to https://debs-obrien.github.io/playwright-movies-app?category=Popular&page=1
2. search for the movie 'Garfield'
3. verify the movie is in the list        

Now, the Copilot will utilise the Playwright MCP to open a browser, search for the elements, create the necessary code, and iterate until the test passes, All done without manual intervention.

Conclusion

• ✅ Minimise manual typing so the QA engineer could focus on design and logic
• ✅ Excellent selector handling: MCP reliably identifies and targets DOM elements, reducing manual tweaking.
• ✅ Self-healing behaviour: With well-crafted prompts, Copilot can detect failures, correct issues, and re-run scenarios autonomously.
• ⚠️ Occasional missed triggers: Sometimes the MCP isn’t invoked due to unclear or missing prompts.
• ⚠️ Requires structural discipline: You may need to reorganise test files and scenarios manually unless the instructions are extremely well-defined.
• ⚠️ Not lightning-fast: Iterative execution can slow things down. A basic test (e.g., toggling a button and asserting state) took 6m45s to generate.

While not flawless, Playwright MCP is a promising tool for automation engineers looking to boost productivity and integrate AI into their workflow. With the right prompts and folder structure, it can streamline test generation and maintenance, making it a valuable asset in modern automation pipelines.

Check out the demo repo here:https://github.com/eatmoresushi/playwright-mcp-demo.