From e1735447c5157f4bae4021b8febacc0a9fba2acc Mon Sep 17 00:00:00 2001
From: najeeb1023 <najeeb.capricorn@gmail.com>
Date: Sun, 16 Jun 2024 17:00:02 +0200
Subject: [PATCH 1/2] Rebased.

---
 package.json                           |  2 +-
 playwright.config.ts                   |  2 +-
 src/test/features/MenSection.feature   | 17 ++++++++++++
 src/test/pages/MenSection.ts           | 38 ++++++++++++++++++++++++++
 src/test/resources/menSectionPage.json | 19 +++++++++++++
 src/test/steps/menSection.ts           | 17 ++++++++++++
 6 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 src/test/features/MenSection.feature
 create mode 100644 src/test/pages/MenSection.ts
 create mode 100644 src/test/resources/menSectionPage.json
 create mode 100644 src/test/steps/menSection.ts

diff --git a/package.json b/package.json
index 0bd021d..6244e14 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "lunaapp": "cucumber-js --config=config/cucumber.js"
+    "lunaapp": "cucumber-js --config=config/cucumber.js --tags @MenSection"
   },
   "keywords": [],
   "author": "",
diff --git a/playwright.config.ts b/playwright.config.ts
index 91cdf4c..2b4b15d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,7 +2,7 @@ import { LaunchOptions } from "@playwright/test";
 
 export const config: LaunchOptions = {
   timeout: 600000,
-  headless: true,
+  headless: false,
   args:['--start-maximized'],
   slowMo: 300
   
diff --git a/src/test/features/MenSection.feature b/src/test/features/MenSection.feature
new file mode 100644
index 0000000..9a09df2
--- /dev/null
+++ b/src/test/features/MenSection.feature
@@ -0,0 +1,17 @@
+@MenSection
+
+Feature: Verify that the user is able to login into an already registered account.
+
+    User enters their details to login.
+
+    Background: User is landed on the webpage.
+        Given The user lands at the webpage.
+
+    Scenario: User shops for Men Jackets.
+        When The user clicks on the "<Attire>".
+        And The user clicks on "<Option>".
+        Then The products are shown.
+
+        Examples:
+            | Attire   | Option   |
+            | Men      | Jackets  |
\ No newline at end of file
diff --git a/src/test/pages/MenSection.ts b/src/test/pages/MenSection.ts
new file mode 100644
index 0000000..6fd3abb
--- /dev/null
+++ b/src/test/pages/MenSection.ts
@@ -0,0 +1,38 @@
+import { pageFixture } from "../hooks/pageFixture";
+import * as menSectionPage from "../../../src/test/resources/menSectionPage.json"
+import { PageElement } from "../resources/interfaces/iPageElement";
+import { Page } from "@playwright/test";
+
+    function getResource(resourceName: string){
+        return menSectionPage.webElements.find((element: PageElement) => element.elementName == resourceName) as PageElement;
+    }
+
+export class MenSection {
+    constructor(public page: Page){
+        pageFixture.page = page;
+    };
+
+    menSectionLocators = {
+        menSectionHeader:() => pageFixture.page.locator(getResource('menSectionBtn').selectorValue),
+        menAttire:() => pageFixture.page.locator(getResource('attireSectionBtn').selectorValue),
+        itemsShown:() => pageFixture.page.locator(getResource('itemsShown').selectorValue)
+
+    };
+
+    public async goToSection():Promise<void>{
+        await this.menSectionLocators.menSectionHeader().click();
+        
+        
+    };
+
+    public async goToAttire():Promise<void>{
+        await this.menSectionLocators.menAttire().click();
+    };
+
+    public async showItems():Promise<void>{
+        // await pageFixture.page.locator(getResource('itemsShown').selectorValue.replace('FLAG', i.toString()))
+        const showCount = await this.menSectionLocators.itemsShown().count();
+        console.log(showCount);
+    };
+
+};
\ No newline at end of file
diff --git a/src/test/resources/menSectionPage.json b/src/test/resources/menSectionPage.json
new file mode 100644
index 0000000..950c4b7
--- /dev/null
+++ b/src/test/resources/menSectionPage.json
@@ -0,0 +1,19 @@
+{
+    "name": "Men Section Page Locators",
+    "webElements": [
+
+        {
+            "elementName": "menSectionBtn",
+            "selectorValue": "//span[contains(.,'Men')]"
+        },
+        {
+            "elementName": "attireSectionBtn",
+            "selectorValue": "//div[contains(@class,'widget block block-static-block')]//ul//li[contains(.,'Jackets')]"
+        },
+        {
+            "elementName": "itemsShown",
+            "selectorValue": "//div[contains(@class,'products wrapper grid products-grid')]//li[contains(@class,'item product product-item')]"
+        }
+
+        ]
+}
\ No newline at end of file
diff --git a/src/test/steps/menSection.ts b/src/test/steps/menSection.ts
new file mode 100644
index 0000000..52c8be8
--- /dev/null
+++ b/src/test/steps/menSection.ts
@@ -0,0 +1,17 @@
+import { When, Then } from "@cucumber/cucumber";
+import { MenSection } from "../pages/MenSection";
+import { pageFixture } from "../hooks/pageFixture";
+
+let menSection = new MenSection(pageFixture.page);
+
+When("The user clicks on the {string}", async function (){
+    await menSection.goToSection();
+});
+
+When("The user clicks on {string}", async function (){
+    await menSection.goToAttire();
+});
+
+Then("The products are shown", async function (){
+    await menSection.showItems();
+});
\ No newline at end of file

From 72f3b1f0d68ea391abe81a1745b9a6f6a2607529 Mon Sep 17 00:00:00 2001
From: najeeb1023 <najeeb.capricorn@gmail.com>
Date: Mon, 17 Jun 2024 00:33:29 +0200
Subject: [PATCH 2/2] fix: menSection_feature WIP.

---
 package.json                           |  2 +-
 playwright.config.ts                   |  2 +-
 src/test/features/MenSection.feature   | 10 ++---
 src/test/pages/MenSection.ts           | 54 +++++++++++++++++++++-----
 src/test/resources/menSectionPage.json | 14 +++++--
 src/test/steps/menSection.ts           | 15 +++----
 6 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 6244e14..0bd021d 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "lunaapp": "cucumber-js --config=config/cucumber.js --tags @MenSection"
+    "lunaapp": "cucumber-js --config=config/cucumber.js"
   },
   "keywords": [],
   "author": "",
