How do I get better Playwright tests from GitHub Copilot?

Four techniques produce significantly better output: (1) Open your Page Object file alongside the test file — Copilot reads open files as context and will use your POM methods rather than raw Playwright calls. (2) Write a detailed comment above the test describing the exact flow before letting Copilot complete it. (3) Use Copilot Chat with slash commands like /tests and provide the user story or acceptance criteria as context. (4) Specify your locator preference in the comment (e.g., 'use data-test attributes') so Copilot doesn't default to brittle CSS selectors.

Playwright + GitHub Copilot: AI Test Generation Guide 2026

Q: Can GitHub Copilot write Playwright tests?

Yes. GitHub Copilot can generate Playwright test scaffolding, complete test functions from comments, suggest locators based on your Page Object structure, and write assertions. It works best when you provide clear context — existing page objects, a descriptive comment above the test, or a Copilot Chat prompt describing the scenario. Expect 60–80% of the generated code to be usable, with manual cleanup required for locator accuracy and edge case coverage.

Q: What is the difference between GitHub Copilot and Claude AI for Playwright testing?

GitHub Copilot excels at inline code completion and autocomplete within your editor — it's fast and frictionless for completing functions you've started. Claude AI (especially with MCP Server integration) excels at generating entire test suites from a live browser session, understanding page structure without you describing it, and reasoning about complex multi-step flows. For routine test authoring, Copilot saves time. For generating tests from scratch on unfamiliar pages, Claude with MCP is significantly more accurate.

Q: Is GitHub Copilot free for Playwright testing?

GitHub Copilot offers a free tier with 2,000 code completions and 50 Copilot Chat messages per month as of 2026. This is sufficient for individual developers getting started. For teams and power users, Copilot Individual costs $10/month and Copilot Business costs $19/user/month, both with unlimited completions. VS Code, JetBrains IDEs, and Neovim all support Copilot.

Q: Can Copilot fix flaky Playwright tests?

Copilot Chat can diagnose flakiness patterns when you paste the failing test and error message. It reliably suggests adding explicit waits (waitForSelector, waitForLoadState), replacing hardcoded timeouts with Playwright's auto-waiting assertions (toBeVisible, toBeEnabled), and switching from positional locators to stable data-test attributes. It cannot access the actual DOM of your application, so it can't detect timing issues caused by specific network conditions or rendering behavior — that requires a tool like Claude with MCP Server that can inspect the live page.

GitHub Copilot launched as a code autocomplete tool. In 2026, it's a full AI coding assistant with inline completions, a chat interface, slash commands, workspace-aware context, and tight integration with VS Code's test runner. For Playwright specifically, it can generate test stubs, suggest locators, write assertions, and diagnose why a test is failing.

But it also has real limitations — limitations that matter when you're on a deadline trying to cover a complex checkout flow on an unfamiliar app. This guide tells you exactly what Copilot does well, where it falls short, and how to combine it with other AI tools to get the most out of your testing workflow.

What This Guide Covers

Setting up Copilot for Playwright in VS Code
Inline completion workflows for test authoring
Copilot Chat prompts that actually work
Generating Page Object Model classes
Using Copilot to fix flaky tests
Copilot for BDD step definitions
Writing test data and fixtures with AI
Copilot vs Claude AI — detailed comparison

1. Setup: Copilot + VS Code + Playwright

Install the GitHub Copilot extension

Open VS Code → Extensions (Ctrl+Shift+X)
Search GitHub Copilot and install (publisher: GitHub)
Also install GitHub Copilot Chat for the chat panel
Sign in with your GitHub account when prompted

You'll see the Copilot icon in the VS Code status bar. A spinning indicator means Copilot is generating a suggestion. A solid icon means it's active and waiting.

Install the Playwright VS Code extension

The official Playwright Test for VS Code extension (publisher: Microsoft) pairs well with Copilot. It gives you:

A test explorer panel to run individual tests with a click
The Codegen recorder (Record new button) that generates raw Playwright code from browser interactions
Inline test results and failure annotations in the editor

