e2e-test-writing

от shopify

Guide for writing high-quality Playwright E2E tests for Hydrogen. Use when the user asks to "write e2e tests", "add playwright tests", "test this feature…

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.

Больше skills от 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
Проверить PR или ветку FlashList, запустить модульные тесты, протестировать на симуляторе 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
e2e-test-writing
shopify
Руководство по написанию высококачественных Playwright E2E-тестов для Hydrogen. Используйте, когда пользователь просит «написать e2e-тесты», «добавить playwright-тесты», «протестировать эту функцию…»
official
hydrogen-dev-workflow
shopify
Руководство по рабочему процессу разработки для фреймворка Hydrogen от Shopify. Охватывает тестирование, обновление, рецепты, соглашения о PR, архитектуру аналитики, инструменты CLI и…
official