Skip to main content
playwright-e2e-testing Author and maintain versioned Playwright (@playwright/test) TypeScript UI specs for browser user flows. Use when asked to create, run, debug, or refactor E2E tests, form/navigation/auth flows, responsive checks, UI mocking, fixtures, Page Objects, or visual comparisons. Use api-testing for standalone REST/GraphQL contracts and playwright-cli for live browser sessions. Keywords: E2E spec, Playwright test, POM, fixtures, UI regression.
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/fugazi/test-automation-skills-agents --skill playwright-e2e-testingDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository playwright-regression-testing Govern Playwright TypeScript regression suites across many tests. Use when asked to plan, select, tier, execute, or optimize suites with risk/change analysis, tags, CI/CD, sharding, flaky-test management, or suite-health metrics; not for authoring one UI spec. Keywords: regression strategy, smoke tests, test selection, CI pipeline, flaky tests, test sharding, impact analysis, git diff.
Author and maintain versioned Selenium WebDriver tests with Java and JUnit 5. Use for creating, debugging, or running Selenium specs, implementing Page Objects, handling explicit waits, capturing screenshots, or setting up Maven test projects. Supports Chrome, Firefox, and Edge. Keywords: Selenium WebDriver, Java, JUnit 5, Page Object Model, explicit waits, Maven, screenshots.
Accessibility testing for web applications using Playwright (@playwright/test), TypeScript, and axe-core. Use to write, run, or debug WCAG 2.2 AA checks, keyboard and focus tests, ARIA/semantic validation, accessible names, form labels, color contrast, or screen-reader test patterns. Keywords: accessibility, WCAG, axe-core, keyboard navigation, focus management, ARIA.
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name playwright-e2e-testing description Author and maintain versioned Playwright (@playwright/test) TypeScript UI specs for browser user flows. Use when asked to create, run, debug, or refactor E2E tests, form/navigation/auth flows, responsive checks, UI mocking, fixtures, Page Objects, or visual comparisons. Use api-testing for standalone REST/GraphQL contracts and playwright-cli for live browser sessions. Keywords: E2E spec, Playwright test, POM, fixtures, UI regression. license Complete terms in LICENSE.txt
Playwright E2E Testing (TypeScript)
Comprehensive toolkit for end-to-end testing of web applications using Playwright with TypeScript. Enables robust UI testing, UI-dependent API setup, and responsive design verification following best practices.
Activation: This skill is triggered when authoring or maintaining versioned Playwright UI specs and their test infrastructure.
When to Use This Skill
Write E2E tests for user flows, forms, navigation, and authenticationUI-dependent API setup via the request fixture or network interceptionResponsive testing across mobile, tablet, and desktop viewportsDebug flaky tests using traces, screenshots, videos, and Playwright InspectorSetup test infrastructure with Page Object Model and fixturesMock/intercept APIs for isolated, deterministic testingVisual regression testing with screenshot comparisons
Do NOT Use For
Standalone API/contract testing with no browser (use
api-testing
Driving a live browser interactively for exploration or debugging (use playwright-cli).
Governing a large regression suite, tiers, or CI sharding strategy (use playwright-regression-testing).
Selenium/Java browser automation (use webapp-selenium-testing).
Prerequisites Requirement Details Node.js v18+ recommended Package Manager npm, yarn, or pnpm Playwright @playwright/test packageTypeScript typescript + ts-node (optional but recommended)Browsers Installed via npx playwright install
Quick Setup
npm init playwright@latest
npm install -D @playwright/test
npx playwright install
First Questions to Ask Before writing tests, clarify:
App URL : Local dev server command + port, or staging URL?Critical flows : Which user journeys must be covered (happy path + error states)?Browsers/devices : Chrome, Firefox, Safari? Mobile viewports?API strategy : Real backend, mocked responses, or hybrid?Test data : Seed data available? Reset/cleanup strategy?
Core Principles
1. Test Runner & TypeScript Always use @playwright/test with TypeScript for type safety and better IDE support.
import { test, expect } from "@playwright/test" ;
test ("user can login" , async ({ page }) => {
await page.goto ("/login" );
await page.getByLabel ("Email" ).fill ("user@test.com" );
await page.getByLabel ("Password" ).fill ("password123" );
await page.getByRole ("button" , { name : "Sign in" }).click ();
await expect (page).toHaveURL (/.*dashboard/ );
});
2. Locator Strategy (Priority Order) Prefer role-based locators (getByRole) with accessible names, then label → placeholder → text → test ID → CSS (last resort). XPath is never used.
3. Auto-Waiting & Web-First Assertions Playwright auto-waits for elements. Never use sleep() or arbitrary timeouts.
await expect (page.getByRole ("alert" )).toBeVisible ();
await expect (page).toHaveURL (/dashboard/ );
await expect (page.getByTestId ("status" )).toHaveText ("Success!" );
await page.waitForTimeout (2000 );
4. Test Structure with Steps Use test.step() for readable reports and failure localization:
test ("checkout flow" , async ({ page }) => {
await test.step ("Add item to cart" , async () => {
await page.goto ("/products/1" );
await page.getByRole ("button" , { name : "Add to Cart" }).click ();
});
await test.step ("Complete checkout" , async () => {
await page.goto ("/checkout" );
await page.getByRole ("button" , { name : "Pay Now" }).click ();
});
await test.step ("Verify confirmation" , async () => {
await expect (page.getByRole ("heading" )).toContainText ("Order Confirmed" );
});
});
Key Workflows
Forms & Navigation
await page.getByRole ("button" , { name : "Login" }).click ();
await expect (page).toHaveURL (/.*dashboard/ );
const responsePromise = page.waitForResponse (
(r ) => r.url ().includes ("/api/login" ) && r.status () === 200 ,
);
await page.getByRole ("button" , { name : "Login" }).click ();
const response = await responsePromise;
API Testing (Request Fixture) test ("API health check" , async ({ request }) => {
const response = await request.get ("/api/health" );
expect (response.ok ()).toBeTruthy ();
expect (await response.json ()).toMatchObject ({ status : "ok" });
});
API Mocking & Interception test ("handles API error" , async ({ page }) => {
await page.route ("**/api/users" , (route ) =>
route.fulfill ({
status : 500 ,
body : JSON .stringify ({ error : "Server error" }),
}),
);
await page.goto ("/users" );
await expect (page.getByRole ("alert" )).toContainText ("Something went wrong" );
});
Responsive Testing const viewports = [
{ width : 375 , height : 667 , name : "mobile" },
{ width : 768 , height : 1024 , name : "tablet" },
{ width : 1280 , height : 720 , name : "desktop" },
];
for (const vp of viewports) {
test (`navigation works on ${vp.name} ` , async ({ page }) => {
await page.setViewportSize (vp);
await page.goto ("/" );
if (vp.width < 768 ) {
await page.getByRole ("button" , { name : /menu/i }).click ();
}
await page.getByRole ("link" , { name : "About" }).click ();
await expect (page).toHaveURL (/about/ );
});
}
Configuration Use playwright.config.ts for project-wide settings:
import { defineConfig, devices } from "@playwright/test" ;
export default defineConfig ({
testDir : "./tests" ,
retries : process.env .CI ? 2 : 0 ,
reporter : [["html" ], ["junit" , { outputFile : "results.xml" }]],
use : {
baseURL : "http://localhost:3000" ,
trace : "on-first-retry" ,
screenshot : "only-on-failure" ,
video : "retain-on-failure" ,
},
projects : [
{ name : "chromium" , use : devices["Desktop Chrome" ] },
{ name : "mobile" , use : devices["Pixel 5" ] },
],
webServer : {
command : "npm run dev" ,
url : "http://localhost:3000" ,
reuseExistingServer : !process.env .CI ,
},
});
Troubleshooting Problem Cause Solution Element not found Wrong locator or not rendered Use PWDEBUG=1 to inspect, verify with getByRole Timeout waiting Element hidden or slow load Check for overlays, increase timeout, use waitFor() Flaky tests Race conditions, animations Add test.step(), use proper waits, disable animations Strict mode violation Multiple elements match Use .first(), .filter(), or more specific locator Screenshots differ Dynamic content Mask dynamic areas, use deterministic data CI fails, local passes Environment differences Check baseURL, timeouts, webServer config API mock not working Route pattern mismatch Use **/api/... glob, verify with page.on('request')
CLI Quick Reference Command Description npx playwright testRun all tests headless npx playwright test --uiOpen UI mode (interactive) npx playwright test --headedRun with visible browser npx playwright test --debugRun with Playwright Inspector npx playwright test -g "login"Run tests matching pattern npx playwright test --project=chromiumRun specific project npx playwright show-reportOpen HTML report npx playwright codegenGenerate tests by recording PWDEBUG=1 npx playwright testDebug with Inspector DEBUG=pw:api npx playwright testVerbose API logging
Red Flags
CSS/XPath locators when a role/label/testId is available — brittle and breaks on refactor.
waitForTimeout / manual sleeps instead of web-first auto-retrying assertions.Tests sharing state and depending on execution order — flaky and order-coupled.
Assertions only on status/URL with no visible-state check — hides render regressions.
Inline page setup repeated across tests instead of fixtures — duplication and drift.
References Document Content Snippets: Setup Config, auth setup, custom fixtures & logging Snippets: Interactions Form interactions, API testing & network interception Snippets: Viewports & Auth Responsive viewports & authentication patterns Snippets: Assertions & Debug Assertions, debug commands & utility helpers Locator Strategies: Priority Locator priority hierarchy & role-based locators Locator Strategies: Text Label, text, placeholder, alt-text & test-ID locators Locator Strategies: Filtering Filtering, chaining & complex locator patterns Locator Strategies: Anti & Debug Anti-patterns, CSS last-resort, debugging & quick reference POM: Basics POM concepts, directory structure, base page & fluent API POM: Components Page object & reusable component object implementation POM: Fixtures Custom & authenticated page-object fixtures POM: Practices Best practices, anti-patterns & a complete worked example Debugging: Tools & UI Debugging tools, UI mode, Inspector & headed mode Debugging: Tracing & Logs Trace viewer, verbose logging, screenshots & videos Debugging: Errors & Network Console/page errors & network debugging Debugging: Flaky & Locators Flaky-test fixes, locator debugging & quick commands
Verification 