Playwright End-to-End Testing CLAUDE.md Generator | Free & Offline

Production-grade architectural rulebook for Playwright End-to-End Testing. Engineered to eliminate LLM hallucinations, enforce strict deterministic conventions, and prevent architectural drift across Cursor IDE, Claude Code CLI, and autonomous multi-agent pipelines.

Target Path
CLAUDE.md
Execution Scope
Root Workspace Context
Specification Format
Project Memory (.md)
AI Tool Support
Claude Code & Agent Workflows
02 / DRIFT ANALYSIS & VALUE PROPOSITION

Failure Patterns Prevented for Playwright End-to-End Testing

Without This Rule (Default LLM Behavior)Vulnerable

AI models frequently write fragile test automation scripts with brittle CSS/XPath selectors (e.g. div > span:nth-child(3)), hardcoded page.waitForTimeout() delays, and un-isolated test state, leading to flaky test suites.

Hallucination Symptoms
  • Invokes deprecated or removed APIs from older model training weights
  • Generates conflicting configuration files and invalid imports
  • Silently drops type-safety, boundaries, or transaction isolation
With This Rule (Guaranteed Invariants)Deterministic
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.
03 / VERIFIED CODE PATTERNS

Code Standards: Anti-Pattern vs Verified Implementation

Discouraged Anti-Pattern
// 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");
});
Verified Production Standard
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/);
  });
});
04 / REPOSITORY PLACEMENT & 3-STEP TERMINAL INSTALLATION

How to Install Playwright End-to-End Testing CLAUDE.md Repository Guidelines via Terminal

1

Step 1: Open Project Directory & Verify Target Placement

Open your terminal and navigate to your project root folder where the CLAUDE.md file will reside. Ensure the file is placed at the exact path below relative to your project root so the AI engine automatically loads it:

CLAUDE.md
2

Step 2: Fetch Rule File via Terminal Command

Run curl, PowerShell, or wget to stream the rule directly from the DevScratchpad raw API endpoint and write it to CLAUDE.md:

Terminal One-Liner Install

Run directly in your project root to stream and write this rule file with one command.

Raw API Stream
$curl -fsSL "https://www.devscratchpad.tech/api/raw/claude-md/playwright-e2e" -o "CLAUDE.md"
3

Step 3: Verify and Activate with AI Agent

Launch your AI coding assistant (Claude Code & Agent Workflows). The assistant will automatically discover CLAUDE.md in your repository and apply the architectural guardrails, type constraints, and verification protocols during code generation.

05 / ROUTE DIRECTORY & CROSS-TOOLING
Format Pillar HubComprehensive Manual

CLAUDE.md Repository Guidelines Directory

Inspect the complete specification manual, glob patterns, directory rules, and all available presets in our central directory.

/claude-md Directory
06 / FREQUENTLY ASKED QUESTIONS

Technical FAQ: Playwright End-to-End Testing AI Rulebooks

Why are arbitrary sleep timeouts banned?

Arbitrary delays like waitForTimeout waste CI test execution time and still fail randomly under variable network latency. Playwright auto-waiting assertions check conditions dynamically.

Why use getByRole instead of class names?

getByRole verifies that elements are accessible to screen readers and resilient to CSS redesigns.