DevOps & Tooling · Copilot Chat, code review, coding agent
Playwright End-to-End Testing GitHub Copilot Instructions
Generate .github/copilot-instructions.md repository rules for Playwright End-to-End Testing.
- Path
- .github/copilot-instructions.md
- Loads
- Whole repository
- Format
- Markdown (.md)
- Used by
- Copilot Chat, code review, coding agent
What this file tells the agent
GitHub Copilot adds .github/copilot-instructions.md to Copilot Chat, code review and coding agent requests in the repository. Writing down the Playwright End-to-End Testing conventions there means Copilot's answers and reviews follow your project's patterns instead of generic ones.
- Strictly ban hardcoded delays (page.waitForTimeout()); rely exclusively on Playwright web-first auto-waiting assertions (expect(locator).toBeVisible()).
- Prioritize user-facing accessible locators: page.getByRole(), page.getByLabel(), and page.getByTestId(); never write fragile CSS selectors or brittle XPaths.
- Encapsulate multi-step interactions inside modular Page Object Models (POM) with typed parameters.
- Ensure total test isolation: authenticate via storage state (storageState) instead of repeating manual UI logins in every test.
- Configure trace viewer and video capture on first retry (trace: 'on-first-retry') for painless CI debugging.
Code to avoid, and what to write instead
The rule steers the agent away from the left and toward the right.
// Flaky: Brittle selectors, arbitrary sleep timeouts, and no auto-waiting
test("bad test", async ({ page }) => {
await page.goto("/catalog");
await page.click("div.col-md-4 > button:nth-child(2)"); // Breaks on minor CSS tweak!
await page.waitForTimeout(5000); // Flaky anti-pattern!
const text = await page.innerText("#cart-total");
expect(text).toBe("1");
});import { test, expect } from "@playwright/test";
test.describe("Checkout Flow", () => {
test("allows user to complete cart purchase", async ({ page }) => {
await page.goto("/catalog");
// Accessible, user-facing locators
await page.getByRole("button", { name: "Add to Cart" }).first().click();
await page.getByRole("link", { name: "Cart (1)" }).click();
// Auto-waiting assertions
await expect(page.getByRole("heading", { name: "Your Shopping Cart" })).toBeVisible();
await page.getByRole("button", { name: "Proceed to Checkout" }).click();
await expect(page).toHaveURL(/.*checkout/);
});
});Install it in one command
- 01
Go to your project root
The file goes at .github/copilot-instructions.md, relative to the root.
- 02
Download the file
Run the command on the right. It downloads this preset and writes the file.
- 03
Make sure it gets used
Copilot Chat, Copilot code review and the coding agent add the file to requests in this repository. It does not change completions as you type.
$ mkdir -p ".github" && curl -fsSL "https://www.devscratchpad.tech/api/raw/copilot-instructions/playwright-e2e" -o ".github/copilot-instructions.md"
writes .github/copilot-instructions.md
.github/copilot-instructions.md
To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.
More for Playwright End-to-End Testing
Questions
- Where should this Copilot instruction file be stored?
- Save it as .github/copilot-instructions.md in your repository. Copilot Chat, Copilot code review and the Copilot coding agent use it; completions as you type do not.
- Does this apply to all team members?
- Yes. Once the file is on the default branch, Copilot uses it for everyone working in the repository.