Introduced this keyword to actions method to help parallel execution

Author: avinash-qa-automation

.gitignore

@@ -10,14 +10,14 @@ package-lock.json
 logs/
 
 # # Test outputs and artifacts (generated by cucumber/playwright)
-# tests/test-results/
-# tests/test-results/**/*
-# tests/reports/
-# tests/playwright-report/
-# tests/logs/
-# tests/.cache/
-# tests/reports/**/*.*
-# tests/test-results/videos/
-# tests/test-results/videos/**/*.*
-# tests/test-results/screenshots/
-# tests/test-results/screenshots/**/*
+tests/test-results/
+tests/test-results/**/*
+tests/reports/
+tests/playwright-report/
+tests/logs/
+tests/.cache/
+tests/reports/**/*.*
+tests/test-results/videos/
+tests/test-results/videos/**/*.*
+tests/test-results/screenshots/
+tests/test-results/screenshots/**/*

package.json

@@ -6,8 +6,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
-    "test:bdd:ui": "cross-env node tests/run-cucumber.js",
-    "test:ui:parallel": "cross-env node tests/run-cucumber.parallel.js",
+    "test:ui": "cross-env node tests/run-cucumber.js",
+    "test:ui:parallel": "cross-env PARALLEL=2 node tests/run-cucumber.js",
     "lint": "eslint src tests",
     "format": "prettier --write \"src/**/*.ts\" \"tests/**/*.ts\"",
     "init": "playwright install && npm install"

tests/pages/base.page.ts

@@ -21,72 +21,68 @@ type CartItem = {
     quantity: number;
 };
 
-let actions: WebActions;
-let page: Page;
-
 /**
  * Cart page actions
  */
-export const cartPage = {
-    setPage(newPage: Page) {
-        page = newPage;
-        actions = new WebActions(page);
-    },
+export class CartPage {
+    constructor(
+        private page: Page,
+        private actions: WebActions
+    ) {}
 
     /**
      * Get all items currently in the cart
      */
     async getCartItems(): Promise<CartItem[]> {
-        const cartItems = [];
-        const items = await page.$$eval(Locators.CART_ITEM, (elements: HTMLElement[]) => {
+        const items = await this.page.$$eval(Locators.CART_ITEM, (elements: HTMLElement[]) => {
             return elements.map((el) => {
-                const name = el.querySelector(Locators.ITEM_NAME)?.textContent || '';
-                const price = el.querySelector(Locators.ITEM_PRICE)?.textContent || '';
+                const name = el.querySelector('.inventory_item_name')?.textContent || '';
+                const price = el.querySelector('.inventory_item_price')?.textContent || '';
                 return { name, price, quantity: 1 }; // Default quantity is 1 as SauceDemo doesn't support quantity changes
             });
         });
         return items;
-    },
+    }
 
     /**
      * Click checkout button to proceed to checkout
      */
     async proceedToCheckout(): Promise<void> {
-        await actions.click(Locators.CHECKOUT_BUTTON);
-    },
+        await this.actions.click(Locators.CHECKOUT_BUTTON);
+    }
 
     /**
      * Fill checkout information form
      */
     async fillCheckoutInfo(firstName: string, lastName: string, postalCode: string): Promise<void> {
-        await actions.fill(Locators.FIRST_NAME_INPUT, firstName);
-        await actions.fill(Locators.LAST_NAME_INPUT, lastName);
-        await actions.fill(Locators.POSTAL_CODE_INPUT, postalCode);
-        await actions.click(Locators.CONTINUE_BUTTON);
-    },
+        await this.actions.fill(Locators.FIRST_NAME_INPUT, firstName);
+        await this.actions.fill(Locators.LAST_NAME_INPUT, lastName);
+        await this.actions.fill(Locators.POSTAL_CODE_INPUT, postalCode);
+        await this.actions.click(Locators.CONTINUE_BUTTON);
+    }
 
     /**
      * Complete the order by clicking finish button
      */
     async completeOrder(): Promise<void> {
-        await actions.click(Locators.FINISH_BUTTON);
-    },
+        await this.actions.click(Locators.FINISH_BUTTON);
+    }
 
     /**
      * Get the confirmation message after order completion
      */
     async getConfirmationMessage(): Promise<string | null> {
-        const messageElement = await page.$(Locators.CONFIRMATION_HEADER);
+        const messageElement = await this.page.$(Locators.CONFIRMATION_HEADER);
         return messageElement ? await messageElement.textContent() : null;
-    },
+    }
 
     /**
      * Remove a specific item from cart by product name
-     */
+     */ 
     async removeItem(productName: string): Promise<void> {
         const selector = `//div[text()="${productName}"]/ancestor::div[@class="cart_item"]//button[contains(@id, "remove")]`;
-        await actions.click(selector);
-    },
+        await this.actions.click(selector);
+    }
 
     /**
      * Calculate total price of items in cart

tests/pages/cart.page.ts

@@ -12,58 +12,52 @@ const Locators = {
 
 const URL = 'https://www.saucedemo.com/';
 
-let actions: WebActions;
-let page: Page;
-
 /**
  * Login page actions
  */
