feat(e2e): cleanups

Author: Romarionijim

.github/workflows/ci.yml

@@ -11,6 +11,7 @@ on:
   workflow_dispatch:
 
 env:
+  BASE_URL: 'https://magento.softwaretestingboard.com/'
   EMAIL: ${{ secrets.EMAIL }}
   PASSWORD: ${{ secrets.PASSWORD }}
 
@@ -21,7 +22,6 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        base_urls: ['https://magento.softwaretestingboard.com/']
         browsers: ['chromium']
         greps: ['@LOGIN', '@SIGN_UP', '@SANITY', '@MEN_CATEGORY_SHOP']
     steps:
@@ -34,7 +34,7 @@ jobs:
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
     - name: Run Playwright tests
-      run: BASE_URL=${{ matrix.base_urls }} npx playwright test --grep ${{ matrix.greps }} --project=${{ matrix.browsers }}
+      run: BASE_URL=${{ env.BASE_URL }} npx playwright test --grep ${{ matrix.greps }} --project=${{ matrix.browsers }}
     - uses: actions/upload-artifact@v4
       if: always()
       with:

helpers/fixtures/customFixtures/CustomFixtures.ts

@@ -9,7 +9,7 @@ import { ShoppingCartPage } from '../../../pages/cartPage/ShoppingCartPage';
 import { WomenCategoryPage } from '../../../pages/women/WomenCategoryPage';
 import { ProductPage } from '../../../pages/productPage/ProductPage';
 
