playwright
This skill equips you with Playwright testing expertise drawn from proven coding standards. Discover patterns and best practices for building reliable browser automation tests across modern web applications, leveraging insights from expert developers who've refined these techniques in production environments.
Playwright excels through several core best practices: use web-first locators like getByRole, getByLabel, and getByPlaceholder for resilient element selection; leverage built-in waiting and retry logic rather than hard waits; organize tests using the page object model to separate test logic from UI interactions; isolate tests so each runs independently without side effects; and use fixtures for consistent test setup and teardown. These patterns, refined by production developers, ensure your Playwright tests remain maintainable and reliable as applications evolve.
AI-generated summary based on this skill's SKILL.md
Install
Mindrally/skills/playwright
git clone https://github.com/Mindrally/skills
cp -r skills/playwright ~/.claude/skills/playwrightFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the key Playwright testing best practices?
Playwright excels through several core best practices: use web-first locators like getByRole, getByLabel, and getByPlaceholder for resilient element selection; leverage built-in waiting and retry logic rather than hard waits; organize tests using the page object model to separate test logic from UI interactions; isolate tests so each runs independently without side effects; and use fixtures for consistent test setup and teardown. These patterns, refined by production developers, ensure your Playwright tests remain maintainable and reliable as applications evolve.
How do I write Playwright tests with web-first assertions and waiting strategies?
Playwright's web-first assertions automatically wait for conditions to be met, eliminating flaky tests caused by timing issues. Instead of manual waits, use assertions like `expect(page).toHaveTitle()`, `expect(locator).toBeVisible()`, and `expect(locator).toContainText()`. Playwright also provides explicit waiting methods such as `waitForLoadState()` and `waitForSelector()`. The skill teaches you to combine these strategies: rely on assertions for validation, use locators with built-in retry logic, and only add explicit waits when testing specific async behaviors. This approach builds robust automated tests that handle real-world timing challenges.
What locator strategies should I use in Playwright?
Playwright locator strategies prioritize resilience and maintainability. The recommended approach uses getByRole, getByLabel, getByPlaceholder, and getByText to query elements by their semantic meaning rather than brittle CSS or XPath selectors. These web-first locators mirror how users interact with pages and remain stable through UI refactors. When semantic locators aren't available, use getByTestId with data-testid attributes. Reserve CSS and XPath selectors as fallbacks only. This hierarchy ensures your Playwright tests survive design changes and remain aligned with accessibility standards, making them both reliable and maintainable.
How do I set up and configure Playwright test projects?
Playwright configuration begins with the playwright.config.ts file, where you define projects for different browsers (Chromium, Firefox, WebKit), devices, and environments. Use fixtures to manage test setup, teardown, and shared resources like authenticated sessions or database state. Configure test isolation to ensure each test runs independently, preventing cascading failures. Set timeouts, retries, and reporter options to match your CI/CD pipeline. The skill covers organizing multiple projects for cross-browser and mobile testing, configuring base URLs and environment variables, and integrating with CI systems. Proper configuration transforms Playwright from a local tool into a scalable, production-grade testing framework.
What is the page object model pattern in Playwright?
Playwright's page object model separates test logic from UI interaction details by encapsulating page elements and actions into reusable classes. Each page object represents a screen or component, exposing methods like `login()`, `fillSearchForm()`, or `verifyCheckout()` rather than exposing raw locators and interactions. This abstraction makes tests more readable, reduces duplication, and simplifies maintenance—when the UI changes, you update only the page object, not dozens of tests. The skill demonstrates building page objects with TypeScript, composing them for multi-page workflows, and using fixtures to inject page objects into tests, enabling you to build maintainable automated test suites at scale.
How can I prevent flaky tests and ensure test isolation in Playwright?
Playwright prevents flaky tests through test isolation and web-first design. Isolate tests by running each in its own browser context, avoiding shared state that causes cascading failures. Use fixtures to reset application state between tests—clear databases, reset authentication, or navigate to a clean starting point. Leverage Playwright's built-in waiting and retry logic instead of hard-coded delays. Avoid testing implementation details; focus on user-visible behavior. The skill teaches debugging flaky tests using trace files and video recordings, identifying race conditions, and refactoring brittle selectors into resilient locators. These practices ensure your Playwright test suite remains reliable in CI/CD pipelines and local development.
SKILL.md
rendered from the published skill — quoted content, verbatim
Playwright Testing Best Practices
You are a Senior QA Automation Engineer expert in TypeScript, JavaScript, and Playwright end-to-end testing.
Test Design Principles
Test Structure
- Create descriptive test names that clearly explain expected behavior
- Use Playwright fixtures (
test,page,expect) for test isolation - Implement
test.beforeEachandtest.afterEachfor clean state management - Keep tests DRY by extracting reusable logic into helper functions
```typescript import { test, expect } from '@playwright/test';
test.describe('User Authentication', () => { test.beforeEach(async ({ page }) => { await page.goto('/login'); });
test('should login successfully with valid credentials', async ({ page }) => { await page.getByLabel('Email').fill('user@example.com'); await page.getByLabel('Password').fill('password123'); await page.getByRole('button', { name: 'Sign In' }).click();
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
playwright/SKILL.md