fix(e2e): Update data-testid locators to correct spots, add additional data-testid locators

Author: QAComet

e2e/fixtures/base/nav-menu.ts

@@ -23,7 +23,7 @@ export class NavMenu {
     this.storeLink = this.navMenu.getByTestId("store-link")
     this.searchLink = this.navMenu.getByTestId("search-link")
     this.accountLink = this.navMenu.getByTestId("account-link")
-    this.cartLink = this.navMenu.getByTestId("cart-link")
+    this.cartLink = this.navMenu.getByTestId("nav-cart-link")
     this.closeButton = this.navMenu.getByTestId("close-menu-button")
     this.shippingToLink = this.navMenu.getByTestId("shipping-to-button")
     this.shippingToMenu = this.navMenu.getByTestId("shipping-to-choices")

e2e/fixtures/category-page.ts

@@ -5,6 +5,7 @@ export class CategoryPage extends BasePage {
   container: Locator
   sortByContainer: Locator
 
+  pageTitle: Locator
   pagination: Locator
   productsListLoader: Locator
   productsList: Locator
@@ -13,6 +14,7 @@ export class CategoryPage extends BasePage {
   constructor(page: Page) {
     super(page)
     this.container = page.getByTestId("category-container")
+    this.pageTitle = page.getByTestId("category-page-title")
     this.sortByContainer = page.getByTestId("sort-by-container")
     this.productsListLoader = this.container.getByTestId("products-list-loader")
     this.productsList = this.container.getByTestId("products-list")
@@ -21,14 +23,9 @@ export class CategoryPage extends BasePage {
   }
 
   async getProduct(name: string) {
-    const productTitle = await this.container
-      .getByTestId("product-title")
-      .filter({
-        hasText: name,
-      })
-    const product = this.productWrapper.filter({ has: productTitle })
+    const product = this.productWrapper.filter({ hasText: name })
     return {
-      product,
+      locator: product,
       title: product.getByTestId("product-title"),
       price: product.getByTestId("price"),
       originalPrice: product.getByTestId("original-price"),

e2e/fixtures/checkout-page.ts

@@ -21,9 +21,9 @@ export class CheckoutPage extends BasePage {
   billingPhoneInput: Locator
   billingPostalInput: Locator
   billingProvinceInput: Locator
-  shippingAddress2Input: Locator
   shippingAddressInput: Locator
   shippingCityInput: Locator
+  shippingCompanyInput: Locator
   shippingFirstNameInput: Locator
   shippingLastNameInput: Locator
   shippingPhoneInput: Locator
@@ -114,13 +114,11 @@ export class CheckoutPage extends BasePage {
     this.billingProvinceInput = this.container.getByTestId(
       "billing-province-input"
     )
-    this.shippingAddress2Input = this.container.getByTestId(
-      "shipping-address-2-input"
-    )
     this.shippingAddressInput = this.container.getByTestId(
       "shipping-address-input"
     )
     this.shippingCityInput = this.container.getByTestId("shipping-city-input")
+    this.shippingCompanyInput = this.container.getByTestId("shipping-company-input")
     this.shippingFirstNameInput = this.container.getByTestId(
       "shipping-first-name-input"
     )
@@ -237,15 +235,15 @@ export class CheckoutPage extends BasePage {
       hasText: address,
     })
     await addressOption.getByTestId("shipping-address-radio").click()
-    const addressText = (await addressOption.getAttribute("value")) || ""
+
     const selectHandle = await this.shippingAddressSelect.elementHandle()
     await this.page.waitForFunction(
       (opts) => {
         const select = opts[0]
         const choice = opts[1]
-        return select.textContent === choice
+        return (select.textContent||"").includes(choice)
       },
-      [selectHandle, addressText] as [ElementHandle, string]
+      [selectHandle, address] as [ElementHandle, string]
     )
   }
 

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

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

src/modules/account/components/address-card/add-address.tsx

@@ -120,6 +120,7 @@ const AddAddress = ({ region }: { region: Region }) => {
                 name="country_code"
                 required
                 autoComplete="country"
+                data-testid="country-select"
               />
               <Input label="Phone" name="phone" autoComplete="phone" data-testid="phone-input" />
             </div>

src/modules/categories/templates/index.tsx

@@ -45,7 +45,7 @@ export default function CategoryTemplate({
                 /
               </span>
             ))}
-          <h1>{category.name}</h1>
+          <h1 data-testid="category-page-title">{category.name}</h1>
         </div>
         {category.description && (
           <div className="mb-8 text-base-regular">

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

@@ -65,14 +65,14 @@ const AddressSelect = ({ addresses, cart }: AddressSelectProps) => {
         >
           <Listbox.Options
             className="absolute z-20 w-full overflow-auto text-small-regular bg-white border border-top-0 max-h-60 focus:outline-none sm:text-sm"
-            data-testid="shipping-options">
+            data-testid="shipping-address-options">
             {addresses.map((address) => {
               return (
                 <Listbox.Option
                   key={address.id}
                   value={address.id}
                   className="cursor-default select-none relative pl-6 pr-10 hover:bg-gray-50 py-4"
-                  data-testid="shipping-option"
+                  data-testid="shipping-address-option"
                 >
                   <div className="flex gap-x-4 items-start">
                     <Radio checked={selectedAddress?.id === address.id} data-testid="shipping-address-radio" />

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

@@ -118,7 +118,7 @@ const ShippingAddress = ({
           value={formData["shipping_address.company"]}
           onChange={handleChange}
           autoComplete="organization"
-          data-testid="shipping-address-2-input"
+          data-testid="shipping-company-input"
         />
         <Input
           label="Postal code"

src/modules/layout/components/cart-dropdown/index.tsx

@@ -81,7 +81,7 @@ const CartDropdown = ({
           <LocalizedClientLink
             className="hover:text-ui-fg-base"
             href="/cart"
-            data-testid="cart-link"
+            data-testid="nav-cart-link"
           >{`Cart (${totalItems})`}</LocalizedClientLink>
         </Popover.Button>
         <Transition

src/modules/store/templates/index.tsx

@@ -18,11 +18,11 @@ const StoreTemplate = ({
   const pageNumber = page ? parseInt(page) : 1
 
   return (
-    <div className="flex flex-col small:flex-row small:items-start py-6 content-container">
+    <div className="flex flex-col small:flex-row small:items-start py-6 content-container" data-testid="category-container">
       <RefinementList sortBy={sortBy || "created_at"} />
       <div className="w-full">
         <div className="mb-8 text-2xl-semi">
-          <h1>All products</h1>
+          <h1 data-testid="store-page-title">All products</h1>
         </div>
         <Suspense fallback={<SkeletonProductGrid />}>
           <PaginatedProducts