Skip to content

Use checkout test IDs in the portable storefront suite - #4220

Open
Ji-One1 wants to merge 3 commits into
jb-cart-testidsfrom
jb-checkout-testids
Open

Ji-One1 wants to merge 3 commits into
jb-cart-testidsfrom
jb-checkout-testids

Conversation

@Ji-One1

@Ji-One1 Ji-One1 commented Oct 20, 2026 •

Copy link
Copy Markdown
Collaborator

The checkout journey needs to find the populated cart and activate its checkout link without depending on English button text or unrelated links elsewhere on the page.

PR 3 of the test-ID migration, based on #4218 (jb-cart-testids).

What this changes

  • Uses cart-drawer, cart-page, and cart-line in the existing checkout setup.
  • Adds cart-checkout to the existing checkout links in the three storefronts.
  • Selects checkout inside the cart page, checks the existing checkout URL, and verifies that navigation starts.

Developer impact

Adds placement guidance to the repo-level skills/hydrogen-storefront-testing/SKILL.md so an agent can prepare a custom storefront for the portable suite. Custom storefronts need cart-checkout on their cart page checkout link for the checkout test to pass. The existing UI structure, styles, accessibility, and interactions stay unchanged.

No package changeset is needed: these changes affect the repo-level tests, guidance, and reference storefront markup.

Verification

Local verification of the rebased five-PR stack at 2e41aa686, against freshly built React Router, Next.js, and Nuxt storefronts using live tokenless mock.shop. Headless Playwright, two workers, no retries or flaky results.

Storefront Passed Skipped Failed
react-router 13 2 0
nextjs 12 3 0
nuxt 13 2 0

The suite contains its 15 existing tests, including two variant helper checks. This is a full-stack run, not a separate live run of each intermediate PR.

Since that run, the container locators (cart-page, cart-drawer, product-results) no longer narrow the container with their own visibility filter. The nested element's visibility check already excludes anything inside a hidden container. The live suite has not been rerun since that change; E2E typecheck and lint pass at 55a466745.

All three app builds passed. E2E typecheck and lint passed. These are local results; GitHub Actions reports separately.

Skips: no suitable live narrowing-filter or price-range fixtures on all three storefronts; Next.js retains its no-JavaScript variant opt-out. Those journeys remain unverified in this run.

How to Test

  1. Run pnpm install --frozen-lockfile and pnpm run build:pkgs. Without private store credentials, the examples use mock.shop.
  2. Build and start one storefront:
    • React Router: pnpm --filter @shopify/hydrogen-template-react-router build && pnpm --filter @shopify/hydrogen-template-react-router exec vite preview --port 4311
    • Next.js: pnpm --filter @shopify/hydrogen-example-nextjs build && pnpm --filter @shopify/hydrogen-example-nextjs start --port 4312
    • Nuxt: pnpm --filter @shopify/hydrogen-example-nuxt build && PORT=4313 pnpm --filter @shopify/hydrogen-example-nuxt start
  3. Add a product, visit /cart, and activate the checkout link. Confirm checkout navigation starts. Do not enter payment details or place an order.

@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch from e975207 to 9e00031 Compare October 21, 2026 21:17
@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch from 9e00031 to 7640321 Compare October 21, 2026 21:52
@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch 2 times, most recently from 31c426d to c7c00a2 Compare October 22, 2026 07:32
@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch from c7c00a2 to 6f11d29 Compare October 22, 2026 08:12
@Ji-One1
Ji-One1 marked this pull request as ready for review October 22, 2026 08:30
@Ji-One1
Ji-One1 requested a review from a team as a code owner October 22, 2026 08:30
@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch from 6f11d29 to 1f046d4 Compare October 22, 2026 15:52
@fredericoo
fredericoo added this pull request to stack #4248 October 22, 2026 16:14
@shopify

shopify Bot commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

Oxygen deployed a preview of your jb-checkout-testids branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
Skeleton (skeleton.hydrogen.shop) ✅ Successful (Logs) Preview deployment Inspect deployment October 23, 202610:08 PM

Learn more about Hydrogen's GitHub integration.

Comment thread skills/playwright-tests/SKILL.md Outdated
@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch from 571cfdf to b352f5f Compare October 23, 2026 06:05
@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch 2 times, most recently from 26f749c to ce10e58 Compare October 23, 2026 21:02
Ji-One1 and others added 3 commits October 23, 2026 18:03
A cart line or checkout link inside a hidden cart page or drawer is hidden
too, so its own visible filter already excludes it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Ji-One1
Ji-One1 force-pushed the jb-checkout-testids branch from ce10e58 to 68c1e53 Compare October 23, 2026 22:07

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants