Write and maintain reliable end-to-end tests with Playwright — Microsoft's browser automation library that auto-waits for actionable elements and runs the same suite against Chromium, Firefox, and WebKit.
Open the source and read safety notes before installing.
Source-backed facts for citing this resource, derived directly from the registry — also available as plain text for AI assistants.
Decision playbook
Signals are comparatively strong, but you should still validate source, privacy posture, and package provenance for your environment.
0
96
—
No baseline selected
No major trust-signal divergence detected in the current selection.
Confirm ownership and provenance before trusting install instructions.
Source link availableRequired
Open the canonical repository and verify ownership.
Source provenance statusRequired
Marked as first-party.
Metadata reviewed
Registry metadata indicates a reviewed listing.
Validate risk disclosures before installation or API wiring.
Safety notes presentRequired
Review the listed safety guidance before running commands.
Privacy notes presentRequired
Review data handling notes before connecting accounts or secrets.
Trust level risk gateRequired
Trust level does not block evaluation.
Check package metadata and artifact integrity signals.
Install payload available
Install or copy payload is available for review.
Package verification flag
Package marked verified.
Checksum metadata
SHA-256 hash is present.
Use compare context to validate trade-offs before adoption.
Compare tray has multiple entries
Add at least one more entry to compare trust differences.
Baseline comparison available
No baseline peer selected yet.
Diverging trust signals identified
No major trust-signal divergence found.
Setup at a glance
Copy-ready — paste the snippet to get started.
Adoption plan
Current risk score 0/100. Use staged verification before broader rollout.
Validate source and review signals before any execution.
Confirm source provenanceRequired
Source URL/provenance metadata is present.
Confirm metadata review state
Listing has review metadata.
Verify install payload
Install/config payload exists and can be inspected.
Confirm safety, privacy, and package integrity signals.
Review safety notesRequired
Safety notes are present.
Review privacy notesRequired
Privacy notes are present.
Verify package integrity metadata
Package verification/checksum metadata is available.
Adopt in controlled steps based on the selected plan.
Run in isolated sandbox firstRequired
Use a constrained sandbox and observe behavior across multiple tasks.
Roll out graduallyRequired
Roll out to a small cohort before wider usage.
Set monitoring and fallback
Define rollback path and monitor errors after adoption.
Evidence readiness
Required evidence gates are covered (6/6 signals complete).
Source repository/provenance is listed.
Required in this preset
Review metadata is present.
Required in this preset
Safety notes are present.
Required in this preset
Privacy notes are present.
Optional in this preset
Package integrity metadata is present.
Optional in this preset
Install payload is available.
Required in this preset
Required evidence gates are covered for this preset.
Decision timeline
6/6 steps complete with no blocking gaps for this preset.
triage
Source/provenance metadata is available.
triage
Review metadata is available.
verify
Safety notes are available.
verify
Privacy notes are available.
verify
Package integrity metadata is available.
rollout
Install payload is available.
No required blockers for this timeline preset.
Prerequisite readiness
4 prerequisites to line up before setup.
Safety & privacy surface
2 safety and 2 privacy notes across 2 risk areas. Review closely: credentials & tokens, network access.
| Platform | Support | Install path |
|---|---|---|
| claude-code | Native | .claude/skills/<skill-name>/SKILL.md |
| codex | Native | .agents/skills/<skill-name>/SKILL.md |
| windsurf | Native | .windsurf/skills/<skill-name>/SKILL.md |
| gemini | Native | .gemini/skills/<skill-name>/SKILL.md or .agents/skills/<skill-name>/SKILL.md |
| cursor | Adapter | .cursor/rules/<skill-name>.mdc |
| cli | Manual | AGENTS.md or tool-specific context file |
import { test, expect } from '@playwright/test';
test.describe('Dashboard Tests', () => {
test.beforeEach(async ({ page }) => {
// Login before each test
await page.goto('https://localhost:3000/login');
await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('password123');
await page.getByRole('button', { name: 'Sign In' }).click();
await page.waitForURL('**/dashboard');
});
test('displays welcome message', async ({ page }) => {
const heading = page.getByRole('heading', { name: /welcome/i });
await expect(heading).toBeVisible();
});
test('loads user profile data', async ({ page }) => {
await page.getByRole('link', { name: 'Profile' }).click();
await expect(page.getByText('user@example.com')).toBeVisible();
});
});Playwright is Microsoft's open-source end-to-end testing framework for modern web applications. Its introductory documentation covers the core design principles: auto-waiting for elements to be in an actionable state before interacting with them, full isolation between test contexts, and a unified API that runs the same tests against Chromium, Firefox, and WebKit. This skill brings those capabilities into Claude — you describe a user flow or a bug scenario in plain language, and Claude generates the corresponding @playwright/test spec, configures fixtures, sets up parallel workers, and interprets trace output when tests fail.
Claude can write, execute, and maintain end-to-end tests using Playwright. This covers cross-browser coverage (Chrome, Firefox, Safari/WebKit) from a single test suite, accessibility-first selectors (getByRole, getByLabel, getByText) that survive UI refactors, network request interception for mocking slow or flaky dependencies, and trace recording that captures a full timeline of clicks, network calls, and DOM snapshots for post-mortem debugging.
Required:
What Claude handles automatically:
Prompt: "Create a Playwright test that logs into my application at localhost:3000, navigates to /dashboard, and verifies the welcome message appears."
Claude will:
npm init playwright@latest)Prompt: "I have a checkout flow: user adds product to cart, enters shipping info, selects payment method, and completes order. Write comprehensive Playwright tests covering happy path and error cases."
Claude will:
Prompt: "Set up Playwright to test my application across Chrome, Firefox, and Safari with parallel execution. Include mobile viewport testing for iOS and Android."
Claude will:
playwright.config.ts with multiple projectsPrompt: "Write Playwright tests that verify my REST API endpoints before running UI tests. Mock the API responses for offline testing."
Claude will:
request context for API callsUse Accessibility Selectors: Playwright's MCP support leverages accessibility snapshots. Ask Claude to use getByRole(), getByLabel(), and getByText() instead of CSS selectors for more resilient tests.
Parallel Execution: Playwright's native parallelism is a key advantage. Request test organization that maximizes parallel worker usage with proper test isolation.
Auto-Wait Smart Defaults: Playwright automatically waits for elements to be actionable. Avoid explicit waits unless dealing with specific timing requirements.
Trace on Failure: Enable trace recording for CI environments to debug failures without reproducing locally: --trace on-first-retry.
Codegen for Complex Flows: For intricate user interactions, ask Claude to generate tests using npx playwright codegen output as a starting point.
Test Sharding: For large test suites in CI, request sharding configuration: --shard=1/4 to split tests across multiple jobs.
"Set up a production-ready Playwright test suite for my Next.js app with:
1. Authentication flow tests with session storage
2. Visual regression testing with screenshot comparison
3. API mocking for external services
4. CI/CD integration with GitHub Actions
5. HTML report with trace viewer
6. Parallel execution across 4 workers"
"My application's login form changed from using email to username.
Update all Playwright tests that interact with the login form,
using accessibility selectors instead of data-testid attributes."
"Write Playwright tests that measure:
1. First Contentful Paint (FCP)
2. Largest Contentful Paint (LCP)
3. Time to Interactive (TTI)
4. Total Blocking Time (TBT)
Fail tests if any metric exceeds Web Vitals thresholds."
"Create Playwright tests for mobile web experience:
1. Test on iPhone 13 and Pixel 5 viewports
2. Verify touch interactions (swipe, pinch-to-zoom)
3. Test offline mode with service worker
4. Validate responsive image loading
5. Check mobile-specific navigation menu"
Issue: Tests are flaky and fail intermittently
Solution: Ask Claude to add explicit waitForLoadState('networkidle') calls, increase timeout for specific actions with { timeout: 10000 }, or implement custom wait conditions with page.waitForFunction().
Issue: Selectors break when UI changes
Solution: Request migration to accessibility selectors (getByRole, getByLabel) which are more resilient to DOM structure changes. Playwright's MCP integration makes this the preferred approach.
Issue: Tests run too slowly in CI Solution: Ask Claude to implement test sharding across multiple GitHub Actions jobs, optimize test setup with global authentication fixtures, and enable trace recording only on failure.
Issue: Cannot test third-party authentication (OAuth, SSO)
Solution: Request implementation of authentication state storage with storageState option, bypassing the login flow for most tests while keeping one dedicated authentication test.
Issue: Screenshot comparison fails due to font rendering differences
Solution: Ask Claude to configure Playwright's maxDiffPixels or threshold options, or use textual assertions instead of visual regression for text-heavy areas.
Show that Playwright E2E Testing Automation Skill is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.
[](https://heyclau.de/entry/skills/playwright-e2e-testing)Playwright E2E Testing Automation Skill side by side with its closest alternative on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.
2 trust signals differ across this comparison (Package trust, Source provenance).
| Field | Write and maintain reliable end-to-end tests with Playwright — Microsoft's browser automation library that auto-waits for actionable elements and runs the same suite against Chromium, Firefox, and WebKit. Open dossier | A Claude skill that fetches web pages, strips boilerplate with Mozilla Readability, respects robots.txt, removes duplicate content, and turns the result into structured summaries. Open dossier |
|---|---|---|
| Next steps | ||
| Trust | ||
| Review status | ReviewedMaintainer reviewed | ReviewedMaintainer reviewed |
| Package trustDiffers | Package verified2025-10-16 | Package verified2025-10-15 |
| Source provenanceDiffers | Source-backed | No submission link |
| Submitter | — | — |
| Install risk | Review first | Low risk |
| Notes | Safety ✓ Privacy ✓ | Safety ✓ Privacy ✓ |
| Brand | — | — |
| Category | skills | skills |
| Source | First-party | First-party |
| Author | JSONbored | JSONbored |
| Added | 2025-10-16 | 2025-10-15 |
| Platforms | ||
| Harness | ||
| Source repo | — | — |
| Safety notes | ✓`npx playwright install --with-deps` downloads browser binaries (~500 MB for Chromium, Firefox, and WebKit) from Playwright's CDN and on Linux installs system-level packages. Review your network and environment policies before running in restricted infrastructure. Generated tests have full browser-level access to any URL they target. Review test scripts before running them against authenticated sessions or production environments — Playwright can submit forms, click buttons, and make network requests as a real user. | ✓Executes network requests to crawl third-party websites and installs scraping libraries (Playwright, BeautifulSoup) on first use; respect robots.txt, rate limits, and each site's terms of service, and review target URLs before running. Crawled pages are written to local files (Markdown, JSON, CSV); review output paths so the skill does not overwrite existing files. |
| Privacy notes | ✓Playwright runs entirely on your local machine. Traces, screenshots, and HTML test reports are written to local disk only and are not uploaded to Microsoft or any external service. Trace files and failure screenshots may capture sensitive content from the application under test (form data, rendered PII, session tokens visible in URLs). Store and rotate these files appropriately. | ✓Fetches and stores content from external websites locally and may use site cookies or auth tokens to reach gated pages; do not crawl private or authenticated data without authorization, and keep any credentials out of saved output. |
| Prerequisites |
|
|
| Install | | |
| Config | — | — |
| Citations | ||
| Claim | Unclaimed | Unclaimed |
Source-backed guides for putting this to work.
Set autoMode.hard_deny rules to block risky actions in auto mode.
Loading live community signals…
A short, calm digest of reviewed Claude resources. Unsubscribe any time.