Installation
npx skills add oakoss/agent-skills --skill playwright 182
Installs
Playwright
Overview
Playwright is a browser automation framework for Node.js and Python supporting Chromium, Firefox, and WebKit with a single API. It provides auto-waiting, web-first assertions, and full test isolation for reliable end-to-end testing.
When to use: Browser automation, web scraping, screenshot/PDF generation, API testing, configuring Playwright Test, troubleshooting Playwright errors, stealth mode and anti-bot bypass.
When NOT to use: Simple HTTP requests (use fetch), unit testing (use Vitest/Jest), serverless scraping at scale (consider Cloudflare Browser Rendering). For E2E test architecture (Page Object Models, CI sharding, test organization, authentication patterns), use the e2e-testing skill.
Quick Reference
| Pattern | API / Config | Key Points |
|---|---|---|
| Basic test | test('name', async ({ page }) => {}) |
Auto-wait, web-first assertions, test isolation |
| Locator | page.getByRole() / page.locator() |
Prefer role/label/text selectors over CSS |
| Assertion | expect(locator).toBeVisible() |
Auto-retrying, configurable timeout |
| API testing | request fixture / apiRequestContext |
Send HTTP requests, validate responses |
| Aria snapshot | expect(locator).toMatchAriaSnapshot() |
Validate accessibility tree structure via YAML |
| Class assertion | expect(locator).toContainClass('active') |
Match individual CSS class names (v1.52+) |
| Visible filter | locator.filter({ visible: true }) |
Match only visible elements (v1.51+) |
| Test step | test.step('name', async (step) => {}) |
Timeout, skip, and attachments (v1.50+) |
| Stealth mode | playwright-extra + stealth plugin |
Patches 20+ detection vectors |
| Authenticated session | context.cookies() + addCookies() |
Save/restore cookies and IndexedDB for persistence |
| Screenshot | page.screenshot({ fullPage: true }) |
Wait for key elements to load first |
| PDF generation | page.pdf({ format: 'A4' }) |
Chromium only, set printBackground: true |
| Clock API | page.clock |
Freeze, fast-forward, or simulate time in tests |
| A11y assertions | toHaveAccessibleName, toHaveRole |
Native assertions without axe-core dependency |
| Viewport assertion | expect(locator).toBeInViewport() |
Assert element is within the visible viewport |
| Changed tests only | --only-changed=$GITHUB_BASE_REF |
Run only test files changed since base branch |
| Docker | mcr.microsoft.com/playwright:v1.58.2-noble |
Use --init --ipc=host flags |
| Debug methods | page.consoleMessages() / page.requests() (v1.56+) |
No event listeners needed |
| Speedboard | HTML reporter (v1.57+) | Identifies slow tests and bottlenecks |
| Playwright Agents | npx playwright init-agents |
Planner, generator, healer for LLM-driven testing |
| Flaky test detection | --fail-on-flaky-tests (v1.50+) |
Exit code 1 on flaky tests in CI |
| Modify live responses | route.fetch() + route.fulfill() |
Intercept real response, tweak JSON, return it |
| Soft assertions | expect.soft(locator) |
Don't stop test on failure, report all at end |
| Retry block | expect(async () => {}).toPass() |
Default timeout is 0 (forever) — always set one |
| Custom matchers | expect.extend() / mergeExpects() |
Define or combine custom assertion methods |
| Actionability matrix | Per-action auto-wait checks | click: all 5 checks, fill: 3, focus/blur: none |
| Test modifiers | test.fixme() / test.fail() / test.slow() |
fixme=skip+track, fail=assert failure, slow=3x |
| Parallel modes | test.describe.configure({ mode: 'serial' }) |
serial, parallel, or default per-describe block |
| Teardown projects | teardown option on setup projects |
Auto-cleanup after all dependents finish |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
| Using CSS selectors over role selectors | Prefer getByRole, getByLabel, getByText for resilience |
| Not closing browser | Always await browser.close() in finally block |
Using setTimeout for waits |
Use locator auto-wait or waitForLoadState |
page.pause() left in CI code |
Guard with if (!process.env.CI) — hangs CI indefinitely |
| Clicking without waiting | Use locator().click() with built-in auto-wait |
| Shared state between tests | Each test gets fresh context via fixtures |
| Testing implementation details | Assert user-visible behavior, not DOM structure |
| Hardcoded waits for dynamic content | Wait for selector appearance or content stabilization |
Missing await on assertions |
All expect() assertions return promises — must be awaited |
| Same user agent for all scraping | Rotate user agents for high-volume scraping |
Using setTimeout for time-dependent tests |
Use page.clock API to freeze/fast-forward time |
| Installing axe-core for simple a11y checks | Use native toHaveAccessibleName/toHaveRole assertions |
Using toPass() without explicit timeout |
Always pass { timeout: 10_000 } — default is 0 (forever) |
Service worker silently blocking page.route() |
Set serviceWorkers: 'block' in context config when using MSW |
Using fill() for autocomplete/debounce inputs |
Use pressSequentially() with optional delay for per-keystroke handling |
storageState losing sessionStorage |
storageState only saves cookies + localStorage — inject sessionStorage via addInitScript() |
Delegation
- Selector troubleshooting: Use
Exploreagent - Test pattern review: Use
Taskagent - Code review: Delegate to
code-revieweragent
For E2E test architecture, Page Object Model patterns, CI sharding strategies, authentication flows, visual regression workflows, or test organization, use the
e2e-testingskill.
References
- Quick start and installation
- E2E testing patterns and assertions
- Selector strategies and best practices
- Configuration and Docker deployment
- Docker and CI
- Debug methods and performance analysis
- Common automation patterns
- Stealth mode and anti-bot bypass
- Known issues and solutions
- Site-specific blocking and bypasses
- Troubleshooting common problems
- Network testing, mocking, and API patterns
- Input patterns, actionability, and test modifiers
- Advanced assertions, polling, custom matchers, and annotations
- Advanced topics: MCP, AI agents, parallel contexts
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install playwright by running npx skills add oakoss/agent-skills --skill playwright in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of playwright, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
