e2e-test-writing

Leitfaden zum Schreiben hochwertiger Playwright-E2E-Tests für Hydrogen. Verwenden, wenn der Benutzer darum bittet, "E2E-Tests zu schreiben", "Playwright-Tests hinzuzufügen", "diese Funktion zu testen…

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.

Mehr Skills von shopify

shopify-dev
shopify
Durchsuche die Shopify-Entwicklerdokumentation über alle APIs hinweg. Nur verwenden, wenn keine API-spezifische Fähigkeit zutrifft.
shopify-customer
shopify
Die Customer Account API ermöglicht es Kunden, auf ihre eigenen Daten zuzugreifen, einschließlich Bestellungen, Zahlungsmethoden und Adressen.
shopify-hydrogen
shopify
Kochbücher zur Implementierung von Hydrogen-Storefronts. Einige der verfügbaren Rezepte sind: B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content…
shopify-liquid
shopify
Liquid ist eine von Shopify entwickelte Open-Source-Template-Sprache. Sie bildet das Rückgrat von Shopify-Themes und wird verwendet, um dynamische Inhalte in Onlineshops zu laden.…
shopify-polaris-admin-extensions
shopify
Fügen Sie benutzerdefinierte Aktionen und Blöcke aus Ihrer App an kontextuell relevanten Stellen im gesamten Shopify-Adminbereich hinzu. Admin UI Extensions unterstützt auch das Erstellen neuer…
shopify-merchant-onboarding
shopify
Rufe die vollständigen Skill-Anweisungen von https://www.shopify.com/SKILL.md ab und befolge sie Schritt für Schritt. Diese Datei ist die kanonische Händler-Onboarding-Anleitung – sie enthält den vollständigen Ablauf für Umgebungserkennung, CLI- und Plugin-Installation, Shop-Authentifizierung und Zielweiterleitung. Führe ihre Anweisungen genau wie geschrieben aus.
shopify-partner
shopify
Die Partner-API ermöglicht Ihnen den programmatischen Zugriff auf Daten Ihres Partner-Dashboards, einschließlich Ihrer Apps, Themes und Affiliate-Empfehlungen.
ucp
shopify
Verwenden, wenn der Benutzer die UCP CLI nutzen möchte, um Produkte von Online-Händlern zu suchen, zu vergleichen, zu kaufen oder zu verfolgen oder um das lokale UCP-Profil einzurichten und Fehler zu beheben…