{
  "markdown": "```\n██████╗ ██╗      █████╗ ██╗   ██╗██╗    ██╗██████╗ ██╗ ██████╗ ██╗  ██╗████████╗\n██╔══██╗██║     ██╔══██╗╚██╗ ██╔╝██║    ██║██╔══██╗██║██╔════╝ ██║  ██║╚══██╔══╝\n██████╔╝██║     ███████║ ╚████╔╝ ██║ █╗ ██║██████╔╝██║██║  ███╗███████║   ██║\n██╔═══╝ ██║     ██╔══██║  ╚██╔╝  ██║███╗██║██╔══██╗██║██║   ██║██╔══██║   ██║\n██║     ███████╗██║  ██║   ██║   ╚███╔███╔╝██║  ██║██║╚██████╔╝██║  ██║   ██║\n╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝\n\n███████╗██╗  ██╗██╗██╗     ██╗\n██╔════╝██║ ██╔╝██║██║     ██║\n███████╗█████╔╝ ██║██║     ██║\n╚════██║██╔═██╗ ██║██║     ██║\n███████║██║  ██╗██║███████╗███████╗\n╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝\n```\n<p align=\"left\">\n  <picture>\n    <source\n      srcset=\"https://testdino.com/images/logo-icon-white.svg\"\n      media=\"(prefers-color-scheme: dark)\"\n    />\n    <source\n      srcset=\"https://testdino.com/images/logo-icon-black.svg\"\n      media=\"(prefers-color-scheme: light)\"\n    />\n    <img\n      src=\"https://testdino.com/images/logo-icon-black.svg\"\n      width=\"24\"\n      height=\"24\"\n      alt=\"TestDino Logo\"\n      align=\"center\"\n    />\n  </picture> by\n  <a href=\"https://testdino.com\">testdino.com</a>\n  — Purpose built for debugging, managing, and improving Playwright tests with AI\n</p>\n\n# Playwright Skill Guides\n\n[![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)\n[![Playwright](https://img.shields.io/badge/Playwright-1.63%2B-2EAD33.svg)](https://playwright.dev)\n[![Guides](https://img.shields.io/badge/guides-70-blue.svg)](SKILL.md)\n\nProduction-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.\n\nThese are [Agent Skills](https://docs.claude.com/en/docs/claude-code/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](SKILL.md) is the canonical index the agent reads, including the Golden Rules and architecture-decision guides.\n\nPlaywright 1.63 coverage: test `lock` for serializing contention on a shared resource, `locator.visible()` replacing the `:visible` pseudo-class, aria and screen snapshots in traces (`snapshots: { dom, aria, screen }`), `--add-reporter` for appending rather than replacing reporters, the `perfetto` reporter, typed `request.get<User>()`, and `ariaSnapshotJSON()`. From 1.62: `reporter.preprocess()` for selecting tests before execution, `retryStrategy: 'isolated'`, WebP screenshots with a `quality` parameter, `AbortSignal` on actions and assertions, `locator.waitForFunction()`, `apiResponse.timing()`, and the stories-and-galleries component testing model that replaces the deprecated experimental CT packages. A dedicated [dynamic-test-selection.md](core/dynamic-test-selection.md) guide covers driving quarantine from an external flakiness API.\n\n## Install\n\nAdd every skill pack to your project:\n\n```bash\nnpx skills add testdino-hq/playwright-skill\n```\n\nOr add individual packs:\n\n```bash\nnpx skills add testdino-hq/playwright-skill/core\nnpx skills add testdino-hq/playwright-skill/ci\nnpx skills add testdino-hq/playwright-skill/pom\nnpx skills add testdino-hq/playwright-skill/migration\nnpx skills add testdino-hq/playwright-skill/playwright-cli\n```\n\n> 🎬 Watch the installation guide\n[![Watch the installation guide](https://img.youtube.com/vi/8dRCJZ_we0s/maxresdefault.jpg)](https://www.youtube.com/watch?v=8dRCJZ_we0s)\n\n## Skill Packs\n\n| Pack | Guides | What's covered |\n|---|:---:|---|\n| **core** | 47 | Locators, assertions, fixtures, auth, API testing, network mocking, visual regression, accessibility, debugging, trace-report analysis, framework recipes, architecture decisions |\n| **ci** | 9 | GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, sharding, reporting, coverage |\n| **playwright-cli** | 10 | CLI browser automation, screenshots, tracing, session management, device emulation |\n| **pom** | 2 | Page Object Model patterns, POM vs fixtures vs helpers |\n| **migration** | 2 | Migrating from Cypress, migrating from Selenium |\n\n## Golden Rules\n\nThe patterns every guide assumes (full list with rationale in [SKILL.md](SKILL.md)):\n\n1. **`getByRole()` over CSS/XPath** — resilient to markup changes\n2. **Never `page.waitForTimeout()`** — use web-first assertions or `page.waitForURL()`\n3. **Isolate every test** — no shared state, no order dependencies\n4. **`baseURL` in config** — zero hardcoded URLs in tests\n5. **Mock external services only** — never mock your own app\n\n## Core Skills\n\nThe foundation: writing, debugging, and maintaining reliable tests. New to Playwright? Start with [locators.md](core/locators.md), [assertions-and-waiting.md](core/assertions-and-waiting.md), and [fixtures-and-hooks.md](core/fixtures-and-hooks.md).\n\n### Writing Tests\n\n| Guide | Description |\n|---|---|\n| [locators.md](core/locators.md) | Selector strategies — `getByRole`, `getByText`, `getByTestId` |\n| [locator-strategy.md](core/locator-strategy.md) | Choosing a locator strategy and trade-offs |\n| [assertions-and-waiting.md](core/assertions-and-waiting.md) | Web-first assertions, auto-retry, waiting patterns |\n| [fixtures-and-hooks.md](core/fixtures-and-hooks.md) | `test.extend()`, setup/teardown, worker-scoped fixtures |\n| [configuration.md](core/configuration.md) | `playwright.config.ts` — projects, timeouts, reporters, web server |\n| [test-organization.md](core/test-organization.md) | File structure, tagging, `test.describe`, test filtering |\n| [test-data-management.md](core/test-data-management.md) | Factories, seeding, cleanup strategies |\n| [authentication.md](core/authentication.md) | Storage state reuse, multi-role auth, session management |\n| [auth-flows.md](core/auth-flows.md) | Login, OAuth, and multi-step auth flows |\n| [api-testing.md](core/api-testing.md) | REST and GraphQL testing with `request` fixture |\n| [network-mocking.md](core/network-mocking.md) | Route interception, HAR replay, response modification |\n| [when-to-mock.md](core/when-to-mock.md) | When to mock vs hit real services |\n| [forms-and-validation.md](core/forms-and-validation.md) | Form fills, validation, error states, multi-step wizards |\n| [crud-testing.md](core/crud-testing.md) | Create / read / update / delete flow testing |\n| [search-and-filter.md](core/search-and-filter.md) | Search and filter UI testing |\n| [drag-and-drop.md](core/drag-and-drop.md) | Drag-and-drop interactions |\n| [file-operations.md](core/file-operations.md) | File handling in tests |\n| [file-upload-download.md](core/file-upload-download.md) | Upload and download flows |\n| [error-and-edge-cases.md](core/error-and-edge-cases.md) | Error states and edge-case coverage |\n| [visual-regression.md](core/visual-regression.md) | Screenshot comparison, thresholds, masking dynamic content |\n| [accessibility.md](core/accessibility.md) | axe-core integration, ARIA assertions, a11y auditing |\n| [component-testing.md](core/component-testing.md) | Mount React/Vue/Svelte components in isolation |\n| [mobile-and-responsive.md](core/mobile-and-responsive.md) | Device emulation, viewport testing, touch interactions |\n\n### Debugging & Fixing\n\n| Guide | Description |\n|---|---|\n| [debugging.md](core/debugging.md) | Trace viewer, `PWDEBUG`, UI mode, headed + slow-mo |\n| [trace-analysis.md](core/trace-analysis.md) | Debug a `trace.zip` from the terminal with the `npx playwright trace` CLI — agent-native, decision trees, failure playbooks |\n| [error-index.md](core/error-index.md) | Common error messages and how to fix them |\n| [flaky-tests.md](core/flaky-tests.md) | Root causes, retry strategies, stabilization patterns |\n| [common-pitfalls.md](core/common-pitfalls.md) | Top beginner mistakes and how to avoid them |\n\n### Architecture Decisions\n\n| Question | Guide |\n|---|---|\n| E2E vs component vs API? | [test-architecture.md](core/test-architecture.md) |\n| Which locator strategy? | [locator-strategy.md](core/locator-strategy.md) |\n| Mock vs real services? | [when-to-mock.md](core/when-to-mock.md) |\n| POM vs fixtures vs helpers? | [pom-vs-fixtures-vs-helpers.md](pom/pom-vs-fixtures-vs-helpers.md) |\n\n### Framework Recipes\n\n| Guide | Description |\n|---|---|\n| [nextjs.md](core/nextjs.md) | App Router + Pages Router testing |\n| [react.md](core/react.md) | CRA, Vite, component testing |\n| [vue.md](core/vue.md) | Vue 3 / Nuxt testing |\n| [angular.md](core/angular.md) | Angular testing patterns |\n\n### Specialized Topics\n\n| Guide | Description |\n|---|---|\n| [browser-apis.md](core/browser-apis.md) | Geolocation, clipboard, permissions |\n| [iframes-and-shadow-dom.md](core/iframes-and-shadow-dom.md) | Cross-frame testing, Shadow DOM piercing |\n| [multi-context-and-popups.md](core/multi-context-and-popups.md) | Multi-tab, popups, new windows |\n| [multi-user-and-collaboration.md](core/multi-user-and-collaboration.md) | Multi-user and real-time collaboration flows |\n| [websockets-and-realtime.md](core/websockets-and-realtime.md) | WebSocket testing, real-time UI |\n| [canvas-and-webgl.md](core/canvas-and-webgl.md) | Canvas testing, visual comparison |\n| [electron-testing.md](core/electron-testing.md) | Desktop app testing with Electron |\n| [security-testing.md](core/security-testing.md) | XSS, CSRF, header validation |\n| [performance-testing.md](core/performance-testing.md) | Core Web Vitals, Lighthouse, benchmarks |\n| [clock-and-time-mocking.md](core/clock-and-time-mocking.md) | Fake timers, date mocking |\n| [service-workers-and-pwa.md](core/service-workers-and-pwa.md) | PWA testing, offline mode |\n| [browser-extensions.md](core/browser-extensions.md) | Extension testing patterns |\n| [third-party-integrations.md](core/third-party-integrations.md) | Testing against third-party services |\n| [i18n-and-localization.md](core/i18n-and-localization.md) | Multi-language, RTL, locale testing |\n\n## CI/CD Skills\n\n| Guide | Description |\n|---|---|\n| [ci-github-actions.md](ci/ci-github-actions.md) | Workflows, caching, artifact uploads |\n| [ci-gitlab.md](ci/ci-gitlab.md) | GitLab CI pipelines |\n| [ci-other.md](ci/ci-other.md) | CircleCI, Azure DevOps, Jenkins |\n| [parallel-and-sharding.md](ci/parallel-and-sharding.md) | Sharding across CI runners |\n| [docker-and-containers.md](ci/docker-and-containers.md) | Containerized test execution |\n| [reporting-and-artifacts.md](ci/reporting-and-artifacts.md) | HTML reports, traces, screenshots |\n| [test-coverage.md](ci/test-coverage.md) | Code coverage collection |\n| [global-setup-teardown.md](ci/global-setup-teardown.md) | One-time setup/teardown |\n| [projects-and-dependencies.md](ci/projects-and-dependencies.md) | Multi-project config, dependencies |\n\n## Playwright CLI Skills\n\n| Guide | Description |\n|---|---|\n| [core-commands.md](playwright-cli/core-commands.md) | Open, navigate, click, fill, keyboard, mouse |\n| [request-mocking.md](playwright-cli/request-mocking.md) | Route interception, conditional mocks, HAR replay |\n| [running-custom-code.md](playwright-cli/running-custom-code.md) | Full Playwright API via `run-code` |\n| [session-management.md](playwright-cli/session-management.md) | Named sessions, isolation, persistent profiles |\n| [storage-and-auth.md](playwright-cli/storage-and-auth.md) | Cookies, localStorage, auth state save/restore |\n| [test-generation.md](playwright-cli/test-generation.md) | Auto-generate test code from CLI interactions |\n| [tracing-and-debugging.md](playwright-cli/tracing-and-debugging.md) | Traces, console/network monitoring |\n| [screenshots-and-media.md](playwright-cli/screenshots-and-media.md) | Screenshots, video recording, PDF export |\n| [device-emulation.md](playwright-cli/device-emulation.md) | Viewport, geolocation, locale, dark mode |\n| [advanced-workflows.md](playwright-cli/advanced-workflows.md) | Popups, scraping, accessibility auditing |\n\n## Migration Skills\n\n| Guide | Description |\n|---|---|\n| [from-cypress.md](migration/from-cypress.md) | Cypress to Playwright migration |\n| [from-selenium.md](migration/from-selenium.md) | Selenium/WebDriver to Playwright migration |\n\n## Page Object Model Skills\n\n| Guide | Description |\n|---|---|\n| [page-object-model.md](pom/page-object-model.md) | POM patterns for Playwright |\n| [pom-vs-fixtures-vs-helpers.md](pom/pom-vs-fixtures-vs-helpers.md) | When to use POM vs fixtures vs helpers |\n\n## License\n\n[MIT](LICENSE)\n",
  "bytes": 12495,
  "sha": "4a4bbc523572756d7ba3a3d67a7c722ec8b3180ea2c5f1f80ccdc620b95dfedc",
  "repo_slug": "testdino-hq/playwright-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_testdino_hq_playwright_skill_playwright__ca9ece58/readme"
}