test(e2e): write profile page tests

Author: QAComet

e2e/fixtures/account/account-page.ts

@@ -4,22 +4,42 @@ import { BasePage } from "../base/base-page"
 export class AccountPage extends BasePage {
   container: Locator
   accountNav: Locator
-  mobileAccountNav: Locator
+
   overviewLink: Locator
   profileLink: Locator
   addressesLink: Locator
   ordersLink: Locator
   logoutLink: Locator
 
+  mobileAccountNav: Locator
+  mobileAccountMainLink : Locator
+  mobileOverviewLink : Locator
+  mobileProfileLink : Locator
+  mobileAddressesLink : Locator
+  mobileOrdersLink : Locator
+  mobileLogoutLink : Locator
+
   constructor(page: Page) {
     super(page)
     this.container = page.getByTestId("account-page")
     this.accountNav = this.container.getByTestId("account-nav")
+    this.overviewLink = this.accountNav.getByTestId("overview-link")
+    this.profileLink = this.accountNav.getByTestId("profile-link")
+    this.addressesLink = this.accountNav.getByTestId("addresses-link")
+    this.ordersLink = this.accountNav.getByTestId("orders-link")
+    this.logoutLink = this.accountNav.getByTestId("logout-button")
+
     this.mobileAccountNav = this.container.getByTestId("mobile-account-nav")
-    this.overviewLink = this.container.getByTestId("overview-link")
-    this.profileLink = this.container.getByTestId("profile-link")
-    this.addressesLink = this.container.getByTestId("addresses-link")
-    this.ordersLink = this.container.getByTestId("orders-link")
-    this.logoutLink = this.container.getByTestId("logout-button")
+    this.mobileAccountMainLink = this.mobileAccountNav.getByTestId("account-main-link")
+    this.mobileOverviewLink = this.mobileAccountNav.getByTestId("overview-link")
+    this.mobileProfileLink = this.mobileAccountNav.getByTestId("profile-link")
+    this.mobileAddressesLink = this.mobileAccountNav.getByTestId("addresses-link")
+    this.mobileOrdersLink = this.mobileAccountNav.getByTestId("orders-link")
+    this.mobileLogoutLink = this.mobileAccountNav.getByTestId("logout-button")
+  }
+
+  async goto() {
+    await this.navMenu.navAccountLink.click()
+    await this.container.waitFor({ state: "visible" })
   }
 }

e2e/fixtures/account/overview-page.ts

