1. Executive Summary
This article provides step-by-step guidance to integrate GitHub Copilot and Copilot Chat into a Playwright-based test automation workflow. It covers IDE setup (VS Code and JetBrains), resilient locator strategies, Page Object Model (POM) structure, CI/CD integration using GitHub Actions and Azure Pipelines, debugging with Playwright Trace Viewer, and prompt recipes to accelerate authoring and maintenance.
2. Scope and Audience
Intended for SDETs, QA Automation Engineers, and Principal Engineers designing or evolving a modern UI test automation framework using Playwright with AI-assisted authoring via GitHub Copilot. Assumes basic familiarity with Node.js and Git-based workflows.
3. Set up GitHub Copilot & Copilot Chat
VS Code: Install/enable GitHub Copilot and Copilot Chat (includes Ask/Inline/Agent modes). See the official setup guide. Telemetry and code matching options can be adjusted per organizational policy.
JetBrains IDEs: Install the GitHub Copilot plugin to get completions and Chat. Optionally configure Custom Instructions to align suggestions with your team’s testing standards.
· References: VS Code Copilot setup: https://code.visualstudio.com/docs/copilot/setup
· Copilot Chat in VS Code: https://code.visualstudio.com/docs/copilot/chat/getting-started-chat
· JetBrains Copilot plugin: https://plugins.jetbrains.com/plugin/17718-github-copilot
· Configure Copilot in JetBrains: https://docs.github.com/copilot/configuring-github-copilot/configuring-github-copilot-in-a-jetbrains-ide?tool=jetbrains
4. Playwright Basics for Resilient Tests
Prefer user-facing locators for stability: getByRole, getByLabel, getByText, getByTestId. Avoid brittle CSS/XPath. Follow Playwright best practices around test isolation and focusing on user-visible behavior.
· References: Locators guide: https://playwright.dev/docs/locators
· Best practices: https://playwright.dev/docs/best-practices
5. Make Your Repo Copilot‑Friendly
Add lightweight instructions so Copilot consistently follows your patterns (POM, locators, fixtures). For JetBrains, use Custom Instructions; for other IDEs, keep this in the repo README or a dedicated file.
# .github/copilot-instructions.md (example)
- Use Playwright Test (TypeScript) + fixtures.
- Prefer user-facing locators: getByRole(), getByLabel(), getByText(), getByTestId().
- Structure with Page Objects (one class per page).
- Enable trace on first retry in CI; collect HTML report artifacts.
· References: JetBrains Custom Instructions: https://devblogs.microsoft.com/java/customize-github-copilot-in-jetbrains-with-custom-instructions/
6. Sample Page Object and Test (TypeScript)
Page Object (Login page):
// pages/LoginPage.ts
import { Page, Locator, expect } from '@playwright/test';
export class LoginPage {
readonly page: Page;
readonly username: Locator;
readonly password: Locator;
readonly submit: Locator;
constructor(page: Page) {
this.page = page;
this.username = page.getByLabel('Username');
this.password = page.getByLabel('Password');
this.submit = page.getByRole('button', { name: 'Sign in' });
}
async goto() {
await this.page.goto('/login');
await expect(this.submit).toBeVisible();
}
async login(user: string, pass: string) {
await this.username.fill(user);
await this.password.fill(pass);
await this.submit.click();
}
}
Spec using the POM:
// tests/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';
test.describe('Login', () => {
test('valid credentials navigate to dashboard', async ({ page }) => {
const login = new LoginPage(page);
await login.goto();
await login.login(process.env.USER!, process.env.PASS!);
await expect(page.getByRole('heading', { name: /dashboard/i })).toBeVisible();
});
});
7. CI/CD Integration
GitHub Actions (recommended template):
# .github/workflows/playwright.yml
name: Playwright Tests
on:
push:
branches: [ main, master ]
pull_request:
branches: [ main, master ]
jobs:
test:
runs-on: ubuntu-latest
timeout-minutes: 60
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 'lts/*'
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30
Azure DevOps (Azure Pipelines) template:
# azure-pipelines.yml
name: Playwright Tests
trigger:
- main
variables:
CI: 'true'
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool@0
inputs:
versionSpec: '18.x'
displayName: 'Install Node.js'
- script: npm ci
displayName: 'Install dependencies'
- script: npx playwright install --with-deps
displayName: 'Install Playwright browsers'
- script: npx playwright test --reporter=list,junit
displayName: 'Run Playwright tests'
- task: PublishTestResults@2
displayName: 'Publish JUnit'
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/test-results/*.xml'
searchFolder: '$(System.DefaultWorkingDirectory)'
mergeTestResults: true
condition: succeededOrFailed()
- task: PublishPipelineArtifact@1
inputs:
targetPath: 'playwright-report'
artifact: 'playwright-report'
publishLocation: 'pipeline'
condition: succeededOrFailed()
· References: Playwright CI on GitHub Actions: https://playwright.dev/docs/ci-intro
· Azure Pipelines examples: https://timdeschryver.dev/blog/playwright-in-an-azure-devops-pipeline
· Deprecated GH Action notice (use CLI): https://github.com/microsoft/playwright-github-action
8. Debugging with Playwright Trace Viewer
Enable traces on the first retry and open them via the HTML report or trace.playwright.dev.
// playwright.config.ts (snippet)
import { defineConfig } from '@playwright/test';
export default defineConfig({
retries: process.env.CI ? 1 : 0,
use: { trace: 'on-first-retry' }
});
# Local
npx playwright show-report
# Or open a saved trace
npx playwright show-trace path/to/trace.zip
· References: Trace Viewer docs: https://playwright.dev/docs/trace-viewer
9. Governance, Security & Org Notes
Copilot usage with Azure DevOps: Copilot Business is available for Azure DevOps users and integrates in IDEs. Adjust Copilot telemetry/code matching settings per policy. Consider adding a CONTRIBUTING.md to codify locator strategy, POM usage, and pull-request gates (lint/tests).
· References: GitHub Copilot for Azure DevOps users: https://devblogs.microsoft.com/devops/github-copilot-for-azure-devops-users/
· VS Code Copilot setup (telemetry note): https://code.visualstudio.com/docs/copilot/setup
10. Copilot Prompt Recipes for Playwright
Use these directly in Copilot Chat (VS Code/JetBrains):
· @workspace: Create a Playwright TS test for login using Page Object pattern. Prefer getByRole/getByLabel and add assertions.
· @workspace: Refactor these CSS/XPath locators to user-facing locators; add data-testid fallbacks where needed.
· /tests: Generate negative tests for form validation (required, format, boundaries).
· Explain this flaky test and propose a more resilient locator and wait strategy (paste error and code).
· Generate an Azure Pipelines YAML to run Playwright on ubuntu-latest and publish HTML + JUnit results.
· References: Copilot Chat cheat sheet (VS Code): https://code.visualstudio.com/docs/copilot/reference/copilot-vscode-features
· GitHub Copilot Chat cheat sheet: https://docs.github.com/en/copilot/reference/cheat-sheet?tool=vscode