Workflow tip: Use Playwright's Codegen recorder to capture the raw interaction sequence, then use Copilot to refactor the generated code into clean Page Object methods and proper assertions. This combination is faster than either tool alone.

Copilot plan options in 2026

Free — 2,000 completions + 50 Copilot Chat messages/month. Enough to evaluate the tool
Copilot Individual — $10/month, unlimited completions and chat
Copilot Business — $19/user/month, adds IP protection, audit logs, and policy controls for enterprise teams

2. How Copilot Reads Your Codebase

Copilot's suggestions are only as good as the context it can read. Understanding what it sees — and what it doesn't — is the key to getting useful output.

What Copilot reads:

The current file you're editing (full content)
Other files open in editor tabs (up to a token limit)
Files in the same directory (partial)
Recently edited files in the workspace
The comment or code directly above your cursor

What Copilot does NOT read:

Files not open in your editor (unless using Copilot Workspace features)
The live DOM of your web application
Network requests or API responses from your running app
Browser state or cookies

The most important practical implication: open your Page Object files before writing tests. If Copilot can see your LoginPage.ts, it will use loginPage.fillCredentials() in its suggestions. If it can't, it will generate raw page.fill('#username', ...) calls that bypass your POM entirely.

Do this

Open LoginPage.ts, CheckoutPage.ts, and playwright.config.ts in tabs before asking Copilot to write tests that use those pages. Context = better suggestions.

Not this

Start a new test file with only a blank editor open. Copilot will fall back to generic patterns using raw page.locator() calls and class selectors you don't use in your codebase.

3. Inline Completions: Writing Tests Faster

Copilot's inline completion is its fastest workflow. You write a comment or the first line of a test, and Copilot completes the rest. The trick is giving it enough information to generate something useful.

Comment-driven test generation

Write a descriptive comment above the test block, then let Copilot complete it. The more specific the comment, the better the output:

tests/login.spec.ts — comment before completion

import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

