Men section feature

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 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 "<Section>" section.
+        And The user clicks on "<Attire>" option.
+        Then The products are shown.
+
+        Examples:
+            | Section  | Attire   |
+            | Men      | Tanks  |

src/test/pages/MenSection.ts

@@ -0,0 +1,72 @@
+import { pageFixture } from "../hooks/pageFixture";
+import * as menSectionPage from "../../../src/test/resources/menSectionPage.json"
+import { PageElement } from "../resources/interfaces/iPageElement";
+import { Page, expect } 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),
+        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(section: string):Promise<void>{
+        const el = pageFixture.page.locator(getResource('menSectionBtn').selectorValue.replace('FLAG', section));
+        await el.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>{
+        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);
+    // };
+    };
+
+};

src/test/resources/menSectionPage.json

@@ -0,0 +1,27 @@
+{
+    "name": "Men Section Page Locators",
+    "webElements": [
+
+        {
+            "elementName": "menSectionBtn",
+            "selectorValue": "//span[contains(.,'FLAG')]"
+        },
+        {
+            "elementName": "attireSectionOptions",
+            "selectorValue": "//div[contains(@class,'categories-menu')]//li"
+        },
+        {
+            "elementName": "attireSectionBtn",
+            "selectorValue": "//div[contains(@class,'categories-menu')]//li//a[contains(.,'FLAG')]"
+        },
+        {
+            "elementName": "itemsShown",
+            "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')]"
+        }
+
+        ]
+}

src/test/steps/menSection.ts

@@ -0,0 +1,18 @@
+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} section.", async function (section: string){
+    await menSection.goToSection(section);
+});
+
+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();
+});