Create Page Object model(POM) with LLM(GitHub Copilot) and Playwright MCP (Model Context Protocol)

Test automation is a critical part of modern software development, but maintaining test scripts for dynamic web applications can be a challenge. The Page Object Model (POM) is a proven design pattern that makes test suites maintainable and scalable. When paired with GitHub Copilot, an AI-powered coding assistant, and Playwright’s Model Context Protocol (MCP), you can supercharge your automation workflow with intelligent code generation and seamless tool integration.

In this blog, we’ll walk through how to create a POM-based test automation framework using Playwright , leverage GitHub Copilot to write and optimize code, and integrate Playwright MCP to enable AI-driven browser interactions. Whether you’re a QA engineer or a developer, this guide will help you build a robust, AI-enhanced testing solution.

🔧 Tip: To avoid clicking the "Continue" button repeatedly, add the following setting in your .vscode/settings.json file:

{
    "chat.tools.autoApprove": true
}

Page Object Model (POM)?

The Page Object Model is a design pattern that organizes test automation code by representing each web page or component as a class (a Page Object). These classes encapsulate the page’s elements (e.g., buttons, inputs) and interactions (e.g., clicking, typing), keeping test logic separate from UI manipulation.

Benefits of POM

• Maintainability: Update one Page Object class when the UI changes, instead of rewriting multiple tests.
• Reusability: Reuse Page Objects across test cases to reduce code duplication.
• Readability: Write clear, business-focused test scripts that are easy to understand.
• Scalability: Modular code structure supports large, complex projects.

** Get My Book On Playwright Here **

Web Automation Testing Using Playwright: End-to-end, API, accessibility, and visual testing using…

GitHub Copilot: Your AI Coding Partner

GitHub Copilot, powered by OpenAI’s Codex, is an AI-driven coding assistant integrated into IDEs like Visual Studio Code. It suggests code snippets, completes functions, and even generates entire classes based on your context or comments. For test automation, Copilot can:

• Generate boilerplate POM classes and test scripts.
• Suggest Playwright locators based on page descriptions.
• Write assertions and error-handling logic.
• Optimize existing code for better performance or readability.

Playwright MCP: Bridging AI and Automation

The Model Context Protocol (MCP) is an emerging standard (popularized by Anthropic and adopted by tools like Playwright) that enables AI models to interact with external systems, such as browsers, APIs, or databases. Think of MCP as a universal adapter that lets AI tools like Copilot control Playwright’s browser automation capabilities.

With Playwright MCP, you can:

• Automate Browser Actions: Navigate pages, click elements, or fill forms via AI-driven commands.
• Integrate with AI: Allow Copilot to dynamically generate and execute Playwright commands.
• Integrate wirh database: Combine browser automation with API calls or database queries.

Why Use GitHub Copilot, and Playwright MCP Together?

Using GitHub Copilot and Playwright MCP (Model Context Protocol) together enhances the development and testing workflow by combining AI-driven code assistance with advanced browser automation capabilities. Here’s why they are powerful when used together:

• Faster Test Creation: GitHub Copilot generates Playwright test scripts from natural language prompts, saving coding time.
• Reliable Automation: Playwright MCP uses the accessibility tree for robust, cross-browser test execution.
• Enhanced Productivity: Copilot suggests optimized code, while MCP automates browser tasks, streamlining workflows.

Step-by-Step Guide: Building a POM with GitHub Copilot and Playwright MCP

Here are the steps to set up Playwright Model Context Protocol (MCP) in Visual Studio Code for browser automation with GitHub Copilot:

Step 1 Install Prerequisites:

• Ensure Node.js (version 14 or higher) is installed. Verify with node -v and npm -v in a terminal. Download from nodejs.org if needed.
• Install Visual Studio Code (version 1.99 or later). Download from code.visualstudio.com.
• Install the GitHub Copilot extension in VS Code via the Extensions Marketplace.

Step 2 Configure Playwright MCP Server:

• In VS Code, open or create the settings.json file (File > Preferences > Settings > Open Settings (JSON)).
• Add the following configuration to enable the Playwright MCP server:

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

Step 3 Alternatively, use the command:

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

Step 4 Select Agent in Github Copilot

Once all above setup are done In GitHub Copilot select “Agent”

Step 5 Verify the installed tool

To verify the tool installed properly or not click on tool icon and verify all the avilable tools e.g browser_close,browser_resize. etc …

Create POM with GitHub Copilot and Playwright MCP

Once all above setup is done next step is to give instruction/Prompt to the LLM (GitHub Copilot)

Use Case

For demo purpose we are taking below scenario and asking GitHub Copilot and Playwright MCP to create a POM

Create a POM model for below steps
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”

Steps

1. Open the terminal
2. Create a directory e.g mkdir MCP_DEMO
3. Open the created directory in VS code

4.Now give the above use case step to Github Copilot, In the below screenshot you can see how we can create POM for the provided sites / steps is created in Few Mins.

In below screenshot we can see pages and tests class created in respected folder.

VIDEO of each steps attached below

Conclusion

GitHub Copilot and Playwright MCP helps build robust automation frameworks in significantly less time. This AI-powered setup boosts productivity by accelerating code generation and simplifying browser interactions.

However, while it streamlines development, the end user must always review and validate the generated code to ensure quality and accuracy. Despite this, the combination is a game-changer for QA engineers and developers aiming for scalable, maintainable, and intelligent test automation.