Skip to content

Conversation

@kdaviduik
Copy link
Contributor

WHY are these changes introduced?

The skeleton template's cart functionality lacked E2E test coverage for core user interactions. Without these tests, regressions in cart behavior (adding items, changing quantities, removing items) could go undetected across both the cart drawer and cart page contexts.

Related to ongoing E2E test expansion effort.

WHAT is this pull request doing?

Adds comprehensive E2E tests for cart line item behavior with 17 tests organized by user behavior:

Category Tests Coverage
Adding Items 2 Add to cart, badge count updates
Quantity Management 5 Increase/decrease in drawer and page, badge sync
Removing Items 3 Remove from drawer/page, badge reset
Cart Totals 3 Subtotal display, checkout button visibility
Edge Cases 4 Empty states, persistence, navigation

Key implementation details:

  • StorefrontPage fixture extended with 14 cart helper methods
  • Cookie clearing for test isolation (cart state stored in cookies)
  • expect.poll() for waiting on actual state changes
  • :visible pseudo-selector to avoid matching hidden drawer elements
  • Role-based selectors for accessibility compliance

New file: e2e/CLAUDE.md with testing guidelines for future contributors.

HOW to test your changes?

# Run the cart line item tests
npx playwright test --project=skeleton e2e/specs/skeleton/cart-line-items.spec.ts

# Run with repetition to check for flakiness
npx playwright test --project=skeleton e2e/specs/skeleton/cart-line-items.spec.ts --repeat-each=3

Expected: All 17 tests pass (51/51 with 3 repetitions).

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

itsjustriley and others added 5 commits January 27, 2026 16:18
Add comprehensive E2E tests for cart line item behavior in the skeleton
template, covering both cart drawer (aside) and cart page contexts.

Why: The skeleton template's cart functionality lacked E2E test coverage
for core user interactions like adding items, changing quantities, and
removing items. These tests ensure cart behavior works correctly across
both the aside drawer and dedicated cart page.

What's included:
- 17 tests organized by behavior (adding, quantity, removing, totals, edge cases)
- StorefrontPage fixture extended with 14 cart helper methods
- e2e/CLAUDE.md guidelines for test isolation and selector strategy

Key design decisions:
- Cookie clearing for test isolation (cart state stored in cookies)
- expect.poll() for waiting on actual state changes, not just UI re-enablement
- :visible pseudo-selector to avoid matching hidden drawer elements on cart page
- Role-based selectors for accessibility compliance (getByRole with aria-labels)

Tests passed 51/51 runs (17 tests × 3 repetitions) with no flakiness.
@shopify
Copy link
Contributor

shopify bot commented Jan 28, 2026

Oxygen deployed a preview of your e2e-line-items branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
Skeleton (skeleton.hydrogen.shop) ✅ Successful (Logs) Preview deployment Inspect deployment January 28, 2026 5:07 AM

Learn more about Hydrogen's GitHub integration.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we stick this under cart? line items can be a describe block in the cart spec

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.

3 participants