test: add markets recipe test

[itsjustriley]

WHY are these changes introduced?

Fixes https://github.com/Shopify/developer-tools-team/issues/1041 (Localization/Markets tests)

Part of https://github.com/Shopify/developer-tools-team/issues/1057 (Recipe tests)

Fixes a bug where add to cart button wasn't locale aware.

Establishes reusable foundation for automated end-to-end testing for cookbook recipes.

Adds comprehensive test coverage for the Markets recipe (which handles localization.)

WHAT is this pull request doing?

Recipe Testing Infrastructure

New test framework (e2e/fixtures/recipe.ts):

• setRecipeFixture() helper that applies recipes on-demand, builds them, and starts a dev server
• Caching system for fast test runs (reuses built fixtures)
• Automatic cleanup (always reverts skeleton template changes)
• Supports multiple test stores and cache control

Documentation (e2e/specs/recipes/README.md):

• Comprehensive guide for writing recipe tests
• Best practices and examples
• Architecture explanation and troubleshooting tips

Markets Recipe Tests (e2e/specs/recipes/markets.spec.ts)

Tests validate:

• URL-based localization (locale prefixes in routes)
• API-driven currency formatting (CAD vs USD)
• Locale-aware navigation links
• Country selector functionality
• Cart creation with correct market context
• Locale persistence through user flows

Recipe Bug Fixes

Fixed cart currency bug and improved type safety (AddToCartButton.tsx.6e553f.patch + i18n.ts):

• AddToCartButton now posts to locale-aware route (/FR-CA/cart instead of /cart)
• Added function overload signatures to useLocalizedPath() for proper TypeScript type inference when used with strict components like CartForm
• Ensures carts are created with correct market context and currency

Added accessibility (CountrySelector.tsx.dc473b.patch):

• Added ARIA labels to CountrySelector for screen readers and testability
• aria-label="Country selector" on details element
• aria-label="Current locale: ${label}" on summary element (dynamically shows current locale)
• aria-label="Switch to ${locale}" on locale switch buttons (dynamically shows target locale)

Test Fixture Improvements

Locale-aware helpers (e2e/fixtures/storefront.ts):

• navigateToFirstProduct() now waits for URL change (prevents flaky tests)
• navigateToCart() now preserves locale prefix (/FR-CA/cart vs /cart)
• Benefits all tests, not just Markets recipe

HOW to test your changes?

Run the Markets recipe tests

# Run all recipe tests
npx playwright test --project=recipes

# Run just the Markets tests
npx playwright test --project=recipes markets

# Force regenerate fixture (if recipe changed)
rm -rf .tmp/recipe-fixtures/markets
npx playwright test --project=recipes markets

Expected results:

• 6 tests pass
• Tests validate URL localization, currency formatting, and country selector

Verify recipe bug fixes

1. Apply the Markets recipe:

   npm run cookbook --workspace=cookbook -- apply --recipe markets

2. Start dev server in skeleton template:

   cd templates/skeleton
   npm run dev

3. Navigate to /FR-CA/products/snowboard

4. Add to cart

5. Verify cart shows CAD pricing (e.g., CA$#,###.), not USD

Post-merge steps

None required. Tests run in CI as part of the recipes project.

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[shopify]

Oxygen deployed a preview of your recipe-test-setup branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	February 24, 2026 5:42 PM

Learn more about Hydrogen's GitHub integration.

[fredericoo]

i dont love this

there’s a lot of flaky logic here that can break; it ignores subdomain localization, and accepts locales anywhere in the URL

did you choose this over clicking the cart button for a reason?

[itsjustriley]

The cart button doesn't go to the cart page, it opens the drawer. I can do this inline with the hard-coded localized url in the test rather than updating the helper to handle locales since that's markets specific. We don't actually have a button that goes to the cart page itself (which is why we have this helper).

[fredericoo]

this works, but i’d love if we could have more "fail fast" tests rather than this type

by fail fast I mean dont let playwright wait until a timeout to see if a thing is there or not

e.g.:
- if we had a way to spot that price element (like a screen reader only label?) we could find it straight away without checking for the text yet
- then we can assert the price’s text is X

this is all made much easier the less logic we have in our tests. navigateToFirstProduct is really making our life tough here because it’s so non deterministic in a real backend situation.

i’m going to start a discussion about this in our channel

tl;dr: it works but flaky and makes CI hang, lets discuss improvements in a followup