// Test: user with valid credentials logs in successfully,
// is redirected to /dashboard, and sees a welcome message
// with their username. Uses LoginPage POM. Uses data-test selectors.
test('valid login redirects to dashboard', async ({ page }) => {
  // ↑ Press Tab here — Copilot completes the rest

With your LoginPage.ts open in a tab, Copilot will produce something close to:

Copilot completion (typical output)
test('valid login redirects to dashboard', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.fillCredentials('standard_user', 'secret_sauce');
  await loginPage.submit();

  await expect(page).toHaveURL(/dashboard/);
  await expect(page.locator('[data-test="welcome-message"]'))
    .toContainText('standard_user');
});
          

That's 80% of a real, usable test from a 3-line comment. You'd still need to verify the data-test attribute exists in your actual DOM and check the welcome message copy — but the structure is correct and you didn't type a single Playwright API call by hand.

Completing test suites

After the first test is written, Copilot infers the pattern and can complete an entire describe block. Start the next test with a comment, press Tab, and Copilot reads the existing tests as context:

tests/login.spec.ts — describe block pattern
test.describe('Login page', () => {

  // Test 1: successful login — already written above

  // Test 2: invalid credentials show error message
  // Test 3: empty username shows "Username is required" validation
  // Test 4: empty password shows "Password is required" validation
  // Test 5: locked_out_user sees account locked message

});
          

Pressing Tab after each comment generates the next test. By the time Copilot has seen two similar tests, the pattern is established and subsequent suggestions are increasingly accurate.

4. Copilot Chat: Prompts That Work

Copilot Chat (Ctrl+Shift+I or click the chat icon) lets you describe what you need in plain English. It's more powerful than inline completion for generating entire files or explaining complex test logic.

Slash commands for testing

Copilot Chat has built-in slash commands that trigger specialized modes:

/tests — generate tests for a selected function or file
/explain — explain what a test or function does
/fix — suggest a fix for a failing test or error
/doc — generate JSDoc comments for a test file

High-signal prompts for Playwright

Generic prompts produce generic tests. These prompt patterns consistently produce better output:

Prompt: Generate a full test suite

Generate a Playwright TypeScript test suite for the checkout flow. The flow has 3 steps: cart review, shipping details form, payment confirmation. Use the CheckoutPage POM class (open in editor). Use data-test attributes for all locators. Include happy path, empty form validation, and invalid card number tests. Use test.describe and beforeEach for shared setup.

Prompt: Generate a Page Object class

Create a Playwright TypeScript Page Object class for a product listing page. The page has: a search input with data-test="search-input", a grid of product cards (data-test="product-card"), each card has a title (data-test="product-title"), price (data-test="product-price"), and an "Add to cart" button (data-test="add-to-cart"). Include methods: search(query), getProductCount(), addToCart(productName), getProductPrice(productName).

Prompt: Fix a flaky test

This Playwright test is flaky — it passes 70% of the time and fails with "element not found" or "timeout exceeded". Here is the test: [paste test]. Here is the typical error: [paste error]. Identify the root cause and rewrite the test using Playwright's built-in auto-waiting assertions instead of explicit waits or fixed timeouts.

Prompt: Generate BDD step definitions

Generate Playwright TypeScript step definitions for these Gherkin steps using the playwright-bdd library and the LoginPage POM class (open in editor): "Given I am on the login page", "When I enter username {string} and password {string}", "When I click the login button", "Then I should be redirected to the dashboard", "Then I should see an error message {string}".

Always specify the locator strategy in your prompt. Without it, Copilot defaults to a mix of .class-name selectors, XPath, and occasionally getByRole. Adding "use data-test attributes" or "use ARIA roles with getByRole" steers it toward the locator strategy your codebase actually uses.

5. Generating Page Object Model Classes

Copilot is excellent at scaffolding Page Object classes once you give it the element inventory. The fastest workflow: describe the page elements in a comment block, then let Copilot generate the full class.

pages/SearchPage.ts — comment-driven POM generation

/**
 * SearchPage — Product search and results page
 *
 * Elements:
 * - Search input: data-test="search-input"
 * - Search button: data-test="search-btn"
 * - Results count: data-test="results-count"
 * - Product cards: data-test="product-card" (multiple)
 *   - Title: data-test="product-title" (inside card)
 *   - Price: data-test="product-price" (inside card)
 *   - Add to cart: data-test="add-to-cart" (inside card)
 * - No results message: data-test="no-results"
 * - Loading spinner: data-test="search-spinner"
 *
 * Methods needed:
 * - search(query: string)
 * - getResultsCount(): Promise<number>
 * - getProductTitles(): Promise<string[]>
 * - addToCart(productName: string)
 * - waitForResults()
 * - isNoResultsVisible(): Promise<boolean>
 */

import { Page, Locator } from '@playwright/test';
// ↑ Press Enter — Copilot generates the full class below

Copilot will generate a complete, typed POM class with all the methods described. The output typically needs two types of review:

Locator accuracy — verify data-test attribute values match your actual DOM. Copilot invents plausible-sounding values
Method logic — methods like getResultsCount() may need adjustment (e.g., Copilot might parse text rather than count elements)

Never trust locators without verification. Copilot generates locators that look correct but are based on the attribute names you provided in comments — not the actual DOM. Always run the test once in headed mode (--headed) and use the Playwright inspector (page.pause()) to verify each locator resolves to the right element before committing the file.

6. Using Copilot to Fix Flaky Tests

Copilot Chat is one of the fastest ways to get a second opinion on a flaky test. Paste the test and the error, and ask for a diagnosis. It reliably catches the most common Playwright flakiness patterns.

Common flakiness patterns Copilot catches well

Flaky test — before Copilot fix
test('product appears in search results', async ({ page }) => {
  await page.goto('/search');
  await page.fill('#search-input', 'playwright');
  await page.click('#search-btn');

  // ❌ Fails intermittently — results load asynchronously
  await page.waitForTimeout(2000);

  const count = await page.locator('.product-card').count();
  expect(count).toBeGreaterThan(0);
});
          

After Copilot /fix — using auto-waiting
test('product appears in search results', async ({ page }) => {
  await page.goto('/search');

  // Use getByRole/getByTestId for resilient locators
  await page.getByTestId('search-input').fill('playwright');
  await page.getByTestId('search-btn').click();

  // ✅ Wait for the spinner to disappear before checking results
  await page.getByTestId('search-spinner').waitFor({ state: 'hidden' });

  // ✅ Use auto-waiting assertion — retries until condition is true
  await expect(page.getByTestId('product-card')).toHaveCount(
    expect.arrayContaining(expect.objectContaining({})),
    { minimum: 1 }
  );
  // Simpler version Copilot often suggests:
  await expect(page.getByTestId('product-card').first()).toBeVisible();
});
          

Flakiness patterns Copilot catches reliably

waitForTimeout() → replace with auto-waiting assertions
Acting on elements before they're interactive → add waitFor({ state: 'visible' })
Race conditions after navigation → add waitForLoadState('networkidle')
Brittle CSS class selectors → suggest data-test attributes or ARIA roles
Missing await on async calls → caught immediately

Flakiness patterns Copilot misses

Element present in DOM but not visible due to CSS transforms or opacity — Copilot can't see the rendered state
Race conditions specific to your app's network timing or backend response variability
Shadow DOM elements that aren't reachable with standard Playwright locators
Test pollution from shared state between parallel workers

For these cases, you need a tool that can inspect the live page. See the Claude AI section below.

7. Generating Test Data and Fixtures

Copilot excels at generating test data structures and Playwright fixture files — tasks that are tedious to write by hand but follow clear patterns that Copilot recognizes immediately.

Test data factory

Copilot Chat prompt

Generate a TypeScript test data factory for an e-commerce app. Create functions that return typed objects for: User (name, email, password, address), Product (name, price, sku, category), and Order (user, products[], shippingAddress, paymentMethod). Each function should generate realistic fake data using randomization so no two calls return identical data. No external libraries — use Math.random() and template strings.

helpers/testData.ts — typical Copilot output
const firstNames = ['Alice', 'Bob', 'Carol', 'David', 'Emma'];
const lastNames  = ['Smith', 'Jones', 'Williams', 'Brown', 'Taylor'];
const domains    = ['example.com', 'testmail.io', 'qa-test.net'];

function pick<T>(arr: T[]): T {
  return arr[Math.floor(Math.random() * arr.length)];
}

function randInt(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

export function createUser() {
  const first = pick(firstNames);
  const last  = pick(lastNames);
  const id    = randInt(1000, 9999);
  return {
    name:     `${first} ${last}`,
    email:    `${first.toLowerCase()}.${last.toLowerCase()}${id}@${pick(domains)}`,
    password: `Test@${id}!`,
    address: {
      street: `${randInt(1, 999)} Oak Street`,
      city:   pick(['New York', 'Austin', 'Chicago', 'Seattle']),
      zip:    `${randInt(10000, 99999)}`,
    },
  };
}
          

Playwright fixtures

fixtures/fixtures.ts — Copilot completes from comment
// Playwright fixtures: extend base test with
// authenticatedPage (pre-logged-in browser context),
// loginPage (LoginPage POM instance),
// checkoutPage (CheckoutPage POM instance).
// authenticatedPage should use storageState to bypass UI login.

import { test as base, expect } from '@playwright/test';
import { LoginPage } from ''../pages/LoginPage';
// ↑ Tab — Copilot generates the full fixture extension
          

8. Copilot vs Claude AI: Which to Use When

In 2026, most senior QA engineers use both. They're complementary tools, not competitors. Understanding the difference tells you which to reach for depending on what you're trying to do.

Capability	GitHub Copilot	Claude AI + MCP Server
Inline autocomplete	Copilot wins — native IDE integration, zero friction	Not designed for this
Test generation speed	Copilot wins — suggestions appear as you type	Slower (chat-based), but more thorough
Locator accuracy	Invents plausible locators — must verify manually	Claude + MCP wins — reads the live DOM directly
Unfamiliar app coverage	Limited — can't see the app structure	Claude + MCP wins — navigates the actual app
Complex multi-step flows	Works with detailed prompts	Claude + MCP wins — can explore the flow itself
Fixing known flaky patterns	Copilot wins — fast, inline, no context switching	More powerful but more setup
POM scaffolding	Tie — both generate good POM classes with the right prompt	Tie — Claude uses actual page structure
Existing codebase awareness	Good — reads open files in editor	Claude Code wins — full repo access
Setup required	Copilot wins — just install the extension	Requires MCP Server configuration
Cost	$10–$19/user/month	Claude Pro: $20/month (includes Claude Code)

The recommended workflow for 2026

Day-to-day test authoring (features you know) → Copilot inline completion with your POM open
New feature, unfamiliar page → Claude + MCP Server to generate the initial test suite from the live app
Fixing a flaky test (known pattern) → Copilot Chat /fix with the test pasted
Fixing a flaky test (unknown cause) → Claude to inspect the live page behavior
POM scaffolding for known elements → Copilot Chat with element inventory
Full test suite generation from scratch → Claude + MCP Server

The real efficiency gain comes from not being religious about one tool. Copilot handles the 80% of routine test authoring where you already know the page structure. Claude handles the 20% where you need actual page intelligence. Together, they eliminate most of the manual typing that used to make test authoring the bottleneck.

9. Copilot Workspace Features for QA

Beyond inline completion, Copilot has several workspace-level features that benefit QA engineers specifically.

Copilot Edits (multi-file changes)

Copilot Edits lets you describe a change that spans multiple files. Useful for QA tasks like:

Copilot Edits prompt example

Add a new "forgot password" flow to the test suite. Create a ForgotPasswordPage POM in src/pages/, write 3 tests in tests/forgot-password.spec.ts covering: valid email submission, invalid email validation, and the success confirmation message. Follow the same patterns as LoginPage.ts and login.spec.ts.

Copilot Edits reads your existing files, generates the new POM and test file, and presents a diff for you to review before applying. It's effectively Copilot Chat that can write directly to disk.

@workspace context

In Copilot Chat, prefix your message with @workspace to ask questions across your entire codebase — not just open files:

@workspace prompt

@workspace Which pages in the application don't have a corresponding Page Object class in src/pages/? List them and suggest which tests might be missing coverage.

@workspace prompt

@workspace Find all tests that use waitForTimeout() or page.waitForTimeout() and list the files and line numbers. These are flakiness candidates.

These queries help you find coverage gaps and technical debt across a large test suite without manually scanning files.

10. Best Practices for Copilot + Playwright

Always open your POM files before writing tests

Copilot's context window includes open editor tabs. With your Page Object files visible, Copilot uses your methods and naming conventions instead of generating raw Playwright calls. This is the single biggest quality multiplier for Copilot-assisted test authoring.

Specify your locator strategy in every prompt

Without guidance, Copilot mixes locator strategies — sometimes data-test, sometimes CSS class, sometimes XPath. Decide on one strategy per project (prefer data-test attributes or ARIA roles) and state it explicitly in your comments and Copilot Chat prompts. Consistency is what makes AI-generated tests maintainable long-term.

Verify every locator in headed mode before committing

Copilot generates syntactically correct locators based on the names you provide — it cannot verify they resolve to real DOM elements. Run npx playwright test --headed --timeout 0 with a page.pause() call to step through each locator in the Playwright Inspector. Find the DOM node, confirm the attribute, then remove the pause. 5 minutes of verification prevents 50 minutes of debugging later.

Review generated assertions — Copilot under-asserts

Copilot tends to generate tests with one or two assertions at the end. A real test for a checkout confirmation page should assert the order number, the product name, the price, the delivery estimate, and the confirmation email address. Review every generated test and ask: "What else could break on this page that isn't currently asserted?"

Use Copilot for repetitive test patterns, not complex flows

Copilot is fastest on tests that follow established patterns (login, form validation, CRUD operations). For novel flows — multi-page wizards, drag-and-drop interactions, complex state management, iframe-heavy pages — its suggestions are less reliable. Invest your manual authoring time on edge cases; use Copilot to handle the pattern-matching work.

FAQ

Can GitHub Copilot write Playwright tests?

Yes. Copilot generates Playwright test scaffolding, completes test functions from descriptive comments, suggests locators based on your Page Object structure, and writes assertions. Expect 60–80% of the output to be usable without changes. Always verify locators against the real DOM — Copilot invents plausible values rather than reading the live page.

What is the difference between GitHub Copilot and Claude AI for Playwright?

Copilot excels at inline autocomplete — it's fast, frictionless, and lives in your editor. Claude AI with MCP Server reads the live DOM of your running app, generating locators and test flows from the actual page structure rather than your description of it. Use Copilot for routine test authoring on familiar pages. Use Claude for generating tests on unfamiliar pages or complex flows where accurate locators matter from the start.

Is GitHub Copilot free for Playwright testing?

Copilot offers a free tier with 2,000 code completions and 50 Copilot Chat messages per month. Individual plan is $10/month for unlimited completions. Business plan is $19/user/month with enterprise controls. VS Code, JetBrains IDEs, and Neovim are all supported.

How do I get better Playwright tests from Copilot?

Four techniques make the biggest difference: (1) open your POM files in editor tabs before generating tests, (2) write a detailed descriptive comment above the test function before pressing Tab, (3) specify your locator strategy in every prompt ("use data-test attributes"), (4) use Copilot Chat with user stories or acceptance criteria as context rather than vague "write me a test" prompts.

Can Copilot fix flaky Playwright tests?

Yes, for common patterns: replacing waitForTimeout() with auto-waiting assertions, adding waitFor({ state: 'visible' }), switching to stable locators. Paste the failing test and error message into Copilot Chat and use /fix. For unusual flakiness caused by app-specific timing or Shadow DOM, you'll need a tool that can inspect the live page — Copilot can't access your running application.

Does GitHub Copilot work with Playwright's TypeScript config?

Yes. Copilot reads your tsconfig.json and playwright.config.ts as context, adapting its suggestions to your TypeScript configuration, base URL, test directory, and reporter settings. If you have custom fixtures or extended types, open those files in editor tabs and Copilot will incorporate them into test generation.

Asim Noaman

Senior QA Automation Engineer & AI Testing Specialist

Connect on LinkedIn →

Playwright + Claude AI Course

Go Beyond Copilot — Use Claude AI to Generate Tests From the Live Page

Copilot completes what you start. Claude AI with MCP Server reads the actual DOM and writes complete, accurate test suites without you describing a single locator. The course shows you both tools and how to use them together — plus TypeScript, Page Object Model, API testing, and a full E2E framework built on a real project.

Claude AI + MCP Server generates tests from the live browser
Locators verified against the real DOM — not invented from descriptions
Full framework: TypeScript, POM, API testing, CI/CD
Real e-commerce project — portfolio-ready from day one

Enroll on Udemy →

Playwright + GitHub Copilot: AI Test Generation Guide 2026

What This Guide Covers

1. Setup: Copilot + VS Code + Playwright

Install the GitHub Copilot extension

Install the Playwright VS Code extension

Copilot plan options in 2026

2. How Copilot Reads Your Codebase

3. Inline Completions: Writing Tests Faster

Comment-driven test generation

Completing test suites

4. Copilot Chat: Prompts That Work

Slash commands for testing

High-signal prompts for Playwright

5. Generating Page Object Model Classes

6. Using Copilot to Fix Flaky Tests

Common flakiness patterns Copilot catches well

Flakiness patterns Copilot catches reliably

Flakiness patterns Copilot misses

7. Generating Test Data and Fixtures

Test data factory

Playwright fixtures

8. Copilot vs Claude AI: Which to Use When

The recommended workflow for 2026

9. Copilot Workspace Features for QA

Copilot Edits (multi-file changes)

@workspace context

10. Best Practices for Copilot + Playwright

FAQ

Can GitHub Copilot write Playwright tests?

What is the difference between GitHub Copilot and Claude AI for Playwright?

Is GitHub Copilot free for Playwright testing?

How do I get better Playwright tests from Copilot?

Can Copilot fix flaky Playwright tests?

Does GitHub Copilot work with Playwright's TypeScript config?

Go Beyond Copilot — Use Claude AI to Generate Tests From the Live Page

Related Posts