playwright-skill

왜 쓰나요

핵심 기능

Role-based and accessible locator patterns (avoid CSS/XPath fragility)
Network stubbing and response mocking idioms
Fixtures for auth state reuse across tests
Trace capture + debugging workflow via trace viewer
Parallelism and sharding guidance
Flakiness mitigation: web-first assertions, retry policy

라이브 데모

실제 사용 모습

playwright-skill-2.replay ▶ 준비됨

0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: playwright-skill

How to write a maintainable first E2E test

👤 Developers adding Playwright to a project for the first time ⏱ ~30 min beginner

언제 쓸까: You have a staging URL and a login flow; you want one solid test before scaling.

흐름

Describe the flow

Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ 복사됨

→ Test using getByRole, getByLabel; no .class or xpath
Add auth reuse fixture

Convert the login into a reusable auth fixture so other tests skip logging in.✓ 복사됨

→ storageState-based fixture + globalSetup
Ensure non-flakiness

Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ 복사됨

→ expect(locator).toBeVisible() rather than waitForSelector

결과: A robust first test plus a fixture the whole suite inherits.

함정

Claude reaches for page.waitForTimeout — Tell skill explicitly: no arbitrary waits, use web-first assertions

Stub a backend API to test frontend edge cases

👤 Frontend engineers testing empty/error/loading states ⏱ ~25 min intermediate

언제 쓸까: You can't easily put the real backend into each state.

흐름

Stub the endpoint

Stub GET /api/orders to return empty array, then assert the empty state renders.✓ 복사됨

→ route.fulfill with JSON body; assertion on empty-state element
Vary responses per test

Parameterize the stub: one test for 500 error, one for timeout, one for partial data.✓ 복사됨

→ Three tests sharing a helper

결과: Edge-state coverage without touching the backend.

함정

Stub leaks across tests — Set up in beforeEach or fixture scope, not in a module-level hook

Debug a flaky test using trace viewer

👤 Engineers triaging a flaky suite in CI ⏱ ~45 min intermediate

언제 쓸까: A test passes locally, fails 5% of the time in CI.

흐름

Capture trace on retry

Configure trace: 'on-first-retry' in playwright.config.ts.✓ 복사됨

→ Config diff
Analyze the trace

Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ 복사됨

→ Concrete diff in network/DOM timing
Fix

Based on the trace, propose the minimal change to de-flake.✓ 복사됨

→ Specific locator or assertion change, not a blanket sleep

결과: A de-flaked test with a documented root cause.

함정

Treating flakes by bumping timeouts — Most flakes are hidden race conditions — the trace usually reveals a missing await

조합

다른 MCP와 조합해 10배 효율

playwright-skill-2 + seo-audit-skill

Playwright captures pages, SEO audit runs against rendered HTML for JS-heavy apps

Use Playwright to authenticate and capture logged-in pages, then run seo-audit against each.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
Locator patterns	-	Writing new selectors
Network stubbing	-	Testing frontend edge states
Fixtures & auth reuse	-	Scaling a suite past 5 tests
Trace analysis	trace.zip	Debugging flakes
Parallelism & sharding	-	Suites running >5 min in CI

비용 및 제한

운영 비용

API 쿼터: None
호출당 토큰: Test generation: 3-8k tokens
금액: Free
팁: Generate one test manually, save as a template, and have Claude follow the template for others.

보안

권한, 시크릿, 파급범위

자격 증명 저장: Test credentials in .env (via dotenv). Never commit storageState.json with production auth.

데이터 외부 송신: Tests hit your target URL. No third-party calls from the skill.

storageState.json contains session cookies. Gitignore it and don't upload as CI artifact publicly.

문제 해결

자주 발생하는 오류와 해결

Test is flaky on CI only

Enable trace: 'on-first-retry' and analyze the trace from the failing attempt.

확인: npx playwright show-trace trace.zip

getByRole doesn't find an element that's clearly there

Element may lack an accessible name. Use Playwright Inspector to see the computed role/name.

확인: npx playwright test --ui

Login fixture works locally, fails in CI

CI may need --headed=false and explicit browser install. Run npx playwright install --with-deps in CI.

대안