Skip to content

Use search test IDs and scoped product outcomes in the portable suite - #4236

Open
Ji-One1 wants to merge 3 commits into
jb-collection-testidsfrom
jb-search-testids
Open

Ji-One1 wants to merge 3 commits into
jb-collection-testidsfrom
jb-search-testids

Conversation

@Ji-One1

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

Copy link
Copy Markdown
Collaborator

A storefront can have header search, predictive search, and a full search page. Dedicated search-page test IDs let the portable journey operate the intended form and read its product results.

PR 5 of the test-ID migration, based on #4235 (jb-collection-testids).

What this changes

  • Adds search-input to the existing full search-page input in all three storefronts.
  • Adds search-submit to the existing Next.js and Nuxt submit controls. React Router uses Enter.
  • Uses the input and optional submit IDs in the existing search journey, and scopes matching result links to product-results and product-card.

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. 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 five-PR stack at 8c99b89e219e401abcc89d40a810dda86d36f340, 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 12 3 0
nextjs 11 4 0
nuxt 12 3 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.

All three app builds and TypeScript checks passed, including React Router GraphQL checks. Formatting, lint, E2E typecheck, and seven E2E unit tests passed. These are local results; GitHub Actions reports separately.

Skips: no suitable live stock-limit, 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. Visit /search, search for a product title from the catalog, and confirm its product result appears. Use the existing submit button in Next.js/Nuxt and Enter in React Router.

@Ji-One1
Ji-One1 force-pushed the jb-search-testids branch 2 times, most recently from b056d55 to 3c37045 Compare October 22, 2026 07:00
@Ji-One1
Ji-One1 force-pushed the jb-search-testids branch 2 times, most recently from e9dc3d2 to 8c99b89 Compare October 22, 2026 08:12
@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-search-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.

@Ji-One1
Ji-One1 marked this pull request as ready for review October 22, 2026 16:27
@Ji-One1
Ji-One1 requested a review from a team as a code owner October 22, 2026 16:27
Ji-One1 and others added 3 commits October 23, 2026 18:04
A product card inside a hidden product-results is hidden too, and the
role match and per-link visibility check already exclude it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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.

1 participant