A Quick Guide to POM with Playwright MCP and GitHub Copilot

Test automation is an important part of modern software development, but maintaining test scripts for dynamic web applications can be a challenge. That’s why POM (Page Object Model) is a suitable design pattern that makes test suites structured, reusable, and maintainable. Now, with the rise of AI tools like GitHub Copilot and large language models (LLMs) and creating test frameworks—especially Playwright’s Model Context Protocol (MCP)—has become smoother and faster. This post walks you through how to use these tools, along with Playwright MCP, to rapidly scaffold reliable, maintainable POMs.

What You’ll Use

Here’s the tech stack:

• GitHub Copilot: Your AI pair programmer that suggests code.
• Playwright MCP (Model-based Control Protocol): and Playwright MCP, a modern approach to turning your test code into smarter, context-aware test agents.

1. What is Github Copilot

Now, about Copilot — it’s not a tool, it’s a AI generator. It’s like having a junior dev who never sleeps and helps you:
• Auto-generate Playwright test templates
• Suggest locators, actions, even assertions
• Keep your POMs consistent and DRY (Don’t Repeat Yourself)

In automation testing, Copilot shines by:
• Reducing code
• Speeding up POM creation
• Helping you think in terms of abstraction (if you know what you want, Copilot will code it)

2. What is Playwright MCP

Playwright MCP (Model Context Protocol) is an open-source server that acts as a bridge between Large Language Models (LLMs) and the Playwright browser automation library. Playwright MCP (Model Context Protocol) enables AI models to interact with external systems, such as browsers, APIs, or databases. Instead of writing brittle, static tests, MCP helps you:
• Encapsulate business logic and UI behaviors
• Enable your tests to reason based on context
• Define reusable “models” for different parts of your application.

3. Step-by-Step Guide: Building a POM with Playwright MCP and Copilot (Login Page)

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 latest. Download from code.visualstudio.com.
• Install the GitHub Copilot extension in VS Code via the Extensions Marketplace.

Step 2: Project Setup

npm init playwright@latest my-mcp-project
cd my-mcp-project
npm install

Install MCP (assume it’s available via a helper package or your setup):

npm install @playwright-mcp/core

Note: If MCP isn’t publicly available, you can simulate its pattern using standard POM conventions with helper contexts.

Step 3: Create the Page Object Model (LoginModel.ts)

Let Copilot help you! And Copilot will often autofill methods like fillUsername, fillPassword, and submit() — because it knows you’re about to do typical login stuff. You just need to name things well and it picks up the context.

// models/LoginModel.ts
import { Page } from '@playwright/test';

export class LoginModel {
  constructor(private page: Page) {}

  async gotoLoginPage() {
    await this.page.goto('/login');
  }

  async fillUsername(username: string) {
    await this.page.fill('#username', username);
  }

  async fillPassword(password: string) {
    await this.page.fill('#password', password);
  }

  async submit() {
    await this.page.click('button[type="submit"]');
  }

  async loginAs(user: { username: string; password: string }) {
    await this.gotoLoginPage();
    await this.fillUsername(user.username);
    await this.fillPassword(user.password);
    await this.submit();
  }
}

Copilot can help autocomplete method names and types based on your naming conventions.

Step 4: Write the Test Using MCP-style Context

• 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"]
      }
    }
  },
}

Or use this command

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

After that, use Copilot to make the test use MCP-style Context

// tests/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginModel } from '../models/LoginModel';

test.describe('Login Tests', () => {
  test('user can log in with valid credentials', async ({ page }) => {
    const login = new LoginModel(page);

    await login.loginAs({ username: 'testuser', password: 'testpass' });

    await expect(page).toHaveURL('/dashboard');
    await expect(page.locator('text=Welcome')).toBeVisible();
  });
});

This is where MCP-style thinking shines. Instead of hardcoding UI actions, the LoginModel encapsulates the logic.

Step 5: Add Context-Awareness (Fake MCP Example)

If you’re going full MCP-style, you’ll want to think in user flows — not isolated actions.
Here’s an example:

• LoginModel → handles login page
• DashboardModel → verifies login success
• Agent (or Scenario class) → combines them: “login and land on dashboard”

That way, in your test, instead of scripting each detail, you just say:

// models/AppAgent.ts
import { LoginModel } from './LoginModel';

export class AppAgent {
  constructor(public login: LoginModel) {}

  async loginAndVerify(username: string, password: string) {
    await this.login.loginAs({ username, password });
    // Maybe wait for specific dashboard UI element
  }
}

Use this in your tests:

const app = new AppAgent(new LoginModel(page));
await app.loginAndVerify('admin', 'admin123');

4. Advantages of using POM with Copilot and MCP

Without POM	With POM + Copilot + MCP
Tests are full of selectors	Tests are full of intention
Repetition everywhere	Reuse and encapsulation
Hard to update when UI changes	Update one model, done
Writing takes hours	Copilot speeds it up
Tests feel like code	Tests feel like stories

POM isn’t new — but with Playwright MCP, it becomes more contextual and reusable. And with GitHub Copilot, you don’t need to start from scratch every time. You can focus on writing better test flows, while the AI fills in the gaps. And this approach is perfect for:

• Teams scaling automation
• Reducing test duplication
• Building modular, smart testing agents