refactor(e2e): extract variant selector utils from generic CartUtil

Move waitForOptionSelectors and selectDifferentOption into a dedicated
CustomCartMethodUtil class. These methods are only used by the
custom-cart-method recipe tests and don't belong in the generic cart
utility, which caused confusion about whether they were shared helpers.

Addresses fredericoo's review feedback on PR #3546.

Co-authored-by: Claude <noreply@anthropic.com>

Author: itsjustriley

e2e/fixtures/cart-utils.ts

@@ -1,47 +1,10 @@
 import {expect, Locator, Page} from '@playwright/test';
-import assert from './assertions';
 
 const CART_ID_PREFIX = 'gid://shopify/Cart/';
 
 export class CartUtil {
   constructor(private page: Page) {}
 
-  async waitForOptionSelectors(lineItem: Locator) {
-    const optionSelectors = lineItem.getByRole('combobox');
-    await expect(optionSelectors.first()).toBeVisible();
-    return optionSelectors;
-  }
-
-  async selectDifferentOption(optionSelect: Locator) {
-    const optionName = await optionSelect.getAttribute('name');
-    if (!optionName) {
-      throw new Error('Expected option select to have a name attribute');
-    }
-
-    const initialValue = await optionSelect.inputValue();
-    const enabledOptionValues = await optionSelect.evaluate(
-      (el: HTMLSelectElement) =>
-        Array.from(el.options)
-          .filter((option) => !option.disabled && option.value.trim() !== '')
-          .map((option) => option.value),
-    );
-
-    expect(enabledOptionValues.length).toBeGreaterThan(1);
-
-    const nextValue = enabledOptionValues.find(
-      (value) => value !== initialValue,
-    );
-    assert(
-      nextValue,
-      'Expected option select to have at least two different values',
-    );
-
-    await optionSelect.selectOption(nextValue);
-    await expect(optionSelect).toHaveValue(nextValue);
-
-    return {optionName, nextValue};
-  }
-
   async addItem(productName: string) {
     await expect(
       this.page.getByRole('heading', {level: 1, name: productName}),

e2e/fixtures/custom-cart-method-utils.ts

@@ -0,0 +1,40 @@
+import {expect, Locator} from '@playwright/test';
+
+export class CustomCartMethodUtil {
+  async waitForOptionSelectors(lineItem: Locator) {
+    const optionSelectors = lineItem.getByRole('combobox');
+    await expect(optionSelectors.first()).toBeVisible();
+    return optionSelectors;
+  }
+
+  async selectDifferentOption(optionSelect: Locator) {
+    const optionName = await optionSelect.getAttribute('name');
+    if (!optionName) {
+      throw new Error('Expected option select to have a name attribute');
+    }
+
+    const initialValue = await optionSelect.inputValue();
+    const enabledOptionValues = await optionSelect.evaluate((element) => {
+      const selectElement = element as HTMLSelectElement;
+      return Array.from(selectElement.options)
+        .filter((option) => !option.disabled && option.value.trim() !== '')
+        .map((option) => option.value);
+    });
+
+    expect(enabledOptionValues.length).toBeGreaterThan(1);
+
+    const nextValue = enabledOptionValues.find(
+      (value) => value !== initialValue,
+    );
+    if (!nextValue) {
+      throw new Error(
+        'Expected option select to have at least two different values',
+      );
+    }
+
+    await optionSelect.selectOption(nextValue);
+    await expect(optionSelect).toHaveValue(nextValue);
+
+    return {optionName, nextValue};
+  }
+}

e2e/specs/recipes/custom-cart-method.spec.ts

@@ -1,6 +1,7 @@
 import {test, expect, setRecipeFixture} from '../../fixtures';
 import assert from '../../fixtures/assertions';
 import {CartUtil} from '../../fixtures/cart-utils';
+import {CustomCartMethodUtil} from '../../fixtures/custom-cart-method-utils';
 
 setRecipeFixture({
   recipeName: 'custom-cart-method',
@@ -23,6 +24,8 @@ const KNOWN_PRODUCT_WITH_VARIANTS = {
   name: 'The Ascend',
 } as const;
 
+const variantSelector = new CustomCartMethodUtil();
+
 test.describe('Custom Cart Method Recipe', () => {
   test.describe('Cart Line Item Variant Selector', () => {
     test.beforeEach(async ({page}) => {
@@ -54,7 +57,8 @@ test.describe('Custom Cart Method Recipe', () => {
       await expect(cart.getLineItems()).toHaveCount(1);
 
       const firstLineItem = cart.getFirstLineItem();
-      const optionSelects = await cart.waitForOptionSelectors(firstLineItem);
+      const optionSelects =
+        await variantSelector.waitForOptionSelectors(firstLineItem);
       const minimumExpectedOptions = 2;
       expect(await optionSelects.count()).toBeGreaterThanOrEqual(
         minimumExpectedOptions,
@@ -74,10 +78,10 @@ test.describe('Custom Cart Method Recipe', () => {
       assert(initialUrl);
 
       const optionSelect = (
-        await cart.waitForOptionSelectors(firstLineItem)
+        await variantSelector.waitForOptionSelectors(firstLineItem)
       ).first();
       const {optionName, nextValue} =
-        await cart.selectDifferentOption(optionSelect);
+        await variantSelector.selectDifferentOption(optionSelect);
 
       const href = await productLink.getAttribute('href');
       assert(href);
@@ -105,9 +109,9 @@ test.describe('Custom Cart Method Recipe', () => {
       const initialUrl = await productLink.getAttribute('href');
 
       const optionSelect = (
-        await cart.waitForOptionSelectors(firstLineItem)
+        await variantSelector.waitForOptionSelectors(firstLineItem)
       ).first();
-      await cart.selectDifferentOption(optionSelect);
+      await variantSelector.selectDifferentOption(optionSelect);
 
       // Wait for the cart update to complete before checking preservation
       const href = await productLink.getAttribute('href');
@@ -132,9 +136,9 @@ test.describe('Custom Cart Method Recipe', () => {
       const initialProductUrl = await productLink.getAttribute('href');
 
       const optionSelect = (
-        await cart.waitForOptionSelectors(firstLineItem)
+        await variantSelector.waitForOptionSelectors(firstLineItem)
       ).first();
-      await cart.selectDifferentOption(optionSelect);
+      await variantSelector.selectDifferentOption(optionSelect);
 
       // Verify the cart update completed without navigating away
       const href = await productLink.getAttribute('href');