Skip to main content

Lesson 6 - Validate functionality with Playwright MCP

Configure Playwright MCP through Customize and observe filtering in a browser in the existing feature worktree.

As we’ve already highlighted, there’s more to writing code than just writing code. We need to work with data, external services, and even allow for additional automations to be available to Copilot. This is where MCP servers come into play. MCP servers allow Copilot to go beyond what’s built into the app, providing it even more tools and services.

In this lesson, you will:

  • understand what Model Context Protocol (MCP) is and how the GitHub Copilot app uses it.
  • add the Playwright MCP server.
  • ask the agent to drive a browser and explore your filtering feature.

Scenario

While unit and end-to-end tests are important, validating updates to the UI requires actually interacting with the UI. You want to allow Copilot to use the website you’re working on as a user would to further automate how changes are made, providing more confidence the updates perform as expected.

What is Model Context Protocol (MCP)?

Model Context Protocol (MCP) provides AI agents with a way to communicate with external tools and services. By using MCP, AI agents can communicate with external tools and services in real-time. This allows them to access up-to-date information (using resources) and perform actions on your behalf (using tools).

These tools and resources are accessed through an MCP server, which acts as a bridge between the AI agent and the external tools and services. The MCP server is responsible for managing the communication between the AI agent and the external tools (such as existing APIs or local tools like NPM packages). Each MCP server represents a different set of tools and resources that the AI agent can access.

A couple of popular existing MCP servers are:

  • GitHub MCP Server: This server provides access to a set of APIs for managing your GitHub repositories. It allows the AI agent to perform actions such as creating new repositories, updating existing ones, and managing issues and pull requests.
  • Playwright MCP Server: This server provides browser automation capabilities using Playwright. It allows the AI agent to perform actions such as navigating to web pages, filling out forms, and clicking buttons.

There are many other MCP servers available that provide access to different tools and resources. GitHub hosts an MCP registry to enhance discoverability and contributions to the ecosystem.

Add the Playwright MCP server

You manage MCP servers through Customize in the sidebar. Servers configured for your repositories or Copilot CLI may already be available in the app, so check before adding a duplicate. The app customization documentation covers the available options.

  1. Select Customize in the sidebar.
  2. Select MCP, then check Installed for an existing Playwright server.
  3. If needed, find Playwright among the available servers, or use the custom-server flow documented by the publisher.
  4. Review the publisher, configuration, and any installation prompts before approving them. Follow the prompts to add the server; organization policy or missing prerequisites can block setup.
  5. Return to the filtering session in Interactive mode and confirm the Playwright MCP tools are available.

If setup fails, resolve the configuration or permission issue before continuing.

Ask Copilot to explore the feature via Playwright

The issue and your planning decisions are already in context. Stop any dev server you started earlier before asking Copilot to start one.

  1. Use the following prompt to ask Copilot to validate the new functionality:

    Start the app and use Playwright MCP to check filtering against the issue and our plan. Tell me what works and what doesn't, without making changes. Stop the server you started when you're done.
  1. Sit back and watch!

Copilot will start the server, open a browser, and interact with the website! Once it’s done, it’ll stop the server and give you a report.

Summary and next steps

Congratulations, you used the Playwright MCP server to explore your feature in a real browser from the GitHub Copilot app! To recap, you:

  • learned what Model Context Protocol (MCP) is and how the GitHub Copilot app uses it.
  • added the Playwright MCP server.
  • asked the agent to drive a browser and explore your filtering feature.

Next, you’ll create a QA custom agent that brings the skill and browser tools together in a specialist role.