Add address tests

e2e/fixtures/account/addresses-page.ts

@@ -1,12 +1,21 @@
 import { Locator, Page } from "@playwright/test"
 import { AccountPage } from "./account-page"
-import { AddAddressModal } from "./modals/add-address-modal"
+import { AddressModal } from "./modals/address-modal"
 
 export class AddressesPage extends AccountPage {
-  addAddressModal: AddAddressModal
+  addAddressModal: AddressModal
+  editAddressModal: AddressModal
+  addressContainer: Locator
+  addressesWrapper: Locator
+  newAddressButton: Locator
+
   constructor(page: Page) {
     super(page)
-    this.addAddressModal = new AddAddressModal(page)
+    this.addAddressModal = new AddressModal(page, "add")
+    this.editAddressModal = new AddressModal(page, "edit")
+    this.addressContainer = this.container.getByTestId("address-container")
+    this.addressesWrapper = page.getByTestId("addresses-page-wrapper")
+    this.newAddressButton = this.container.getByTestId("add-address-button")
   }
 
   getAddressContainer(text: string) {
@@ -15,7 +24,7 @@ export class AddressesPage extends AccountPage {
       .filter({ hasText: text })
     return {
       container,
-      editButton: container.getByTestId("address-edit-button"),
+      editButton: container.getByTestId('address-edit-button'),
       deleteButton: container.getByTestId("address-delete-button"),
       name: container.getByTestId("address-name"),
       company: container.getByTestId("address-company"),
@@ -24,4 +33,10 @@ export class AddressesPage extends AccountPage {
       provinceCountry: container.getByTestId("address-province-country"),
     }
   }
+
+  async goto() {
+    await super.goto()
+    await this.addressesLink.click()
+    await this.addressesWrapper.waitFor({ state: "visible" })
+  }
 }

e2e/fixtures/account/modals/add-address-modal.ts → e2e/fixtures/account/modals/address-modal.ts

@@ -1,8 +1,8 @@
 import { Page, Locator } from "@playwright/test"
 import { BaseModal } from "../../base/base-modal"
 
-export class AddAddressModal extends BaseModal {
-  addAddressButton: Locator
+export class AddressModal extends BaseModal {
+  saveButton: Locator
   cancelButton: Locator
 
   firstNameInput: Locator
@@ -16,10 +16,14 @@ export class AddAddressModal extends BaseModal {
   countrySelect: Locator
   phoneInput: Locator
 
-  constructor(page: Page) {
-    super(page, page.getByTestId("add-address-modal"))
+  constructor(page: Page, modalType: "add" | "edit") {
+    if (modalType === "add") {
+      super(page, page.getByTestId("add-address-modal"))
+    } else {
+      super(page, page.getByTestId("edit-address-modal"))
+    }
 
-    this.addAddressButton = this.container.getByTestId("add-address-button")
+    this.saveButton = this.container.getByTestId("save-button")
     this.cancelButton = this.container.getByTestId("cancel-button")
 
     this.firstNameInput = this.container.getByTestId("first-name-input")

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]
     )
   }
 

e2e/fixtures/index.ts

@@ -5,6 +5,7 @@ import { CategoryPage } from "./category-page"
 import { CheckoutPage } from "./checkout-page"
 import { OrderPage } from "./order-page"
 import { ProductPage } from "./product-page"
+import { StorePage } from "./store-page"
 
 export const fixtures = base.extend<{
   resetDatabaseFixture: void
@@ -13,6 +14,7 @@ export const fixtures = base.extend<{
   checkoutPage: CheckoutPage
   orderPage: OrderPage
   productPage: ProductPage
+  storePage: StorePage
 }>({
   page: async ({ page }, use) => {
     await page.goto("/")
@@ -45,4 +47,8 @@ export const fixtures = base.extend<{
     const productPage = new ProductPage(page)
     await use(productPage)
   },
+  storePage: async ({ page }, use) => {
+    const storePage = new StorePage(page)
+    await use(storePage)
+  },
 })

e2e/fixtures/store-page.ts

@@ -0,0 +1,18 @@
+import { Locator, Page } from "@playwright/test"
+import { CategoryPage } from "./category-page"
+
+export class StorePage extends CategoryPage {
+  pageTitle: Locator
+
+  constructor(page: Page) {
+    super(page)
+    this.pageTitle = page.getByTestId("store-page-title")
+  }
+
+  async goto() {
+    await this.navMenu.open()
+    await this.navMenu.storeLink.click()
+    await this.pageTitle.waitFor({ state: "visible" })
+    await this.productsListLoader.waitFor({ state: "hidden" })
+  }
+}