Merge branch '222-vervang-hardcoded-ui-strings-in-checkout-page-ts-en-andere-page-objects-door-uireference-labels' into 'main'

Resolve "Vervang hardcoded UI-strings in checkout.page.ts en andere page-objects door UIReference labels"

See merge request elgentos/magento2-playwright!52

Author: Shay

tests/config/element-identifiers.json

@@ -118,7 +118,9 @@
     "remove": "Remove",
     "shippingAddressRadioLocator": "#shipping-details input[type='radio']",
     "shippingMethodFixedLabel": "Fixed",
-    "shippingMethodTableRateLabel": "Table Rate"
+    "shippingMethodTableRateLabel": "Table Rate",
+    "shippingPriceText": "Shipping & Handling (Flat Rate - Fixed)",
+    "taxPriceText": "Tax"
   },
   "comparePage": {
     "removeCompareLabel": "Remove Product",
@@ -156,6 +158,10 @@
   "customerOverviewPage": {
     "tableSearchFieldLabel": "Search by keyword"
   },
+  "financial" : {
+    "subTotal": "Subtotal",
+    "grandTotal": "Grand Total"
+  },
   "footerPage": {
     "footerLocator": ".page-footer",
     "currencyIdentifier": "#currency-heading",
@@ -174,6 +180,7 @@
     "genericPriceSymbol": "$",
     "genericSaveButtonLabel": "Save",
     "genericSubmitButtonLabel": "Submit",
+    "headerLocator": "#header",
     "loadingSpinnerLocator": "#container .spinner",
     "messageLocator": "div.message",
     "removeLabel": "Remove",
@@ -216,6 +223,7 @@
     "wishListButtonLabel" : "My Wish List"
   },
   "miniCart": {
+    "cartDrawerLocator": "#cart-drawer-title",
     "checkOutButtonLabel": "Checkout",
     "editProductIconLabel": "Edit product",
     "minicartButtonLocator": "#menu-cart-icon",

tests/poms/frontend/checkout.page.ts

@@ -34,10 +34,14 @@ class CheckoutPage extends MagewireUtils {
     this.showDiscountFormButton = this.page.getByRole('button', {name: UIReference.checkout.openDiscountFormLabel});
     this.placeOrderButton = this.page.getByRole('button', { name: UIReference.checkout.placeOrderButtonLabel });
     this.continueShoppingButton = this.page.getByRole('link', { name: UIReference.checkout.continueShoppingLabel });
-    this.subtotalElement = page.getByText('Subtotal $');
-    this.shippingElement = page.getByText('Shipping & Handling (Flat Rate - Fixed) $');
-    this.taxElement = page.getByText('Tax $');
-    this.grandTotalElement = page.getByText('Grand Total $');
+    // this.subtotalElement = page.getByText('Subtotal $');
+    this.subtotalElement = page.getByText(`${UIReference.financial.subTotal} ${UIReference.general.genericPriceSymbol}`);
+    // this.shippingElement = page.getByText('Shipping & Handling (Flat Rate - Fixed) $');
+    this.shippingElement = page.getByText(`${UIReference.checkout.shippingPriceText} ${UIReference.general.genericPriceSymbol}`);
+    // this.taxElement = page.getByText('Tax $');
+    this.taxElement = page.getByText(`${UIReference.checkout.taxPriceText} ${UIReference.general.genericPriceSymbol}`);
+    // this.grandTotalElement = page.getByText('Grand Total $');
+    this.grandTotalElement = page.getByText(`${UIReference.financial.grandTotal} ${UIReference.general.genericPriceSymbol}`);
     this.paymentMethodOptionCreditCard = this.page.getByLabel(UIReference.checkout.paymentOptionCreditCardLabel);
     this.paymentMethodOptionPaypal = this.page.getByLabel(UIReference.checkout.paymentOptionPaypalLabel);
     this.creditCardNumberField = this.page.getByLabel(UIReference.checkout.creditCardNumberLabel);
@@ -218,7 +222,7 @@ class CheckoutPage extends MagewireUtils {
     // await this.page.getByLabel('Country').selectOption('US');
     const country = faker.helpers.arrayElement(inputValues.addressCountries);
     const countrySelectorField = this.page.getByLabel(UIReference.newAddress.countryLabel);
-    const stateInputField = this.page.getByRole('textbox', { name: 'State/Province' });
+    const stateInputField = this.page.getByRole('textbox', { name: UIReference.newAddress.provinceSelectLabel });
     const stateSelectorField = stateInputField.filter({ hasText: UIReference.newAddress.provinceSelectFilterLabel });
 
 

tests/poms/frontend/contact.page.ts

@@ -14,7 +14,7 @@ class ContactPage {
   constructor(page: Page){
     this.page = page;
     this.nameField = this.page.getByLabel(UIReference.credentials.nameFieldLabel);
-    this.emailField = this.page.getByPlaceholder('Email', { exact: true });
+    this.emailField = this.page.getByPlaceholder(UIReference.credentials.emailFieldLabel, { exact: true });
     this.messageField = this.page.locator(UIReference.contactPage.messageFieldSelector);
     this.sendFormButton = this.page.getByRole('button', { name: UIReference.general.genericSubmitButtonLabel });
   }
@@ -39,4 +39,4 @@ class ContactPage {
   }
 }
 
-export default ContactPage;
+export default ContactPage;

tests/poms/frontend/mainmenu.page.ts

@@ -20,7 +20,7 @@ class MainMenuPage {
 
   constructor(page: Page) {
     this.page = page;
-    this.mainMenuElement = page.locator('#header');
+    this.mainMenuElement = page.locator(UIReference.general.headerLocator);
     this.mainMenuAccountButton = this.mainMenuElement.getByRole('button', { name: UIReference.mainMenu.myAccountButtonLabel });
     this.mainMenuMiniCartButton = this.mainMenuElement.getByLabel(UIReference.mainMenu.miniCartLabel);
     this.mainMenuMyAccountItem = this.mainMenuElement.getByTitle(UIReference.mainMenu.myAccountButtonLabel);
@@ -165,7 +165,7 @@ class MainMenuPage {
     // By adding 'force', we can bypass the 'aria-disabled' tag.
     await this.mainMenuMiniCartButton.click({force: true});
 
-    let miniCartDrawer = this.page.locator("#cart-drawer-title");
+    let miniCartDrawer = this.page.locator(UIReference.miniCart.cartDrawerLocator);
     await expect(miniCartDrawer.getByText(outcomeMarker.miniCart.miniCartTitle)).toBeVisible();
   }
 
@@ -199,8 +199,8 @@ class MainMenuPage {
     await this.mainMenuLogoutItem.click();
 
     //assertions: notification that user is logged out & logout button no longer visible
-    await expect(this.page.getByText(outcomeMarker.logout.logoutConfirmationText, { exact: true })).toBeVisible();
-    await expect(this.mainMenuLogoutItem).toBeHidden();
+    await expect(this.page.getByText(outcomeMarker.logout.logoutConfirmationText, { exact: true }), "Message shown that confirms you're logged out").toBeVisible();
+    await expect(this.mainMenuLogoutItem, `Log out button is no longer visible`).toBeHidden();
   }
 }