e2e-test-writing

bởi shopify

Hướng dẫn viết bài kiểm tra E2E Playwright chất lượng cao cho Hydrogen. Sử dụng khi người dùng yêu cầu "viết bài kiểm tra e2e", "thêm bài kiểm tra playwright", "kiểm tra tính năng này…

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.

Thêm skills từ shopify

agent-device
shopify
Tương tác với trình giả lập iOS hoặc thiết bị/trình giả lập Android bằng tọa độ dựa trên ảnh chụp nhanh. Sử dụng ảnh chụp nhanh cây trợ năng để nhắm mục tiêu chính xác vào phần tử, với…
official
analyze-feedback
shopify
Phân tích các tạo phẩm phản hồi của tác nhân từ các lần chạy quy trình GitHub Actions, trích xuất các bài học có thể hành động, và tích hợp chúng vào các tệp kỹ năng và CLAUDE.md. Theo dõi…
official
fix-github-issue
shopify
Quy trình đầy đủ để sửa một vấn đề GitHub - hiểu vấn đề, tái hiện, chẩn đoán nguyên nhân gốc rễ, sửa, kiểm thử trên trình giả lập iOS/Android, xem xét và tạo PR
official
review-and-test
shopify
Xem xét một PR hoặc nhánh FlashList, chạy kiểm thử đơn vị, kiểm thử trên trình giả lập iOS, và xác minh hành vi RTL/LTR. Chia sẻ ngữ cảnh với kỹ năng fix-github-issue.
official
triage-issue
shopify
Phân loại một vấn đề GitHub — xác định mức độ ưu tiên (P0/P1/P2), tìm kiếm các vấn đề trùng lặp và áp dụng nhãn.
official
upgrade-react-native
shopify
Nâng cấp ứng dụng fixture React Native lên phiên bản mới. Bao gồm các phụ thuộc JS, Android (Gradle, Kotlin, SDK), iOS (Podfile, pbxproj), cấu hình Metro và bên thứ ba…
official
hydrogen-dev-workflow
shopify
Hướng dẫn quy trình phát triển cho framework Hydrogen của Shopify. Bao gồm kiểm thử, nâng cấp, công thức, quy ước PR, kiến trúc phân tích, công cụ CLI, và…
official
hydrogen-release-process
shopify
Hướng dẫn quy trình phát hành cho framework Hydrogen của Shopify. Bao gồm toàn bộ quy trình phát hành (tiêu chuẩn, sửa lỗi ngược, snapshot), các bước thủ công so với tự động, changelog.json…
official