by testdino.com — Purpose built for debugging, managing, and improving Playwright tests with AI
概要
by testdino.com — Purpose built for debugging, managing, and improving Playwright tests with AI
README
██████╗ ██╗ █████╗ ██╗ ██╗██╗ ██╗██████╗ ██╗ ██████╗ ██╗ ██╗████████╗
██╔══██╗██║ ██╔══██╗╚██╗ ██╔╝██║ ██║██╔══██╗██║██╔════╝ ██║ ██║╚══██╔══╝
██████╔╝██║ ███████║ ╚████╔╝ ██║ █╗ ██║██████╔╝██║██║ ███╗███████║ ██║
██╔═══╝ ██║ ██╔══██║ ╚██╔╝ ██║███╗██║██╔══██╗██║██║ ██║██╔══██║ ██║
██║ ███████╗██║ ██║ ██║ ╚███╔███╔╝██║ ██║██║╚██████╔╝██║ ██║ ██║
╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚══╝╚══╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝
███████╗██╗ ██╗██╗██╗ ██╗
██╔════╝██║ ██╔╝██║██║ ██║
███████╗█████╔╝ ██║██║ ██║
╚════██║██╔═██╗ ██║██║ ██║
███████║██║ ██╗██║███████╗███████╗
╚══════╝╚═╝ ╚═╝╚═╝╚══════╝╚══════╝
by testdino.com — Purpose built for debugging, managing, and improving Playwright tests with AI
Playwright Skill Guides
Production-tested Playwright guides for E2E, API, component, visual, accessibility, and security testing, plus CI/CD, CLI automation, trace-report debugging, page objects, and migration. 70 guides with TypeScript and JavaScript examples throughout.
These are Agent Skills — Markdown guides an AI coding agent loads on demand. Install them with the skills CLI and your agent pulls the right guide when you ask it to write, debug, or scale Playwright tests. SKILL.md is the canonical index the agent reads, including the Golden Rules and architecture-decision guides.
Playwright 1.61 coverage: WebAuthn passkey testing (context.credentials), the page.localStorage / page.sessionStorage Web Storage API, new video retention modes, expect.soft.poll(), WebSockets in HAR and traces, and apiResponse.securityDetails() / serverAddr() — plus all 1.60 features (on-demand HAR in tracing, locator.drop(), page-level aria snapshots, test.abort(), getByRole({ description }), toHaveCSS({ pseudo })) and 1.59 features.
Install
Add every skill pack to your project:
npx skills add testdino-hq/playwright-skill
Or add individual packs:
npx skills add testdino-hq/playwright-skill/core
npx skills add testdino-hq/playwright-skill/ci
npx skills add testdino-hq/playwright-skill/pom
npx skills add testdino-hq/playwright-skill/migration
npx skills add testdino-hq/playwright-skill/playwright-cli
🎬 Watch the installation guide
Skill Packs
| Pack | Guides | What’s covered |
|---|---|---|
| core | 47 | Locators, assertions, fixtures, auth, API testing, network mocking, visual regression, accessibility, debugging, trace-report analysis, framework recipes, architecture decisions |
| ci | 9 | GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, sharding, reporting, coverage |
| playwright-cli | 10 | CLI browser automation, screenshots, tracing, session management, device emulation |
| pom | 2 | Page Object Model patterns, POM vs fixtures vs helpers |
| migration | 2 | Migrating from Cypress, migrating from Selenium |
Golden Rules
The patterns every guide assumes (full list with rationale in SKILL.md):
getByRole()over CSS/XPath — resilient to markup changes- Never
page.waitForTimeout()— use web-first assertions orpage.waitForURL() - Isolate every test — no shared state, no order dependencies
baseURLin config — zero hardcoded URLs in tests- Mock external services only — never mock your own app
Core Skills
The foundation: writing, debugging, and maintaining reliable tests. New to Playwright? Start with locators.md, assertions-and-waiting.md, and fixtures-and-hooks.md.
Writing Tests
| Guide | Description |
|---|---|
| locators.md | Selector strategies — getByRole, getByText, getByTestId |
| locator-strategy.md | Choosing a locator strategy and trade-offs |
| assertions-and-waiting.md | Web-first assertions, auto-retry, waiting patterns |
| fixtures-and-hooks.md | test.extend(), setup/teardown, worker-scoped fixtures |
| configuration.md | playwright.config.ts — projects, timeouts, reporters, web server |
| test-organization.md | File structure, tagging, test.describe, test filtering |
| test-data-management.md | Factories, seeding, cleanup strategies |
| authentication.md | Storage state reuse, multi-role auth, session management |
| auth-flows.md | Login, OAuth, and multi-step auth flows |
| api-testing.md | REST and GraphQL testing with request fixture |
| network-mocking.md | Route interception, HAR replay, response modification |
| when-to-mock.md | When to mock vs hit real services |
| forms-and-validation.md | Form fills, validation, error states, multi-step wizards |
| crud-testing.md | Create / read / update / delete flow testing |
| search-and-filter.md | Search and filter UI testing |
| drag-and-drop.md | Drag-and-drop interactions |
| file-operations.md | File handling in tests |
| file-upload-download.md | Upload and download flows |
| error-and-edge-cases.md | Error states and edge-case coverage |
| visual-regression.md | Screenshot comparison, thresholds, masking dynamic content |
| accessibility.md | axe-core integration, ARIA assertions, a11y auditing |
| component-testing.md | Mount React/Vue/Svelte components in isolation |
| mobile-and-responsive.md | Device emulation, viewport testing, touch interactions |
Debugging & Fixing
| Guide | Description |
|---|---|
| debugging.md | Trace viewer, PWDEBUG, UI mode, headed + slow-mo |
| trace-analysis.md | Debug a trace.zip from the terminal with the npx playwright trace CLI — agent-native, decision trees, failure playbooks |
| error-index.md | Common error messages and how to fix them |
| flaky-tests.md | Root causes, retry strategies, stabilization patterns |
| common-pitfalls.md | Top beginner mistakes and how to avoid them |
Architecture Decisions
| Question | Guide |
|---|---|
| E2E vs component vs API? | test-architecture.md |
| Which locator strategy? | locator-strategy.md |
| Mock vs real services? | when-to-mock.md |
| POM vs fixtures vs helpers? | pom-vs-fixtures-vs-helpers.md |
Framework Recipes
| Guide | Description |
|---|---|
| nextjs.md | App Router + Pages Router testing |
| react.md | CRA, Vite, component testing |
| vue.md | Vue 3 / Nuxt testing |
| angular.md | Angular testing patterns |
Specialized Topics
| Guide | Description |
|---|---|
| browser-apis.md | Geolocation, clipboard, permissions |
| iframes-and-shadow-dom.md | Cross-frame testing, Shadow DOM piercing |
| multi-context-and-popups.md | Multi-tab, popups, new windows |
| multi-user-and-collaboration.md | Multi-user and real-time collaboration flows |
| websockets-and-realtime.md | WebSocket testing, real-time UI |
| canvas-and-webgl.md | Canvas testing, visual comparison |
| electron-testing.md | Desktop app testing with Electron |
| security-testing.md | XSS, CSRF, header validation |
| performance-testing.md | Core Web Vitals, Lighthouse, benchmarks |
| clock-and-time-mocking.md | Fake timers, date mocking |
| service-workers-and-pwa.md | PWA testing, offline mode |
| browser-extensions.md | Extension testing patterns |
| third-party-integrations.md | Testing against third-party services |
| i18n-and-localization.md | Multi-language, RTL, locale testing |
CI/CD Skills
| Guide | Description |
|---|---|
| ci-github-actions.md | Workflows, caching, artifact uploads |
| ci-gitlab.md | GitLab CI pipelines |
| ci-other.md | CircleCI, Azure DevOps, Jenkins |
| parallel-and-sharding.md | Sharding across CI runners |
| docker-and-containers.md | Containerized test execution |
| reporting-and-artifacts.md | HTML reports, traces, screenshots |
| test-coverage.md | Code coverage collection |
| global-setup-teardown.md | One-time setup/teardown |
| projects-and-dependencies.md | Multi-project config, dependencies |
Playwright CLI Skills
| Guide | Description |
|---|---|
| core-commands.md | Open, navigate, click, fill, keyboard, mouse |
| request-mocking.md | Route interception, conditional mocks, HAR replay |
| running-custom-code.md | Full Playwright API via run-code |
| session-management.md | Named sessions, isolation, persistent profiles |
| storage-and-auth.md | Cookies, localStorage, auth state save/restore |
| test-generation.md | Auto-generate test code from CLI interactions |
| tracing-and-debugging.md | Traces, console/network monitoring |
| screenshots-and-media.md | Screenshots, video recording, PDF export |
| device-emulation.md | Viewport, geolocation, locale, dark mode |
| advanced-workflows.md | Popups, scraping, accessibility auditing |
Migration Skills
| Guide | Description |
|---|---|
| from-cypress.md | Cypress to Playwright migration |
| from-selenium.md | Selenium/WebDriver to Playwright migration |
Page Object Model Skills
| Guide | Description |
|---|---|
| page-object-model.md | POM patterns for Playwright |
| pom-vs-fixtures-vs-helpers.md | When to use POM vs fixtures vs helpers |
License
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add testdino-hq/playwright-skill