Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions e2e/CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
11 changes: 0 additions & 11 deletions e2e/specs/recipes/third-party-api.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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('/');
Expand Down Expand Up @@ -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',
Expand Down
Loading