Getproduct description WIP.

.github/workflows/playwright.yml

@@ -18,7 +18,7 @@ jobs:
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
     - name: Cucumber-Tests
-      run: npm run lunaapp
+      run: npm run cucumber:luma
     - uses: actions/upload-artifact@v4
       if: always()
       with:

logger/logger.ts

@@ -3,7 +3,7 @@ import { allColors } from 'winston/lib/winston/config';
 
 const { combine, timestamp, printf, colorize, splat } = format;
 
-const createCustomLogger = (scenarioName: string) => {
+const createCustomLogger = () => {
   const customFormat = printf(({ timestamp, level, message,}) => {
   return `  [${timestamp}] ${level} ${message}`;
   });
@@ -27,7 +27,8 @@ const createCustomLogger = (scenarioName: string) => {
       )
     }),
     new transports.File({
-      filename: `test-results/logs/${scenarioName}/log.log`,
+      filename: `test-results/logs/log.log`,
+      options: { flags: 'w' },
       level: 'info',
       format: format.combine(
         timestamp({

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "lunaapp": "cucumber-js --config=config/cucumber.js",
-    "lunaapp:tags": "cucumber-js --config=config/cucumber.js --tags ",
-    "lunaapp:debug": "cucumber-js --config=config/cucumber.js --tags @debug"
+    "cucumber:luma": "cucumber-js --config=config/cucumber.js",
+    "cucumber:luma:tags": "cucumber-js --config=config/cucumber.js --tags ",
+    "cucumber:luma:debug": "cucumber-js --config=config/cucumber.js --tags @MenShopping"
   },
   "keywords": [],
   "author": "",

playwright.config.ts

@@ -1,13 +1,12 @@
 import { LaunchOptions } from "@playwright/test";
 import createCustomLogger from "./logger/logger";
 
-let scenarioName;
-const logger = createCustomLogger(scenarioName);
+const logger = createCustomLogger();
 
 export const config: LaunchOptions = {
   timeout: 600000,
   headless: true,
-  // args:['--window-position=-1070,-100'], // customized for left-sided portrait monitor.
+  // args:['--window-position=-1070,-100'], //* customized for left-sided portrait monitor.
   slowMo: 300,
   logger: {
     isEnabled: (name, severity) => name === 'api',

src/test/features/UserShopping.feature

@@ -11,17 +11,17 @@ Feature: Verify that the user is able to purchase some item.
     Scenario: User shops for Men Jackets.
         When The user clicks on the "<Section>" section and the user clicks on "<Attire>" option.
         And The products are shown and user navigates to a product.
-        And The price of that product is shown.
+        And The price, size of that product is shown.
 
         Examples:
-            | Section  | Attire   |
-            | Men      | Tees     |
+            | Section  | Attire                    |
+            | Men      | Hoodies & Sweatshirts     |
 
     @WomenShopping
     Scenario: User shops for Women Jackets.
         When The user clicks on the "<Section>" section and the user clicks on "<Attire>" option.
         And The products are shown and user navigates to a product.
-        And The price of that product is shown.
+        And The price, size of that product is shown.
 
         Examples:
             | Section    | Attire             |

src/test/hooks/hooks.ts

@@ -8,17 +8,16 @@ let browser: Browser;
 let context: BrowserContext;
 
 BeforeAll(async function () {
+    pageFixture.logger = createCustomLogger();
+    pageFixture.logger.info('----------------- New Test Run -----------------');
     browser = await chromium.launch(config);
 });
 
-Before(async function ({ pickle }) {
-    const scenarioName = pickle.name + pickle.id;
+Before(async function () {
     context = await browser.newContext({viewport: null});
     const page = await context.newPage();
     pageFixture.page = page;
-    pageFixture.logger = createCustomLogger(scenarioName)
-
-    // pageFixture.logger = createLogger(options(scenarioName));
+    // pageFixture.logger = createCustomLogger();
 });
 
 After(async function ({ pickle, result }) {

src/test/pages/UserShopping.ts

@@ -29,15 +29,19 @@ import { Page, expect } from "@playwright/test";
         pageFixture.page = page;
     };
 
-    menSectionLocators = {
+    userShoppingLocators = {
         menSectionHeader:() => pageFixture.page.locator(getResource('menSectionBtn').selectorValue),
         attireSectionBtn:() => pageFixture.page.locator(getResource('attireSectionBtn').selectorValue),
         itemsShown:() => pageFixture.page.locator(getResource('itemsShown').selectorValue),
         attireSectionOptions:() => pageFixture.page.locator(getResource('attireSectionOptions').selectorValue),
         productShown:() => pageFixture.page.locator(getResource('productsShown').selectorValue),
         productPrice:() => pageFixture.page.locator(getResource('productPrice').selectorValue),
         shoppingList:() => pageFixture.page.locator(getResource('shoppingList').selectorValue),
-        productSize:() => pageFixture.page.locator(getResource('productSize').selectorValue)
+        productSize:() => pageFixture.page.locator(getResource('productSize').selectorValue),
+        getProductSize:() => pageFixture.page.locator(getResource('getProductSize').selectorValue),
+        getProductSizesAvailable:() => pageFixture.page.locator(getResource('getProductSizesAvailable').selectorValue),
+        getCurrentSelectedColor:() => pageFixture.page.locator(getResource('getCurrentSelectedColor').selectorValue),
+        getColorSwatches:() => pageFixture.page.locator(getResource('getColorSwatches').selectorValue),
 
     };
 
@@ -51,7 +55,7 @@ import { Page, expect } from "@playwright/test";
     };
 
     public async showItems():Promise<void>{
-        const getNumberOfProducts = await this.menSectionLocators.productShown().count();
+        const getNumberOfProducts = await this.userShoppingLocators.productShown().count();
         process.stdout.write('    Products shown -> ' + getNumberOfProducts + '\n');
         for(let i=1;i<=getNumberOfProducts;i++){
             const getEl = await pageFixture.page.locator(getResource('itemsShown').selectorValue.replace('FLAG', i.toString())).allTextContents();
@@ -62,16 +66,17 @@ import { Page, expect } from "@playwright/test";
     };
 
     public async selectRandomProduct():Promise<void>{
-        const getNumberOfProducts = await this.menSectionLocators.productShown().count();
-        let ind: number = Math.floor(Math.random() * getNumberOfProducts);
+        const getNumberOfProducts = await this.userShoppingLocators.productShown().count();
+        let ind: number = Math.floor(Math.random() * (getNumberOfProducts - 1))+ 1;
+
         if (ind == 0) {
             Math.floor(Math.random() * getNumberOfProducts);
         } else {
         const el = (pageFixture.page.locator(getResource('itemsShown').selectorValue.replace('FLAG', `${ind}`)));
         await expect(el).toBeVisible();
         await el.dblclick({force: true, timeout: 3000});
-        const list = await this.menSectionLocators.shoppingList().isVisible();
-        const listCount = await this.menSectionLocators.shoppingList().count();
+        const list = await this.userShoppingLocators.shoppingList().isVisible();
+        const listCount = await this.userShoppingLocators.shoppingList().count();
         if (list == true){
             pageFixture.logger.error('User not navigated, retrying click');
             await pageFixture.page.waitForLoadState('networkidle');
@@ -84,12 +89,39 @@ import { Page, expect } from "@playwright/test";
         };
     };
 
-    public async getProductPrice():Promise<void>{
-        const priceText = (await this.menSectionLocators.productPrice().textContent()).trim();
+    public async getProductPriceAndSizes():Promise<void>{
+        const priceText = (await this.userShoppingLocators.productPrice().textContent()).trim();
+        if(await this.userShoppingLocators.productPrice().isVisible() == true){
+        pageFixture.logger.error('Product price is not visible, attempting to click product again.')
         const regEx = /\$\d+\.\d{2}/;
         const matchPriceText = priceText.match(regEx);
         console.log("The price of the product -> "+matchPriceText[0]);
-        const text = (await this.menSectionLocators.productSize().textContent()).trim();
-        console.log(text)
+        const sizeText = (await this.userShoppingLocators.productSize().textContent()).trim();
+        const getSizes = await this.userShoppingLocators.getProductSizesAvailable().count();
+        console.log(sizeText+'s' + ' available are: ');
+        for(let i=1;i<=getSizes;i++){
+            const el = await pageFixture.page.locator(getResource('getProductSize').selectorValue.replace('FLAG', i.toString())).allTextContents();
+            for (const text of el) {
+                console.log(''+i +")" + " " + text.trim());
+             };
+        }
+    } else {
+        return this.selectRandomProduct();
+    }
+    };
+
+    public async selectAndGetProductColors():Promise<void>{
+        const getColorSwatch = await this.userShoppingLocators.getColorSwatches().count();
+        console.log('Color found: ' + getColorSwatch);
+        let ind: number = Math.floor(Math.random() * (getColorSwatch - 1)) + 1;
+        if (ind == 0) {
+            Math.floor(Math.random() * getColorSwatch);
+        } else {
+        const colorToBeSelect = await pageFixture.page.locator(getResource('colorSwatch').selectorValue.replace('FLAG', `${ind}`));
+        await colorToBeSelect.click();
+        await this.userShoppingLocators.getCurrentSelectedColor().isVisible();
+        const getColor = await this.userShoppingLocators.getCurrentSelectedColor().textContent();
+        console.log(getColor);
+        };
     };
 };

src/test/resources/userShoppingPage.json

@@ -33,6 +33,26 @@
         {
             "elementName": "productSize",
             "selectorValue": "//div[contains(@class,'swatch-attribute size')]//span[contains(.,'Size')]"
+        },
+        {
+            "elementName": "getProductSize",
+            "selectorValue": "//div[contains(@class,'swatch-option text')][FLAG]"
+        },
+        {
+            "elementName": "getProductSizesAvailable",
+            "selectorValue": "//div[contains(@class,'swatch-option text')]"
+        },
+        {
+            "elementName": "getCurrentSelectedColor",
+            "selectorValue": "//div[contains(@class,'swatch-attribute color')]//span[2]"
+        },
+        {
+            "elementName": "getColorSwatches",
+            "selectorValue": "//div[contains(@class,'swatch-option color')]"
+        },
+        {
+            "elementName": "colorSwatch",
+            "selectorValue": "//div[contains(@class,'swatch-option color')][contains(@role,'option')][FLAG]"
         }
         ]
 }

src/test/steps/userShopping.ts

@@ -14,6 +14,7 @@ When("The products are shown and user navigates to a product.", async function (
     await categoryAndProductSectionFacade.selectRandomItem();
 });
 
-When("The price of that product is shown.", async function (){
-    await userShopping.getProductPrice();
+When("The price, size of that product is shown.", async function (){
+    await userShopping.getProductPriceAndSizes();
+    await userShopping.selectAndGetProductColors();
 });