-export const loginPage = {
-    /**
-     * Initialize the page
-     */
-    setPage(newPage: Page) {
-        page = newPage;
-        actions = new WebActions(page);
-    },
+export class LoginPage {
+    constructor(
+        private page: Page,
+        private actions: WebActions
+    ) {}
 
     /**
      * Navigate to the login page
      */
     async navigateToLogin(): Promise<void> {
-        await actions.navigateTo(URL);
-    },
+        await this.actions.navigateTo(URL);
+    }
 
     /**
      * Login with the given credentials
      * @param username Username (defaults to standard_user)
      * @param password Password (defaults to secret_sauce)
      */
     async login(username: string = 'standard_user', password: string = 'secret_sauce'): Promise<void> {
-        await actions.fill(Locators.USERNAME_INPUT, username);
-        await actions.fill(Locators.PASSWORD_INPUT, password);
-        await actions.click(Locators.LOGIN_BUTTON);
-    },
+        await this.actions.fill(Locators.USERNAME_INPUT, username);
+        await this.actions.fill(Locators.PASSWORD_INPUT, password);
+        await this.actions.click(Locators.LOGIN_BUTTON);
+    }
 
     /**
      * Get the error message if login fails
      * @returns The error message text or null if no error
      */
     async getErrorMessage(): Promise<string | null> {
-        const errorElement = await page.$(Locators.ERROR_MESSAGE);
+        const errorElement = await this.page.$(Locators.ERROR_MESSAGE);
         return errorElement ? await errorElement.textContent() : null;
-    },
+    }
 
     /**
      * Check if user is logged in by looking for the inventory list
      * @returns true if logged in, false otherwise
      */
     async isLoggedIn(): Promise<boolean> {
         try {
-            await page.waitForSelector(Locators.INVENTORY_LIST, { timeout: 5000 });
+            await this.page.waitForSelector(Locators.INVENTORY_LIST, { timeout: 5000 });
             return true;
         } catch {
             return false;
         }
     }
-} as const;
+}

tests/pages/login.page.ts

@@ -11,55 +11,49 @@ const Locators = {
     ITEM_NAME: '.inventory_item_name'
 } as const;
 
-let actions: WebActions;
-let page: Page;
-
 /**
  * Products page actions
  */
-export const productsPage = {
-    /**
-     * Initialize the page
-     */
-    setPage(newPage: Page) {
-        page = newPage;
-        actions = new WebActions(page);
-    },
+export class ProductsPage {
+    constructor(
+        private page: Page,
+        private actions: WebActions
+    ) {}
 
     /**
      * Add a product to cart by its name
      * @param productName The name of the product to add
      */
     async addToCart(productName: string): Promise<void> {
         const selector = `//div[text()="${productName}"]/ancestor::div[@class="inventory_item"]//button[contains(@id, "add-to-cart")]`;
-        await actions.click(selector);
-    },
+        await this.actions.click(selector);
+    }
 
     /**
      * Remove a product from cart by its name
      * @param productName The name of the product to remove
      */
     async removeFromCart(productName: string): Promise<void> {
         const selector = `//div[text()="${productName}"]/ancestor::div[@class="inventory_item"]//button[contains(@id, "remove")]`;
-        await actions.click(selector);
-    },
+        await this.actions.click(selector);
+    }
 
     /**
      * Get the number of items in the cart
      * @returns The number of items in cart, 0 if cart is empty
      */
     async getCartItemsCount(): Promise<number> {
-        const badge = await page.$(Locators.CART_BADGE);
+        const badge = await this.page.$(Locators.CART_BADGE);
         const text = badge ? await badge.textContent() : null;
         return text ? parseInt(text) : 0;
-    },
+    }
 
     /**
      * Navigate to the cart page
      */
     async goToCart(): Promise<void> {
-        await actions.click(Locators.CART_LINK);
-    },
+        await this.actions.click(Locators.CART_LINK);
+    }
 
     /**
      * Get the price of a specific product
@@ -68,24 +62,24 @@ export const productsPage = {
      */
     async getProductPrice(productName: string): Promise<string | null> {
         const selector = `//div[text()="${productName}"]/ancestor::div[@class="inventory_item"]//div[@class="inventory_item_price"]`;
-        const element = await page.$(selector);
+        const element = await this.page.$(selector);
         return element ? element.textContent() : null;
-    },
+    }
 
     /**
      * Sort products by the given option
      * @param option Sort option: az (A to Z), za (Z to A), lohi (Low to High), hilo (High to Low)
      */
     async sortProducts(option: 'az' | 'za' | 'lohi' | 'hilo'): Promise<void> {
-        await page.selectOption(Locators.SORT_DROPDOWN, option);
-    },
+        await this.page.selectOption(Locators.SORT_DROPDOWN, option);
+    }
 
     /**
      * Get all products from the inventory
      * @returns Array of products with their names and prices
      */
     async getAllProducts(): Promise<{ name: string; price: string; }[]> {
-        const products = await page.$$(Locators.INVENTORY_ITEM);
+        const products = await this.page.$$(Locators.INVENTORY_ITEM);
         const result = [];
 
         for (const product of products) {