Creator · pproenca
Last updated · Sep 6, 2026
Playwright testing best practices for Next.js applications (formerly test-playwright). This skill should be used when writing, reviewing, or debugging E2E tests with Playwright. Triggers on tasks involving test selectors, flaky tests, authentication state, API mocking, hydration
Sandbox only
Install targets
Codex install prompt
Install the "playwright" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.curated/playwright. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Playwright testing best practices for Next.js applications (formerly test-playwright). This skill should be used when writing, reviewing, or debugging E2E tests with Playwright. Triggers on tasks involving test selectors, flaky tests, authentication state, API mocking, hydration testing, parallel execution, CI configuration, or debugging test failures. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"pproenca-playwright","task":"Install playwright","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add pproenca/dot-skills --skill playwright
Maintenance
fresh
23d since push
Risk
Safe to try
Quality score needs review
GitHub quality
202
70/100 Quality · 79/100 Trust
Coverage tags
Review notes
Quality score needs review · Stars/forks activity: 202 stars, 17 forks; issue activity unavailable in current metadata
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Safe to tryA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
202 GitHub stars
Repo activity
202 stars, 17 forks
Maintenance
23d since push
License
MIT
Install
npx skills add pproenca/dot-skills --skill playwright
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add pproenca/dot-skills --skill playwrightDo not use when
Alternative
168.6K Stars
npx skills add mattpocock/skills --skill code-review
Alternative
40.8K Stars
npx skills add appsmithorg/appsmith
Alternative
175.7K Stars
npx skills add mattpocock/skills --skill implement
Alternative
30.9K Stars
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
high
Skill metadata references credentials, tokens, environment variables, or secret-bearing workflows.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20playwright%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20playwright%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/pproenca-playwright/install
Agent should check
Copy prompt
Task: Use playwright in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20playwright%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/pproenca-playwright/install
Install command: npx skills add pproenca/dot-skills --skill playwright
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/pproenca-playwright/install
LLM text format
/api/skills/pproenca-playwright/install?format=text
Find alternatives
/api/skills/search?q=playwright&limit=3
Agent prompt
Use playwright for this task. Review https://www.openagentskill.com/api/skills/pproenca-playwright/install, then install with: npx skills add pproenca/dot-skills --skill playwrightRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/pproenca-playwright
LLM text
/api/registry/manifest/pproenca-playwright?format=text
Install alias
/api/registry/install/pproenca-playwright
Recommend
/api/registry/recommend?task=Use%20playwright%20in%20an%20agent%20workflow&limit=3
Agent fit
Testing and QA
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Testing and QA
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO202 GitHub stars
Stars/forks activity
CHECK202 stars, 17 forks; issue activity unavailable in current metadata
Recent maintenance
PASS23d since push
License clarity
PASSMIT
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Build and ship code
I need a coding agent that can understand a repository, edit code, and review pull requests.
Workflow fit
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Inspect, patch, and verify code
A workflow for software agents that inspect repositories, review pull requests, generate tests, and turn findings into shippable patches.
Scrape, clean, and reuse web data
A practical workflow for agents that crawl public pages, extract clean content, normalize data, and hand it to downstream research or RAG workflows.
Alternative shortlist
Similar skills that may fit this task.
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
--- name: playwright description: Playwright testing best practices for Next.js applications (formerly test-playwright). This skill should be used when writing, reviewing, or debugging E2E tests with Playwright. Triggers on tasks involving test selectors, flaky tests, authentication state, API mocking, hydration testing, parallel execution, CI configuration, or debugging test failures. ---
# Playwright + Next.js Testing Best Practices
Comprehensive testing optimization guide for Playwright with Next.js applications. Contains 43 rules across 8 categories, prioritized by impact to guide reliable, fast, and maintainable E2E tests.
## When to Apply
Reference these guidelines when: - Writing new Playwright tests for Next.js apps - Debugging flaky or failing tests - Optimizing test execution speed - Setting up authentication state reuse - Configuring CI/CD pipelines for testing - Testing Server Components and App Router features - Reviewing test code for reliability issues
## Rule Categories by Priority
| Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Test Architecture | CRITICAL | `arch-` | | 2 | Selectors & Locators | CRITICAL | `loc-` | | 3 | Waiting & Assertions | HIGH | `wait-` | | 4 | Authentication & State | HIGH | `auth-` | | 5 | Mocking & Network | MEDIUM-HIGH | `mock-` | | 6 | Next.js Integration | MEDIUM | `next-` | | 7 | Performance & Speed | MEDIUM | `perf-` | | 8 | Debugging & CI | LOW-MEDIUM | `debug-` |
## Quick Reference
### 1. Test Architecture (CRITICAL)
- [`arch-test-isolation`](references/arch-test-isolation.md) - Use fresh browser context for each test - [`arch-parallel-execution`](references/arch-parallel-execution.md) - Enable parallel test execution - [`arch-page-object-model`](references/arch-page-object-model.md) - Use Page Object Model for complex pages - [`arch-fixtures`](references/arch-fixtures.md) - Use fixtures for shared setup - [`arch-test-production`](references/arch-test-production.md) - Test against production builds - [`arch-cleanup-state`](references/arch-cleanup-state.md) - Clean up test state after each test
### 2. Selectors & Locators (CRITICAL)
- [`loc-role-selectors`](references/loc-role-selectors.md) - Use role-based selectors over CSS - [`loc-data-testid`](references/loc-data-testid.md) - Use data-testid for dynamic elements - [`loc-label-selectors`](references/loc-label-selectors.md) - Use getByLabel for form inputs - [`loc-text-selectors`](references/loc-text-selectors.md) - Use getByText for static content - [`loc-avoid-xpath`](references/loc-avoid-xpath.md) - Avoid XPath selectors - [`loc-chained-locators`](references/loc-chained-locators.md) - Chain locators for specificity - [`loc-placeholder-selector`](references/loc-placeholder-selector.md) - Use getByPlaceholder sparingly
### 3. Waiting & Assertions (HIGH)
- [`wait-web-first-assertions`](references/wait-web-first-assertions.md) - Use web-first assertions - [`wait-avoid-hard-waits`](references/wait-avoid-hard-waits.md) - Avoid hard waits - [`wait-network-idle`](references/wait-network-idle.md) - Use network idle for complex pages - [`wait-action-retries`](references/wait-action-retries.md) - Let actions auto-wait before interacting - [`wait-soft-assertions`](references/wait-soft-assertions.md) - Use soft assertions for non-critical checks - [`wait-custom-timeout`](references/wait-custom-timeout.md) - Configure timeouts appropriately
### 4. Authentication & State (HIGH)
- [`auth-storage-state`](references/auth-storage-state.md) - Reuse authentication with storage state - [`auth-multiple-roles`](references/auth-multiple-roles.md) - Use separate storage states for different roles - [`auth-session-storage`](references/auth-session-storage.md) - Handle session storage for auth - [`auth-api-login`](references/auth-api-login.md) - Use API login for faster auth setup - [`auth-parallel-workers`](references/auth-parallel-workers.md) - Use worker-scoped auth for parallel tests
### 5. Mocking & Network (MEDIUM-HIGH)
- [`mock-api-responses`](references/mock-api-responses.md) - Mock API responses for deterministic tests - [`mock-intercept-modify`](references/mock-intercept-modify.md) - Intercept and modify real responses - [`mock-har-files`](references/mock-har-files.md) - Use HAR files for complex mock scenarios - [`mock-abort-requests`](references/mock-abort-requests.md) - Abort unnecessary requests - [`mock-network-conditions`](references/mock-network-conditions.md) - Simulate network conditions
### 6. Next.js Integration (MEDIUM)
- [`next-wait-hydration`](references/next-wait-hydration.md) - Wait for hydration before interacting - [`next-server-components`](references/next-server-components.md) - Test server components correctly - [`next-app-router-navigation`](references/next-app-router-navigation.md) - Test App Router navigation patterns - [`next-server-actions`](references/next-server-actions.md) - Test server actions end-to-end - [`next-baseurl-config`](references/next-baseurl-config.md) - Configure baseURL for clean navigation
### 7. Performance & Speed (MEDIUM)
- [`perf-sharding`](references/perf-sharding.md) - Use sharding for large test suites - [`perf-headless-ci`](references/perf-headless-ci.md) - Use headless mode in CI - [`perf-browser-selection`](references/perf-browser-selection.md) - Select browsers strategically - [`perf-reuse-server`](references/perf-reuse-server.md) - Reuse development server when possible - [`perf-retries`](references/perf-retries.md) - Configure retries for flaky test recovery
### 8. Debugging & CI (LOW-MEDIUM)
- [`debug-trace-viewer`](references/debug-trace-viewer.md) - Use trace viewer for failed tests - [`debug-screenshots-videos`](references/debug-screenshots-videos.md) - Capture screenshots and videos on failure - [`debug-inspector`](references/debug-inspector.md) - Use Playwright Inspector for interactive debugging - [`debug-ci-reporters`](references/debug-ci-reporters.md) - Configure reporters for CI integration
## How to Use
Read individual reference files for detailed explanations and code examples:
- [Section definitions](references/_sections.md) - Category structure and impact levels - [Rule template](assets/templates/_template.md) - Template for adding new rules
## Reference Files
| File | Description | |------|-------------| | [AGENTS.md](AGENTS.md) | Complete compiled guide with all rules | | [references/_sections.md](references/_sections.md) | Category definitions and ordering | | [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules | | [metadata.json](metadata.json) | Version and reference information |
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for playwright, ready for a manual X post.
A practical pick for a repeatable workflow: playwright: Playwright testing best practices for Next.js applications (formerly test-playwright). This skill should be used when writi... 202 stars https://www.openagentskill.com/skills/pproenca-playwright?ref=x
Listing + install path for playwright: https://www.openagentskill.com/skills/pproenca-playwright?ref=x Install: npx skills add pproenca/dot-skills --skill playwright
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to pproenca but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/pproenca-playwright?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/pproenca-playwright?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/pproenca-playwright/audit)
[](https://www.openagentskill.com/skills/pproenca-playwright?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)pproenca
@pproenca
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Code Review
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
168.6K StarsAppsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
40.8K StarsImplement
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
175.7K StarsVercel React Best Practices
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
30.9K StarsPermission surface
filesystem or document access, network or browser access
Agent outcomes
No agent outcome data yet
Docs
Strong README/SKILL.md context
Risk summary
Install readiness