test(e2e): update fixtures used throughout checkout process

Author: QAComet

e2e/fixtures/account/orders-page.ts

@@ -2,13 +2,15 @@ import { Locator, Page } from "@playwright/test"
 import { AccountPage } from "./account-page"
 
 export class OrdersPage extends AccountPage {
+  ordersWrapper: Locator
   noOrdersContainer: Locator
   continueShoppingButton: Locator
   orderCard: Locator
   orderDisplayId: Locator
 
   constructor(page: Page) {
     super(page)
+    this.ordersWrapper = page.getByTestId("orders-page-wrapper")
     this.noOrdersContainer = page.getByTestId("no-orders-container")
     this.continueShoppingButton = page.getByTestId("continue-shopping-button")
     this.orderCard = page.getByTestId("order-card")
@@ -38,4 +40,10 @@ export class OrdersPage extends AccountPage {
       items,
     }
   }
+
+  async goto() {
+    await super.goto()
+    await this.ordersLink.click()
+    await this.ordersWrapper.waitFor({ state: "visible" })
+  }
 }

e2e/fixtures/checkout-page.ts

@@ -13,6 +13,7 @@ export class CheckoutPage extends BasePage {
   shippingAddressOptions: Locator
   shippingAddressOption: Locator
 
+  billingAddressCheckbox: Locator
   billingAddressInput: Locator
   billingCityInput: Locator
   billingCompanyInput: Locator
@@ -24,6 +25,7 @@ export class CheckoutPage extends BasePage {
   shippingAddressInput: Locator
   shippingCityInput: Locator
   shippingCompanyInput: Locator
+  shippingEmailInput: Locator
   shippingFirstNameInput: Locator
   shippingLastNameInput: Locator
   shippingPhoneInput: Locator
@@ -67,6 +69,7 @@ export class CheckoutPage extends BasePage {
   cartGiftCardAmount: Locator
   cartShipping: Locator
   cartTaxes: Locator
+  cartTotal: Locator
   itemsTable: Locator
   itemRow: Locator
   itemTitle: Locator
@@ -96,6 +99,9 @@ export class CheckoutPage extends BasePage {
     this.shippingAddressOption = this.container.getByTestId(
       "shipping-address-option"
     )
+    this.billingAddressCheckbox = this.container.getByTestId(
+      "billing-address-checkbox"
+    )
     this.billingAddressInput = this.container.getByTestId(
       "billing-address-input"
     )
@@ -118,7 +124,10 @@ export class CheckoutPage extends BasePage {
       "shipping-address-input"
     )
     this.shippingCityInput = this.container.getByTestId("shipping-city-input")
-    this.shippingCompanyInput = this.container.getByTestId("shipping-company-input")
+    this.shippingCompanyInput = this.container.getByTestId(
+      "shipping-company-input"
+    )
+    this.shippingEmailInput = this.container.getByTestId("shipping-email-input")
     this.shippingFirstNameInput = this.container.getByTestId(
       "shipping-first-name-input"
     )
@@ -158,7 +167,7 @@ export class CheckoutPage extends BasePage {
     )
 
     this.deliveryOptionRadio = this.container.getByTestId(
-      "deliver-option-radio"
+      "delivery-option-radio"
     )
     this.deliveryOptionErrorMessage = this.container.getByTestId(
       "delivery-option-error-message"
@@ -214,6 +223,7 @@ export class CheckoutPage extends BasePage {
     )
     this.cartShipping = this.container.getByTestId("cart-shipping")
     this.cartTaxes = this.container.getByTestId("cart-taxes")
+    this.cartTotal = this.container.getByTestId("cart-total")
     this.itemsTable = this.container.getByTestId("items-table")
     this.itemRow = this.container.getByTestId("item-row")
     this.itemTitle = this.container.getByTestId("item-title")
@@ -241,7 +251,7 @@ export class CheckoutPage extends BasePage {
       (opts) => {
         const select = opts[0]
         const choice = opts[1]
-        return (select.textContent||"").includes(choice)
+        return (select.textContent || "").includes(choice)
       },
       [selectHandle, address] as [ElementHandle, string]
     )

e2e/fixtures/order-page.ts

@@ -61,17 +61,16 @@ export class OrderPage extends BasePage {
   async getProduct(title: string, variant: string) {
     const productRow = this.productRow
       .filter({
-        has: this.productTitle.filter({ hasText: title }),
+        hasText: title,
       })
       .filter({
-        has: this.productVariant.filter({ hasText: variant }),
+        hasText: `Variant: ${variant}`,
       })
     return {
       productRow,
-      title: productRow.getByTestId("product-title"),
+      name: productRow.getByTestId("product-name"),
       variant: productRow.getByTestId("product-variant"),
-      deleteButton: productRow.getByTestId("delete-button"),
-      quantitySelect: productRow.getByTestId("quantity-select"),
+      quantity: productRow.getByTestId("product-quantity"),
       price: productRow.getByTestId("product-unit-price"),
       total: productRow.getByTestId("product-price"),
     }

src/app/[countryCode]/(main)/account/@dashboard/orders/page.tsx

@@ -17,7 +17,7 @@ export default async function Orders() {
   }
 
   return (
-    <div className="w-full">
+    <div className="w-full" data-testid="orders-page-wrapper">
       <div className="mb-8 flex flex-col gap-y-4">
         <h1 className="text-2xl-semi">Orders</h1>
         <p className="text-base-regular">

src/modules/checkout/components/shipping-address/index.tsx

@@ -175,7 +175,7 @@ const ShippingAddress = ({
           value={formData.email}
           onChange={handleChange}
           required
-          dat-testid="shipping-email-input"
+          data-testid="shipping-email-input"
         />
         <Input
           label="Phone"

src/modules/common/components/checkbox/index.tsx

@@ -6,13 +6,15 @@ type CheckboxProps = {
   onChange?: () => void
   label: string
   name?: string
+  'data-testid'?: string
 }
 
 const CheckboxWithLabel: React.FC<CheckboxProps> = ({
   checked = true,
   onChange,
   label,
   name,
+  'data-testid': dataTestId
 }) => {
   return (
     <div className="flex items-center space-x-2 ">
@@ -25,6 +27,7 @@ const CheckboxWithLabel: React.FC<CheckboxProps> = ({
         aria-checked={checked}
         onClick={onChange}
         name={name}
+        data-testid={dataTestId}
       />
       <Label
         htmlFor="checkbox"