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 23, 2026 3:22 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?

[fredericoo]

code is self documenting for these tests, if the target is to help LLMs write better tests

if the target of this doc is to make our lives easier and document decisions, we should shorten it BY A LOT

tl;dr: no readmes or any context addition for LLMs unless specifically steering them in a direction, short tips for humans

great watch/read: https://x.com/theo/status/2025900730847232409
covers this article https://news.ycombinator.com/item?id=47034087

[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