Menu
write, debug, and maintain Playwright end-to-end tests for web applications. Use when working with
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/LuizEduPP/Rememb --skill playwrightThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| name | playwright |
| description | write, debug, and maintain Playwright end-to-end tests for web applications. Use when working with |
playwright.config.ts (see references/configuration.md)Load based on context:
| Topic | Reference | Load When |
|---|---|---|
| Locators & Actions | references/locators-and-actions.md | Writing selectors, filling forms, clicking, drag-and-drop |
| Test Organization | references/test-organization.md | Fixtures, parallel execution, retries, sharding, timeouts, annotations |
| Authentication | references/authentication.md | Login flows, multi-role tests, storageState |
| Network & Mocking | references/network-and-mocking.md | API mocking, route interception, HAR recording, API testing |
| Visual Testing | references/visual-testing.md | Screenshots, snapshots, ARIA snapshots, visual regression |
| Debugging | references/debugging.md | Flaky tests, trace viewer, UI mode, debug flags |
| Configuration | references/configuration.md | playwright.config.ts, projects, web server, CI/CD, reporters |
| Advanced | references/advanced.md | Clock mocking, evaluate, component testing, POM, accessibility |
getByRole() > getByLabel() > getByTestId() > getByText() (in priority order)await expect(locator).toBeVisible() (auto-retries)trace: 'on-first-retry' for debugging failuresfullyParallel: true for speedforbidOnly: !!process.env.CI to prevent .only leaking to CIwaitForTimeout() — always use proper auto-waiting assertionsexpect(await locator.isVisible()).toBe(true) — this does NOT auto-retry; use await expect(locator).toBeVisible() insteadBrowserContext)first()/nth() without narrowing first — filter or chain locators insteadexpect(locator) retries. expect(await locator.something()) evaluates once.has-text pseudo-class: Without another CSS specifier, matches everything including <body>. Always combine with an element selector.getByText whitespace: Always normalizes whitespace, even with exact: true.opacity: 0: Considered visible. Zero-size elements are NOT visible.fill() actionability: Checks Visible + Enabled + Editable only. Does NOT check Stable or Receives Events.press()/pressSequentially(): NO actionability checks at all.storageState: Covers cookies, localStorage, IndexedDB. Does NOT cover sessionStorage.tsc separately.expect.toPass timeout: Defaults to 0 (no retry), NOT the expect timeout.* does not match /. ** matches everything. ? matches literal ? only.dragover to fire in all browsers, issue TWO mouse.move() calls.# New project
npm init playwright@latest
# Existing project
npm i -D @playwright/test
npx playwright install
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './e2e',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
webServer: {
command: 'npm run dev',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
import { test, expect } from '@playwright/test';
test('homepage has title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/My App/);
await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});
npx playwright test # Run all
npx playwright test auth.spec.ts # Run file
npx playwright test --grep @smoke # Run tagged
npx playwright test --project=chromium # Single browser
npx playwright test --debug # Debug mode (headed, timeout=0, workers=1)
npx playwright test --ui # UI mode
npx playwright show-report # HTML report
npx playwright show-trace trace.zip # View trace
npx playwright codegen localhost:3000 # Generate tests
Use this skill for the capability described in this document.
Use this skill when the request matches the capability, constraints, and activation cues described below.
Use the examples and snippets already present in this document whenever they apply to the task.
Follow the constraints, conventions, and cautions documented below, and prefer the documented path over improvisation.