diff --git a/playwright.config.ts b/playwright.config.ts
index 2b4b15d..91cdf4c 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,7 +2,7 @@ import { LaunchOptions } from "@playwright/test";
 
 export const config: LaunchOptions = {
   timeout: 600000,
-  headless: false,
+  headless: true,
   args:['--start-maximized'],
   slowMo: 300
   
diff --git a/src/test/features/MenSection.feature b/src/test/features/MenSection.feature
index 9a09df2..44ed2c4 100644
--- a/src/test/features/MenSection.feature
+++ b/src/test/features/MenSection.feature
@@ -2,16 +2,16 @@
 
 Feature: Verify that the user is able to login into an already registered account.
 
-    User enters their details to login.
+    User wants to see some times. 
 
     Background: User is landed on the webpage.
         Given The user lands at the webpage.
 
     Scenario: User shops for Men Jackets.
-        When The user clicks on the "<Attire>".
-        And The user clicks on "<Option>".
+        When The user clicks on the "<Section>" section.
+        And The user clicks on "<Attire>" option.
         Then The products are shown.
 
         Examples:
-            | Attire   | Option   |
-            | Men      | Jackets  |
\ No newline at end of file
+            | Section  | Attire   |
+            | Men      | Tanks  |
\ No newline at end of file
diff --git a/src/test/pages/MenSection.ts b/src/test/pages/MenSection.ts
index 6fd3abb..acb9621 100644
--- a/src/test/pages/MenSection.ts
+++ b/src/test/pages/MenSection.ts
@@ -1,7 +1,7 @@
 import { pageFixture } from "../hooks/pageFixture";
 import * as menSectionPage from "../../../src/test/resources/menSectionPage.json"
 import { PageElement } from "../resources/interfaces/iPageElement";
-import { Page } from "@playwright/test";
+import { Page, expect } from "@playwright/test";
 
     function getResource(resourceName: string){
         return menSectionPage.webElements.find((element: PageElement) => element.elementName == resourceName) as PageElement;
@@ -14,25 +14,59 @@ export class MenSection {
 
     menSectionLocators = {
         menSectionHeader:() => pageFixture.page.locator(getResource('menSectionBtn').selectorValue),
-        menAttire:() => pageFixture.page.locator(getResource('attireSectionBtn').selectorValue),
-        itemsShown:() => pageFixture.page.locator(getResource('itemsShown').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)
 
     };
 
-    public async goToSection():Promise<void>{
-        await this.menSectionLocators.menSectionHeader().click();
+    public async goToSection(section: string):Promise<void>{
+        const el = pageFixture.page.locator(getResource('menSectionBtn').selectorValue.replace('FLAG', section));
+        await el.click();
         
         
     };
 
-    public async goToAttire():Promise<void>{
-        await this.menSectionLocators.menAttire().click();
+    public async goToAttire(attire: string):Promise<void>{
+        for(let i=0;i<=0;i++){
+            const el = await pageFixture.page.locator(getResource('attireSectionBtn').selectorValue.replace('FLAG', attire));
+            await el.click();
+        };
+        // for (let i=0;i<=getAttireOptions;i++){
+        //     console.log(getAttireOptions);
+        // };
+        // const getCountAttire = pageFixture.page.locator(getResource('attireSectionBtn').selectorValue.replace('FLAG', attire))
+        // await this.menSectionLocators.menAttire().innerText().then(value => console.log(value))
+        // const el = await expect(this.menSectionLocators.menAttire()).toContainText(attire).then(value => console.log(value))
+        // console.log(el)
     };
 
     public async showItems():Promise<void>{
-        // await pageFixture.page.locator(getResource('itemsShown').selectorValue.replace('FLAG', i.toString()))
-        const showCount = await this.menSectionLocators.itemsShown().count();
-        console.log(showCount);
+        const getNumberOfProducts = await this.menSectionLocators.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();
+            //  for (const text of getEl) {
+            //     const firstLine = text.split('\n')[1].trim();
+            //           const getItem = await getEl;
+            //           process.stdout.write(`    ${firstLine}${getItem}`);
+            //  };
+             for (const text of getEl) {
+                //  const getItem = await getEl;
+                //  process.stdout.write(`    Item ${i} -> ${getItem}${firstLine}\n`);
+                console.log('    '+i +")" + " " + text.trim());
+             };
+            
+            // console.log(getEl)
+        };
+            
+        
+    //     for(let i=0;i<=getNumberOfProducts;i++){
+    //     await pageFixture.page.locator(getResource('productsShown').selectorValue.replace('FLAG', i.toString())).textContent();
+    //     const showCount = await this.menSectionLocators.itemsShown().textContent();
+    //     console.log(showCount);
+    // };
     };
 
 };
\ No newline at end of file
diff --git a/src/test/resources/menSectionPage.json b/src/test/resources/menSectionPage.json
index 950c4b7..6a50c6e 100644
--- a/src/test/resources/menSectionPage.json
+++ b/src/test/resources/menSectionPage.json
@@ -4,15 +4,23 @@
 
         {
             "elementName": "menSectionBtn",
-            "selectorValue": "//span[contains(.,'Men')]"
+            "selectorValue": "//span[contains(.,'FLAG')]"
+        },
+        {
+            "elementName": "attireSectionOptions",
+            "selectorValue": "//div[contains(@class,'categories-menu')]//li"
         },
         {
             "elementName": "attireSectionBtn",
-            "selectorValue": "//div[contains(@class,'widget block block-static-block')]//ul//li[contains(.,'Jackets')]"
+            "selectorValue": "//div[contains(@class,'categories-menu')]//li//a[contains(.,'FLAG')]"
         },
         {
             "elementName": "itemsShown",
-            "selectorValue": "//div[contains(@class,'products wrapper grid products-grid')]//li[contains(@class,'item product product-item')]"
+            "selectorValue": "//li[contains(@class,'item product product-item')][FLAG]//div[contains(@class,'product details product-item-details')]//strong"
+        },
+        {
+            "elementName": "productsShown",
+            "selectorValue": "//li[contains(@class,'item product product-item')]"
         }
 
         ]
diff --git a/src/test/steps/menSection.ts b/src/test/steps/menSection.ts
index 52c8be8..c32e6ea 100644
--- a/src/test/steps/menSection.ts
+++ b/src/test/steps/menSection.ts
@@ -1,17 +1,18 @@
-import { When, Then } from "@cucumber/cucumber";
+import { When, Then, setDefaultTimeout } from "@cucumber/cucumber";
 import { MenSection } from "../pages/MenSection";
 import { pageFixture } from "../hooks/pageFixture";
 
+setDefaultTimeout(60000);
 let menSection = new MenSection(pageFixture.page);
 
-When("The user clicks on the {string}", async function (){
-    await menSection.goToSection();
+When("The user clicks on the {string} section.", async function (section: string){
+    await menSection.goToSection(section);
 });
 
-When("The user clicks on {string}", async function (){
-    await menSection.goToAttire();
+When("The user clicks on {string} option.", async function (attire: string){
+    await menSection.goToAttire(attire);
 });
 
-Then("The products are shown", async function (){
-    await menSection.showItems();
+Then("The products are shown.", async function (){
+     await menSection.showItems();
 });
\ No newline at end of file