test: example e2e test

[fredericoo]

This PR is an example of good practices when writing e2e tests with playwright

highlights:

• be dumb: not dynamically finding any selectors, parsing numbers etc
• good a11y = good tests, enable us to rely on the accessibility tree to find things (like the line items in the cart, or the cart badge)
• assumes we start a clean session each time (which is the case) with clean cookies
• assumes we have a stable product we can always find (which is the case too)

[shopify]

Oxygen deployed a preview of your fb-e2e-example branch. Details:

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

Learn more about Hydrogen's GitHub integration.

[binks-code-reviewer]

🤖 Code Review · #projects-dev-ai for questions
React with 👍/👎 or reply — all feedback helps improve the agent.

✅ Complete - 1 findings

📋 History

✅ No issues → ✅ 1 findings

[andguy95]

If we follow the POM pattern and make the object into a class or singleton, each domains assertion doesn't have to keep passing in the Playwright's page as an arg.

   const cartUtil = new CartUtil(page); 
   cartUtil.assertInCart(productName)

[fredericoo]

it’s a decision we can make together! i particularly dont like POM because it needs to be declared at the top all to avoid passing page as a param to functions

we can do it though, especially if there are more advantages than skipping page

[binks-code-reviewer]

Flaky selector due to inconsistent label casing (items: 0 vs Items: 1)

The test asserts two different accessible labels for the cart badge:

await expect(cartToggle.getByLabel('items: 0')).toBeVisible();
...
await expect(cartToggle.getByLabel('Items: 1')).toBeVisible();

This is likely to fail depending on the actual accessible name casing/format and is inconsistent within the same test. If the UI label is Items: 0, the first assertion fails; if it’s items: 1, the second fails. Even if matching is case-insensitive in some contexts, relying on that is brittle across locator strategies.