playwright
This skill teaches you how to build robust end-to-end tests using Playwright's browser automation framework. You'll learn to structure test suites, interact with web elements, handle asynchronous operations, and validate application behavior across multiple browsers. Perfect for developers looking to implement reliable testing strategies in their projects.
Playwright enables you to write end-to-end tests by using its test runner to automate browser interactions and validate application behavior. Start by installing Playwright, then create test files that use the `test()` function to define test cases. Within each test, use Playwright's APIs to navigate pages, interact with elements using locators, and make assertions. Playwright's auto-wait feature automatically waits for elements to be actionable before interacting with them, reducing flakiness. Structure your tests with clear setup and teardown phases, and organize related tests into describe blocks for better maintainability.
AI-generated summary based on this skill's SKILL.md
Install
bobmatnyc/claude-mpm-skills/playwright · repository language: Python
git clone https://github.com/bobmatnyc/claude-mpm-skills
cp -r claude-mpm-skills/toolchains/javascript/testing/playwright ~/.claude/skills/playwrightFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I write Playwright tests for end-to-end testing?
Playwright enables you to write end-to-end tests by using its test runner to automate browser interactions and validate application behavior. Start by installing Playwright, then create test files that use the `test()` function to define test cases. Within each test, use Playwright's APIs to navigate pages, interact with elements using locators, and make assertions. Playwright's auto-wait feature automatically waits for elements to be actionable before interacting with them, reducing flakiness. Structure your tests with clear setup and teardown phases, and organize related tests into describe blocks for better maintainability.
What is the best way to set up Playwright for cross-browser testing and automation?
Playwright supports cross-browser testing across Chromium, Firefox, and WebKit out of the box. To set it up, install Playwright and run `npx playwright install` to download the browser binaries. Configure your `playwright.config.js` file to specify which browsers to test against, set viewport sizes, and define base URLs. Use the `@playwright/test` package's built-in test runner, which handles browser lifecycle management automatically. You can run tests against all browsers in parallel or sequentially, and Playwright's configuration allows you to define device-specific settings for mobile testing as well.
What are Playwright best practices for locators, page objects, and test organization?
Playwright recommends using resilient locators that target user-visible attributes rather than implementation details—prefer role-based locators like `getByRole()` and `getByLabel()` over CSS selectors when possible. Implement the page object model pattern by creating classes that encapsulate page elements and actions, making tests more readable and maintainable. Organize your test files by feature or user journey, use fixtures to share setup logic across tests, and leverage custom fixtures for complex scenarios. Keep tests focused on a single user action or assertion, and use descriptive test names that explain what behavior is being validated.
How can I debug failing Playwright tests using UI mode, traces, and screenshots?
Playwright provides multiple debugging tools to diagnose test failures. Use UI mode by running `npx playwright test --ui` to step through tests interactively, inspect the DOM, and see network activity in real time. Enable trace recording in your config to capture detailed execution logs, and use `page.screenshot()` to capture visual snapshots at key points in your tests. When tests fail, Playwright automatically generates screenshots and traces in the test results folder. The trace viewer allows you to inspect every action, network request, and console message, making it easier to identify the root cause of failures.
How do I integrate Playwright tests into CI/CD pipelines?
Playwright is designed for CI/CD integration and works seamlessly with GitHub Actions, GitLab CI, Jenkins, and other platforms. Install Playwright in your CI environment and run tests using `npx playwright test`. Configure your pipeline to use the `--reporter=html` flag to generate an HTML report, and optionally upload test artifacts like traces and screenshots for post-failure analysis. Playwright's parallel execution speeds up test runs, and you can configure sharding to distribute tests across multiple CI workers. Most CI platforms provide pre-built Playwright actions or Docker images to simplify setup and ensure consistent test environments.
What authentication patterns does Playwright support for testing authenticated applications?
Playwright supports multiple authentication patterns to test protected features without repeatedly logging in. Use the `storageState` feature to save and reuse authenticated sessions across tests, reducing test execution time. Implement shared authentication fixtures that log in once and share the session with multiple tests. For API-based authentication, call your login endpoint directly before launching the browser, then inject the authentication token into page context. Playwright also supports intercepting network requests to mock authentication responses, and you can use `page.goto()` with pre-set cookies or headers for scenarios where session persistence is needed.
SKILL.md
rendered from the published skill — quoted content, verbatim
Playwright E2E Testing Skill
progressive_disclosure: entry_point: summary: "Modern E2E testing framework with cross-browser automation and built-in test runner" when_to_use: - "When testing web applications end-to-end" - "When needing cross-browser testing" - "When testing user flows and interactions" - "When needing screenshot/video recording" quick_start: - "npm init playwright@latest" - "Choose TypeScript and test location" - "npx playwright test" - "npx playwright show-report" token_estimate: entry:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
toolchains/javascript/testing/playwright/SKILL.md
toolchains/javascript/testing/playwright/metadata.json