DevOps & Tooling · Windsurf Cascade
Playwright End-to-End Testing Windsurf Cascade Rules
Generate Windsurf Cascade rules for Playwright End-to-End Testing in .windsurf/rules/, with the stack's conventions and checks.
- Path
- .windsurf/rules/playwright-e2e.md
- Loads
- Per-rule trigger
- Format
- Markdown with frontmatter (.md)
- Used by
- Windsurf Cascade
What this file tells the agent
Windsurf's Cascade agent reads rules from .windsurf/rules/. This rule gives Cascade the Playwright End-to-End Testing conventions, commands and patterns to avoid, so its edits follow the stack instead of generic or outdated defaults.
- 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 .windsurf/rules/playwright-e2e.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
Cascade reads rules in .windsurf/rules/ and applies this one according to its trigger.
$ mkdir -p ".windsurf/rules" && curl -fsSL "https://www.devscratchpad.tech/api/raw/windsurf-rules/playwright-e2e" -o ".windsurf/rules/playwright-e2e.md"
writes .windsurf/rules/playwright-e2e.md
.windsurf/rules/playwright-e2e.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 do I save this Windsurf rule?
- Save it as .windsurf/rules/playwright-e2e.md in your project. Cascade picks up rules in that folder automatically.
- When does Windsurf apply this rule?
- According to the trigger in its frontmatter: always on, on a glob match, when Cascade decides the description fits the task, or when you @-mention it.