Checkout tests

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/base/cart-dropdown.ts

@@ -19,23 +19,33 @@ export class CartDropdown {
     await this.navCartLink.hover()
   }
 
-  async getCartItem(name: string) {
-    const cartItem = this.cartDropdown.getByTestId("cart-item").filter({
-      hasText: name,
-    })
-    const quantity = cartItem
-      .getByTestId("cart-item-quantity")
-      .getAttribute("data-value")
-    const variant = cartItem
-      .getByTestId("cart-item-variant")
-      .getAttribute("data-value")
+  async close() {
+    if (await this.cartDropdown.isVisible()) {
+      const box = await this.cartDropdown.boundingBox()
+      if (!box) {
+        return
+      }
+      await this.page.mouse.move(box.x + box.width / 4, box.y + box.height / 4)
+      await this.page.mouse.move(5, 10)
+    }
+  }
+
+  async getCartItem(name: string, variant: string) {
+    const cartItem = this.cartDropdown
+      .getByTestId("cart-item")
+      .filter({
+        hasText: name,
+      })
+      .filter({
+        hasText: `Variant: ${variant}`,
+      })
     return {
       locator: cartItem,
       productLink: cartItem.getByTestId("product-link"),
       removeButton: cartItem.getByTestId("cart-item-remove-button"),
       name,
-      quantity,
-      variant,
+      quantity: cartItem.getByTestId("cart-item-quantity"),
+      variant: cartItem.getByTestId("cart-item-variant"),
     }
   }
 }

e2e/fixtures/cart-page.ts

@@ -23,6 +23,7 @@ export class CartPage extends BasePage {
   cartGiftCardAmount: Locator
   cartShipping: Locator
   cartTaxes: Locator
+  cartTotal: Locator
   checkoutButton: Locator
 
   constructor(page: Page) {
@@ -61,22 +62,23 @@ export class CartPage extends BasePage {
     )
     this.cartShipping = this.container.getByTestId("cart-shipping")
     this.cartTaxes = this.container.getByTestId("cart-taxes")
+    this.cartTotal = this.container.getByTestId("cart-total")
   }
 
   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"),
       variant: productRow.getByTestId("product-variant"),
       deleteButton: productRow.getByTestId("delete-button"),
-      quantitySelect: productRow.getByTestId("quantity-select"),
+      quantitySelect: productRow.getByTestId("product-select-button"),
       price: productRow.getByTestId("product-unit-price"),
       total: productRow.getByTestId("product-price"),
     }

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"),
     }

e2e/fixtures/product-page.ts

@@ -9,6 +9,7 @@ export class ProductPage extends BasePage {
   productTitle: Locator
   productDescription: Locator
   productOptions: Locator
+  productPrice: Locator
   addProductButton: Locator
   mobileActionsContainer: Locator
   mobileTitle: Locator
@@ -24,6 +25,7 @@ export class ProductPage extends BasePage {
     this.productTitle = this.container.getByTestId("product-title")
     this.productDescription = this.container.getByTestId("product-description")
     this.productOptions = this.container.getByTestId("product-options")
+    this.productPrice = this.container.getByTestId("product-price")
     this.addProductButton = this.container.getByTestId("add-product-button")
     this.mobileActionsContainer = page.getByTestId("mobile-actions")
     this.mobileTitle = this.mobileActionsContainer.getByTestId("mobile-title")
@@ -35,10 +37,16 @@ export class ProductPage extends BasePage {
     )
   }
 
+  async clickAddProduct() {
+    await this.addProductButton.click()
+    await this.cartDropdown.cartDropdown.waitFor({ state: "visible" })
+  }
+
   async selectOption(option: string) {
+    await this.page.mouse.move(0, 0) // hides the checkout container
     const optionButton = this.productOptions
       .getByTestId("option-button")
       .filter({ hasText: option })
-    await optionButton.click()
+    await optionButton.click({ clickCount: 2 })
   }
 }