e2e-test-writing

작성자: shopify

고품질 Playwright E2E 테스트를 Hydrogen용으로 작성하기 위한 가이드입니다. 사용자가 "e2e 테스트 작성", "playwright 테스트 추가", "이 기능 테스트…"를 요청할 때 사용하세요.

npx skills add https://github.com/shopify/hydrogen --skill e2e-test-writing

/e2e-test-writing - E2E Test Writing for Hydrogen

Use this skill when implementing or reviewing Playwright E2E tests in this repository.

Syntax

/e2e-test-writing <task>

Examples:

  • /e2e-test-writing add recipe coverage for cart drawer quantity changes
  • /e2e-test-writing review locator quality in e2e/tests/cart.test.ts

Source of Truth

  • Follow e2e/CLAUDE.md for all active test patterns and conventions.
  • Do not duplicate large guidance here; keep this skill as the entry point.

Core Expectations

  1. Prefer role-based, accessibility-first selectors.
  2. Assert user-visible behavior, not implementation details.
  3. Wait for visible effects (expect, expect.poll), never arbitrary timeouts.
  4. Keep tests isolated and organize shared setup with beforeEach when it improves clarity.
  5. Run Playwright tests in headless mode.

Workflow

  1. Read e2e/CLAUDE.md before writing tests.
  2. Implement or update tests with user-centric assertions.
  3. Improve accessibility markup when it enables stronger locators.
  4. Run targeted Playwright tests first, then broader suites if needed.

Verification Commands

pnpm exec playwright test --project=skeleton

Use narrower test paths during iteration, then run the appropriate full project suite before finishing.

shopify의 다른 스킬

agent-device
shopify
iOS 시뮬레이터 또는 Android 에뮬레이터/기기와 스냅샷 기반 좌표를 사용하여 상호작용합니다. 접근성 트리 스냅샷을 사용하여 정확한 요소 타겟팅을 수행하며, 추가로...
official
analyze-feedback
shopify
GitHub Actions 워크플로우 실행에서 에이전트 피드백 아티팩트를 분석하고, 실행 가능한 학습 내용을 추출하여 스킬 파일과 CLAUDE.md에 통합합니다. 추적…
official
fix-github-issue
shopify
GitHub 이슈를 수정하는 전체 워크플로우 - 문제 이해, 재현, 근본 원인 진단, 수정, iOS/Android 시뮬레이터에서 테스트, 검토, PR 제출
official
review-and-test
shopify
FlashList PR 또는 브랜치를 리뷰하고, 유닛 테스트를 실행하며, iOS 시뮬레이터에서 테스트하고, RTL/LTR 동작을 확인합니다. fix-github-issue 스킬과 컨텍스트를 공유합니다.
official
triage-issue
shopify
GitHub 이슈를 분류하고 — 우선순위(P0/P1/P2)를 지정하며, 중복 이슈를 검색하고, 레이블을 적용합니다.
official
upgrade-react-native
shopify
React Native 픽스처 앱을 새 버전으로 업그레이드합니다. JS 종속성, Android(Gradle, Kotlin, SDK), iOS(Podfile, pbxproj), Metro 설정 및 타사…를 포함합니다.
official
hydrogen-dev-workflow
shopify
Shopify의 Hydrogen 프레임워크를 위한 개발 워크플로우 가이드입니다. 테스트, 업그레이드, 레시피, PR 규칙, 분석 아키텍처, CLI 도구 등을 다룹니다.
official
hydrogen-release-process
shopify
Shopify의 Hydrogen 프레임워크 릴리스 프로세스 가이드. 전체 릴리스 흐름(표준, 백픽스, 스냅샷), 수동 및 자동 단계, changelog.json 등을 다룹니다.
official