E2E Testing Agent Skill
Playwright patterns: page objects, locator best practices, CI integration, visual regression, and parallel execution.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Playwright patterns: page objects, locator best practices, CI integration, visual regression, and parallel execution.
homepage: https://yepapi.com/skills/e2e-testing
metadata:
tags: [testing, playwright, e2e, ci]
---
# E2E Testing
## Rules
- Playwright for E2E — cross-browser, auto-wait, built-in test runner, excellent CI support
- Locator priority: `getByRole()` > `getByLabel()` > `getByPlaceholder()` > `getByTestId()` > CSS selectors
- Page Object Model: encapsulate page interactions in classes — `LoginPage.login(email, password)`
- Test isolation: each test starts with fresh state — use `beforeEach` for setup, avoid test interdependence
- Auto-wait: Playwright waits for elements automatically — don't add manual `waitForTimeout()` calls
- Assertions: use `expect(locator)` web-first assertions — `toBeVisible()`, `toHaveText()`, `toHaveURL()`
- Parallel execution: tests run in parallel by default — ensure no shared mutable state between tests
- CI: run in headless mode, configure retries (`retries: 2` in CI), upload trace on failure
- Visual regression: `expect(page).toHaveScreenshot()` — update baselines with `--update-snapshots`
## Patterns
\`\`\`ts
// Page Object Model
class LoginPage {
constructor(private page: Page) {}
async goto() { await this.page.goto("/login"); }
async login(email: string, password: string) {
await this.page.getByLabel("Email").fill(email);
await this.page.getByLabel("Password").fill(password);
await this.page.getByRole("button", { name: "Sign in" }).click();
await this.page.waitForURL("/dashboard");
}
}
// playwright.config.ts
export default defineConfig({
retries: process.env.CI ? 2 : 0,
use: { trace: "on-first-retry", screenshot: "only-on-failure" },
projects: [
{ name: "chromium", use: { ...devices["Desktop Chrome"] } },
{ name: "mobile", use: { ...devices["Pixel 5"] } },
],
});
\`\`\`
## Avoid
- `page.waitForTimeout()` — use auto-wait or `waitForURL()`, `waitForResponse()`
- CSS selectors for interactive elements — use role-based locators for resilience
- Tests that depend on other tests' state — each test must be independently runnable
- Testing third-party services directly — mock external APIs with `page.route()`
- Skipping mobile viewports — test at least one mobile device in your project matrixInstall
Why Use the E2E Testing Skill?
Without this skill, your AI guesses at e2e testing patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the E2E Testing skill installed. Your AI knows the context and writes code that fits.
"Set up Playwright with page objects, CI config, and trace-on-failure"
"Write E2E tests using role-based locators and the Page Object Model pattern"
"Add visual regression testing with screenshot comparisons to my Playwright suite"
E2E Testing skill — FAQ
It provides rules for Playwright test patterns, Page Object Model, role-based locator priority, CI configuration with retries and traces, visual regression testing, and parallel execution.
Run `npx skills add YepAPI/skills --skill e2e-testing` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
Role-based locators (getByRole, getByLabel) are resilient to markup changes and ensure your app is accessible. CSS selectors break when class names or structure change. The skill enforces a locator priority hierarchy.