diff --git a/e2e/CLAUDE.md b/e2e/CLAUDE.md index c9c092445e..dda5695522 100644 --- a/e2e/CLAUDE.md +++ b/e2e/CLAUDE.md @@ -17,6 +17,27 @@ ❌ `page.waitForResponse(...)` - Implementation detail ❌ `page.locator('.css-class')` - Fragile selectors ❌ Adding test IDs when accessibility markup would work +❌ Hardcoding dynamic store data names (e.g., collection titles from `sortKey: UPDATED_AT` queries) + +### Dynamic Store Data + +When testing homepage sections that query dynamic store data (e.g., "most recently updated collection"), +assert **structure** rather than specific names: + +```typescript +// GOOD: Assert that a featured collection heading exists (any h1) +const featuredCollectionHeading = page.getByRole('heading', {level: 1}); +await expect(featuredCollectionHeading).toBeVisible(); + +// AVOID: Hardcoding a collection name that depends on store state +const featuredCollectionHeading = page.getByRole('heading', { + level: 1, + name: 'Winter Collection', // ❌ Breaks when a different collection is most recently updated +}); +``` + +Only assert specific entity names when navigating to a known entity by **handle** (a stable identifier), +e.g., `/products/${KNOWN_PRODUCT.handle}`. ## Test Isolation diff --git a/e2e/specs/recipes/third-party-api.spec.ts b/e2e/specs/recipes/third-party-api.spec.ts index 942006504e..c40ca4fa77 100644 --- a/e2e/specs/recipes/third-party-api.spec.ts +++ b/e2e/specs/recipes/third-party-api.spec.ts @@ -19,12 +19,6 @@ setRecipeFixture({ const RECIPE_HEADING_TEXT = 'Rick & Morty Characters (Third-Party API Example)'; -// The skeleton queries the most recently updated collection, which may change over time. -// If this collection is removed or renamed in hydrogenPreviewStorefront, update this constant. -const KNOWN_FEATURED_COLLECTION = { - title: 'Winter Collection', -} as const; - test.describe('Third-party API Recipe', () => { test.beforeEach(async ({page}) => { await page.goto('/'); @@ -66,11 +60,6 @@ test.describe('Third-party API Recipe', () => { test('preserves existing homepage sections alongside third-party content', async ({ page, }) => { - const featuredCollectionHeading = page.getByRole('heading', { - level: 1, - name: KNOWN_FEATURED_COLLECTION.title, - }); - await expect(featuredCollectionHeading).toBeVisible(); const recommendedProductsSection = page.getByRole('region', { name: 'Recommended Products',