@@ -9,10 +9,12 @@ export class OverviewPage extends AccountPage {
   noOrdersMessage: Locator
   ordersWrapper: Locator
   orderWrapper: Locator
+  overviewWrapper: Locator
 
   constructor(page: Page) {
     super(page)
-    this.welcomeMessage = this.container.getByTestId("welcome-message") // getAttribute("name")
+    this.overviewWrapper = this.container.getByTestId("overview-page-wrapper")
+    this.welcomeMessage = this.container.getByTestId("welcome-message")
     this.customerEmail = this.container.getByTestId("customer-email")
     this.profileCompletion = this.container.getByTestId(
       "customer-profile-completion"
@@ -36,4 +38,9 @@ export class OverviewPage extends AccountPage {
       openButton: order.getByTestId("open-order-button"),
     }
   }
+
+  async goto() {
+    await this.navMenu.navAccountLink.click()
+    await this.container.waitFor({ state: "visible" })
+  }
 }

e2e/fixtures/account/profile-page.ts

@@ -3,6 +3,7 @@ import { AccountPage } from "./account-page"
 import { camelCase } from "lodash"
 
 export class ProfilePage extends AccountPage {
+  profileWrapper: Locator
   accountNameEditor: Locator
   accountEmailEditor: Locator
   accountPhoneEditor: Locator
@@ -21,6 +22,24 @@ export class ProfilePage extends AccountPage {
   passwordSaveButton: Locator
   billingAddressSaveButton: Locator
 
+  savedName: Locator
+  savedEmail: Locator
+  savedPhone: Locator
+  savedPassword: Locator
+  savedBillingAddress: Locator
+
+  nameSuccessMessage: Locator
+  emailSuccessMessage: Locator
+  phoneSuccessMessage: Locator
+  passwordSuccessMessage: Locator
+  billingAddressSuccessMessage: Locator
+
+  nameErrorMessage: Locator
+  emailErrorMessage: Locator
+  phoneErrorMessage: Locator
+  passwordErrorMessage: Locator
+  billingAddressErrorMessage: Locator
+
   emailInput: Locator
   firstNameInput: Locator
   lastNameInput: Locator
@@ -43,6 +62,7 @@ export class ProfilePage extends AccountPage {
 
   constructor(page: Page) {
     super(page)
+    this.profileWrapper = page.getByTestId("profile-page-wrapper")
     this.accountNameEditor = this.container.getByTestId("account-name-editor")
     this.accountEmailEditor = this.container.getByTestId("account-email-editor")
     this.accountPhoneEditor = this.container.getByTestId("account-phone-editor")
@@ -69,6 +89,32 @@ export class ProfilePage extends AccountPage {
     this.billingAddressSaveButton =
       this.accountBillingAddressEditor.getByTestId("save-button")
 
+    this.savedName = this.accountNameEditor.getByTestId("current-info")
+    this.savedEmail = this.accountEmailEditor.getByTestId("current-info")
+    this.savedPhone = this.accountPhoneEditor.getByTestId("current-info")
+    this.savedPassword = this.accountPasswordEditor.getByTestId("current-info")
+    this.savedBillingAddress =
+      this.accountBillingAddressEditor.getByTestId("current-info")
+    this.nameSuccessMessage =
+      this.accountNameEditor.getByTestId("success-message")
+    this.emailSuccessMessage =
+      this.accountEmailEditor.getByTestId("success-message")
+    this.phoneSuccessMessage =
+      this.accountPhoneEditor.getByTestId("success-message")
+    this.passwordSuccessMessage =
+      this.accountPasswordEditor.getByTestId("success-message")
+    this.billingAddressSuccessMessage =
+      this.accountBillingAddressEditor.getByTestId("success-message")
+    this.nameErrorMessage = this.accountNameEditor.getByTestId("error-message")
+    this.emailErrorMessage =
+      this.accountEmailEditor.getByTestId("error-message")
+    this.phoneErrorMessage =
+      this.accountPhoneEditor.getByTestId("error-message")
+    this.passwordErrorMessage =
+      this.accountPasswordEditor.getByTestId("error-message")
+    this.billingAddressErrorMessage =
+      this.accountBillingAddressEditor.getByTestId("error-message")
+
     this.firstNameInput = page.getByTestId("first-name-input")
     this.lastNameInput = page.getByTestId("last-name-input")
     this.emailInput = page.getByTestId("email-input")
@@ -111,4 +157,10 @@ export class ProfilePage extends AccountPage {
     }
     return o
   }
+
+  async goto() {
+    super.goto()
+    await this.profileLink.click()
+    await this.profileWrapper.waitFor({ state: "visible" })
+  }
 }

e2e/fixtures/base/nav-menu.ts

@@ -4,6 +4,7 @@ export class NavMenu {
   page: Page
   navMenuButton: Locator
   navMenu: Locator
+  navAccountLink: Locator
   homeLink: Locator
   storeLink: Locator
   searchLink: Locator
@@ -17,6 +18,7 @@ export class NavMenu {
     this.page = page
     this.navMenuButton = page.getByTestId("nav-menu-button")
     this.navMenu = page.getByTestId("nav-menu-popup")
+    this.navAccountLink = page.getByTestId("nav-account-link")
     this.homeLink = this.navMenu.getByTestId("home-link")
     this.storeLink = this.navMenu.getByTestId("store-link")
     this.searchLink = this.navMenu.getByTestId("search-link")