e2e-playwright-testing
Build robust browser automation tests for web applications with Playwright integration. This skill equips AI agents with the ability to write, execute, and validate end-to-end test scenarios across modern web platforms. Streamline your testing workflows and catch regressions before they reach production.
e2e-playwright-testing teaches you to build robust browser automation tests for web applications using Playwright integration. Start by installing Playwright and creating test files with the test() function. Use page.goto() to navigate to your application, then interact with elements using locators like page.locator('selector'). Assert on page state using expect() matchers. Organize tests into logical groups using test.describe() blocks, and leverage the page object pattern to keep your test code maintainable and reusable across multiple test scenarios.
AI-generated summary based on this skill's SKILL.md
Install
AsyrafHussin/agent-skills/e2e-playwright-testing
git clone https://github.com/AsyrafHussin/agent-skills
cp -r agent-skills/skills/e2e-playwright-testing ~/.claude/skills/e2e-playwright-testingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I write end-to-end tests with Playwright?
e2e-playwright-testing teaches you to build robust browser automation tests for web applications using Playwright integration. Start by installing Playwright and creating test files with the test() function. Use page.goto() to navigate to your application, then interact with elements using locators like page.locator('selector'). Assert on page state using expect() matchers. Organize tests into logical groups using test.describe() blocks, and leverage the page object pattern to keep your test code maintainable and reusable across multiple test scenarios.
What are the best practices for Playwright locator selection and test organization?
e2e-playwright-testing emphasizes that reliable locator selection is critical for stable tests. Prefer data-testid attributes over brittle CSS selectors or XPath expressions. Use role-based locators like page.locator('button:has-text("Submit")') to target elements semantically. Organize your tests by user flows and features rather than implementation details. Implement the page object pattern to encapsulate locator logic and interactions, making tests more readable and reducing maintenance burden when your application's UI changes.
How can I test form submissions and user interactions in React/SPA applications?
e2e-playwright-testing provides strategies for testing form submissions and user interactions in React and single-page applications. Fill form fields using page.fill() or page.locator().fill(), then trigger submission with page.click() or page.press('Enter'). Wait for navigation or network responses using page.waitForNavigation() or page.waitForLoadState(). For React SPAs that don't perform full page reloads, use page.waitForSelector() or page.waitForFunction() to wait for DOM updates. Validate form behavior by checking for success messages, error states, or redirects after submission.
How do I debug and fix flaky Playwright tests and locator issues?
e2e-playwright-testing addresses flaky test problems by teaching proper wait strategies and locator debugging. Avoid hard-coded delays; instead use page.waitForLoadState('networkidle') or page.waitForSelector() to wait for elements deterministically. Enable Playwright's strict mode to catch ambiguous locators that match multiple elements. Use page.pause() to step through tests interactively, or run tests with --debug flag to inspect element selection. Check for timing issues in CI/CD environments by increasing timeouts and ensuring your application is fully loaded before interactions.
How do I set up Playwright testing infrastructure with authentication and CI/CD?
e2e-playwright-testing covers authentication setup and CI/CD configuration for Playwright. Store authentication credentials securely using environment variables or secrets management. Implement authentication reuse by saving browser context state after login and restoring it in subsequent tests to avoid repeated login flows. Configure Playwright in your CI/CD pipeline (GitHub Actions, GitLab CI, Jenkins) by installing dependencies, running tests with appropriate reporters, and uploading test reports and artifacts. Use playwright.config.ts to define browser configurations, timeouts, and retry policies for reliable test execution across environments.
What should I know about Playwright browser automation and e2e testing web apps?
e2e-playwright-testing equips you to build comprehensive browser automation tests that catch regressions before they reach production. Playwright supports Chromium, Firefox, and WebKit browsers, allowing you to validate cross-browser compatibility. Write tests that simulate real user flows—navigation, form submission, clicking buttons, and verifying page state changes. Use Playwright's powerful API to handle dynamic content, waiting for elements, and network interception. Streamline your testing workflows by organizing tests logically, reusing authentication contexts, and running tests in parallel to reduce execution time while maintaining reliability.
SKILL.md
rendered from the published skill — quoted content, verbatim
E2E Playwright Testing
> Patterns and conventions for reliable end-to-end browser testing with Playwright.
Comprehensive E2E testing guide for web applications. Contains 8 rules across 6 categories covering locator strategies, authentication reuse, form testing (including React/SPA-specific gotchas), assertions, test organization, reliability, and CI/CD configuration.
Stack Detection
Before writing or reviewing E2E tests, detect the project stack:
Step 1 — Check for Playwright
# Look in package.json devDependencies:
# "@playwright/test" → Playwright is installed
# Check for playwright.config.js or playwright.config.ts
- If
@playwright/testis present → use Playwright patterns from this skill - If
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 14 files
skills/e2e-playwright-testing/AGENTS.md
skills/e2e-playwright-testing/README.md
skills/e2e-playwright-testing/SKILL.md
skills/e2e-playwright-testing/metadata.json
skills/e2e-playwright-testing/rules/_sections.md
skills/e2e-playwright-testing/rules/_template.md
skills/e2e-playwright-testing/rules/assert-web-first.md
skills/e2e-playwright-testing/rules/auth-storage-state.md
skills/e2e-playwright-testing/rules/form-custom-checkboxes.md
skills/e2e-playwright-testing/rules/form-react-date-inputs.md
skills/e2e-playwright-testing/rules/loc-prefer-role-locators.md
skills/e2e-playwright-testing/rules/loc-strict-mode.md
skills/e2e-playwright-testing/rules/org-mirror-routes.md
skills/e2e-playwright-testing/rules/rel-no-wait-for-timeout.md