playwright-patterns_skill

Overview

This skill provides practical Playwright automation patterns for writing robust tests, scrapers, and end-to-end flows. It focuses on selector strategies, waiting patterns, data extraction, and defensive coding to reduce flakiness and improve maintainability. Use these patterns to standardize locators, assertions, and navigation across projects.

How this skill works

The skill inspects common automation tasks and recommends a priority order for locators: role-based and other user-facing selectors first, test IDs next, and CSS/XPath as a last resort. It explains Playwright's auto-waiting and web-first assertions, offers extraction patterns (evaluateAll, textContent vs innerText), and provides error-handling, retry, and navigation best practices to keep tests stable.

When to use it

• Writing new Playwright scripts, E2E tests, or web scrapers
• Debugging or refactoring flaky automation and unreliable selectors
• Designing resilient selector strategies and waiting logic
• Extracting batch data from dynamic pages with minimal round-trips
• Implementing multi-page workflows, file uploads, or complex forms

Best practices

• Prefer user-facing locators (getByRole, getByLabel, getByPlaceholder) before test IDs or CSS
• Use web-first assertions (await expect(locator).toBeVisible()) to leverage retries
• Trust Playwright auto-waiting; avoid hard-coded waitForTimeout delays
• Assert known counts before using locator.all(); use evaluateAll for batch extraction
• Scope locators by chaining or filtering instead of using first() or fragile nth-child selectors
• Capture screenshots on failure and use pause/slowMo for debugging when necessary

Example use cases

• Refactor a flaky test by replacing CSS selectors with role-based locators
• Build a scraper that waits for results container, then uses evaluateAll for fast extraction
• Create an E2E checkout flow that handles cookie banners and waits for navigation reliably
• Implement robust form automation with getByLabel, fill(), selectOption(), and web-first asserts
• Automate multi-tab behavior by waiting for context.waitForEvent('page') and load state