-type MyFixtures = {
+type TestFixtures = {
   loginPage: LoginPage;
   loadAppAndLogin: LoginPage;
   lumaMainPage: LumaMainPage;
@@ -26,7 +26,7 @@ type MyFixtures = {
 /**
  * @description custom fixtures to promote reusability and prevent repeating same workflows in each test file
  */
-export const test = base.extend<MyFixtures>({
+export const test = base.extend<TestFixtures>({
   loadAppAndLogin: async ({ page }, use) => {
     let loginPage = new LoginPage(page);
     await loginPage.loadApp();

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "npx playwright test --project='chromium'",
+    "test": "npx playwright test --project='chromium' --workers 1",
     "build": "tsc -p tsconfig.json --noEmit",
     "test:changed": "npx playwright test --project='chromium' --only-changed --workers 1",
     "ui-mode": "npx playwright test --ui",

pages/BasePage.ts

@@ -50,7 +50,7 @@ export class BasePage {
     }
   }
 
-  public async loadApp(url: (string | undefined) = process.env.BASE_URL) {
+  public async loadApp(url = process.env.BASE_URL as string) {
     if (url !== undefined) {
       await this.page.goto(url);
     } else {
@@ -121,7 +121,7 @@ export class BasePage {
    * @description applies to every button that has the type of submit e.g "<button type=submit></button>""
    */
   public async clickOnButtonWithRole(buttonName: string) {
-    const submitButton = this.page.getByRole('button', { name: new RegExp(`^\\${buttonName}\\b$`, 'i') });
+    const submitButton = this.page.getByRole('button', { name: buttonName, exact: true });
     await this.clickElement(submitButton);
   }
 }

pages/LumaMainPage.ts

@@ -117,8 +117,8 @@ export class LumaMainPage extends BasePage {
   }
 
   private async validateCartSubTotalPrice(expectedSubTotalPrice: string) {
-    const cartSubTotalPriceInnerText = await this.page.locator(this.cartSubtotalPrice).innerText();
-    expect(cartSubTotalPriceInnerText.trim()).toBe(expectedSubTotalPrice);
+    const cartSubTotalPriceInnerText = await this.getInnerText(this.cartSubtotalPrice);
+    expect(cartSubTotalPriceInnerText).toBe(expectedSubTotalPrice);
   }
 
   private async modifyCartItemQuantity(itemText: string, itemQuantity: string) {
@@ -210,7 +210,11 @@ export class LumaMainPage extends BasePage {
    * @param inputFieldsLocator 
    * @param options 
    */
-  public async handleClientSideValidationErrors(expectedCount: number, inputFieldsLocator: Locator[], options?: ClientSideValiationErrorOptionalParamsInterface) {
+  public async handleClientSideValidationErrors(
+    expectedCount: number,
+    inputFieldsLocator: Locator[],
+    options?: ClientSideValiationErrorOptionalParamsInterface
+  ) {
     const cliendSideValidationError = this.page.locator(this.clientSideValidationErrorLocator);
     const validationErrorsCount = await this.countElements(cliendSideValidationError);
     expect(validationErrorsCount).toBe(expectedCount);

pages/checkoutPage/CheckOutShippingPage.ts

@@ -45,7 +45,13 @@ export class CheckoutShippingPage extends LumaMainPage {
    * @param shippingMethod 
    * @param options 
    */
-  public async fillShippingDetails(options?: { signIn?: boolean, email?: string, password?: string, expectedUserAddressDetails?: string[] } & UserShippingDetailsParams) {
+  public async fillShippingDetails(
+    options?: {
+      signIn?: boolean,
+      email?: string,
+      password?: string,
+      expectedUserAddressDetails?: string[]
+    } & UserShippingDetailsParams) {
     if (options?.signIn && options.email !== undefined && options.password !== undefined) {
       await this.signIn(options.email, options.password)
       await this.page.waitForTimeout(2500);

pages/checkoutPage/CheckoutReviewAndPaymentPage.ts

@@ -10,7 +10,7 @@ export class CheckoutReviewAndPaymentPage extends LumaMainPage {
     try {
       await this.changeCheckBoxState(confirmationLabel);
     } catch (error) {
-      throw new Error(`error was detected when confirming billig and shipping address: ${error}`)
+      throw new Error(`an error was detected when confirming billig and shipping address: ${error}`)
     }
   }
 

pages/createNewAccountPage/CreateAnAccountPage.ts

@@ -45,7 +45,14 @@ export class CreateAnAccountPage extends LumaMainPage {
     await this.clickElement(createAccountSubmitButton);
   }
 
-  public async createNewCustomerAccount(firstname: string, lastname: string, email: string, passwordStrengh: string, registerConfirmationText: string, password: string = process.env.PASSWORD as string) {
+  public async createNewCustomerAccount(
+    firstname: string,
+    lastname: string,
+    email: string,
+    passwordStrengh: string,
+    registerConfirmationText: string,
+    password: string = process.env.PASSWORD as string
+  ) {
     await this.clickCreateAccount();
     await this.fillFirstName(firstname);
     await this.fillLastName(lastname);

pages/loginPage/LoginPage.ts

@@ -16,7 +16,7 @@ export class LoginPage extends LumaMainPage {
       await this.fillText(passwordField, password);
       const signInButton = this.page.getByRole('button', { name: 'Sign In' });
       await this.clickElement(signInButton);
-      await this.page.waitForTimeout(2500);
+      await this.page.waitForTimeout(3500);
     }
     if (options?.negativeTest && options.expectedErrorCount !== undefined) {
       await this.handleClientSideValidationErrors(options.expectedErrorCount, [emailField, passwordField], options)

pages/pageComponents/sidebarShoppingComponent/SideBarShoppingComponentPage.ts

@@ -20,8 +20,19 @@ export class SideBarShoppingComponentPage extends BasePage {
   /**
    * @description validates the filtered by options if we added filters to the product that we want to purchase
    */
-  public async validateFilteredOptions(expectedFilterList: string[]) {
+  public async validateFilteredOptions(expectedFilterList: string | string[]) {
+    const listOfFilteredItems: string[] = [];
     const filteredByItems = this.page.locator(this.filteredByItemsLocator)
-    await expect(filteredByItems).toContainText(expectedFilterList);
+    const filteredItemsCount = await this.countElements(filteredByItems);
+    if (filteredItemsCount > 1) {
+      const filteredItemsList = await filteredByItems.all();
+      for (let item of filteredItemsList) {
+        const itemText = await this.getInnerText(item);
+        listOfFilteredItems.push(itemText);
+      }
+      expect(listOfFilteredItems).toEqual(expectedFilterList);
+    } else {
+      await expect(filteredByItems).toContainText(expectedFilterList);
+    }
   }
 }