implement adding single item to the cart

Author: ersu-amine

fixtures/pageFixtures.ts

@@ -2,11 +2,13 @@ import { test as base, Page } from "@playwright/test";
 import { BasePage } from "../pages/BasePage";
 import { LoginPage } from "../pages/LoginPage";
 import { RegistrationPage } from "../pages/RegistrationPage";
+import { ProductPage } from "../pages/ProductPage";
 
 type MyFixtures = {
   basePage: BasePage;
   loginPage: LoginPage;
   registrationPage: RegistrationPage;
+  productPage: ProductPage;
   //add more types here
 };
 
@@ -20,5 +22,8 @@ export const test = base.extend<MyFixtures>({
   registrationPage: async ({ page }, use) => {
     await use(new RegistrationPage(page));
   },
+  productPage: async ({ page }, use) => {
+    await use(new ProductPage(page));
+  },
   //define others similarly
 });

pages/BasePage.ts

@@ -8,6 +8,7 @@ export class BasePage{
     readonly contactLink:Locator;
     readonly categoriesLink:Locator;
     readonly categoriesDropdown:Locator;
+    readonly filters:Locator;
 
     constructor(page:Page) {
         this.page = page;
@@ -16,7 +17,8 @@ export class BasePage{
         this.contactLink = page.locator("//a[@data-test='nav-contact']");
         this.categoriesLink = page.locator("//a[@data-test='nav-categories']");
         this.categoriesDropdown = page.locator("//ul[@aria-label='nav-categories']//a");
-        
+        this.filters = page.locator("//div[@data-test='filters']"); //filter section on home page
+
     }
 
     async navigateToHome(){
@@ -36,4 +38,13 @@ export class BasePage{
         const categoryOption = this.page.locator(`//ul[@aria-label='nav-categories']//a[text()='${categoryName}']`);
         await categoryOption.click();
     }
+
+    async verifyOnHomePage(){
+        await expect(this.filters).toBeVisible();
+    }
+
+    async clickProduct(itemName:string){
+        const itemLocator = this.page.locator(`//a//h5[@data-test='product-name' and normalize-space(text())='${itemName}']`);
+        itemLocator.click();
+    }
 }

pages/ProductPage.ts

@@ -0,0 +1,39 @@
+import { Page, Locator, expect } from "@playwright/test";
+
+export class ProductPage {
+    readonly page: Page;
+    readonly productTitle: Locator;
+    readonly addToCartButton: Locator;
+    readonly itemQuantity: Locator;
+    readonly cartIconQuantity: Locator;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.productTitle = page.locator("h1[data-test='product-name']");
+        this.addToCartButton = page.locator("button[data-test='add-to-cart']");
+        this.itemQuantity = page.locator("//input[@data-test='quantity']");
+        this.cartIconQuantity = page.locator("//a[@data-test='nav-cart']//span");
+    }
+    async verifyProductPage(productName: string) {
+        await expect(this.productTitle).toHaveText(productName);
+    }
+
+    async addToCart() {
+        await this.addToCartButton.click();
+    }
+
+    async setItemQuantity(quantity: number) {
+        await this.itemQuantity.fill(quantity.toString());
+    }
+    
+    async getCartIconQuantity(): Promise<number> {
+        const quantityText = await this.cartIconQuantity.textContent();
+        return parseInt(quantityText || "0", 10);
+    }
+
+    async verifyCartIconQuantity(expectedQuantity: number) {
+        const actualQuantity = await this.getCartIconQuantity();
+        expect(actualQuantity).toBe(expectedQuantity);
+    }
+
+}

tests/features/add-to-cart.feature

@@ -10,9 +10,9 @@ Feature: Add items to shopping cart
 
   Scenario: Add single product to the cart
     When the user selects a product "Thor Hammer"
-    And the user clicks the "Add to Cart" button
-    Then the shopping cart should contain 1 item
-    And the cart total should update accordingly
+    And the user clicks add to cart button
+    Then the shopping cart icon should contain 1 item
+
 
 #   Scenario: Add multiple products to the cart
 #     When the user selects a product "Laptop"

tests/steps/add-to-cart.steps.ts

@@ -1,22 +1,21 @@
-import settings from "../config/settings.json";
 import { Given, When, Then } from "@cucumber/cucumber";
 
-         Given('the user is on the homepage', async function () {
-            await this.basePage.navigateToHome(); //TODO verify home, no navigation
-         });
-
-          When('the user selects a product {string}', async function (string) {
-
-         });
-
-         When('the user clicks the {string} button', async function (string) {
-
-         });
-
-         Then('the shopping cart should contain {int} item', async function (int) {
-
-         });
-
-         Then('the cart total should update accordingly', async function () {
-
-         });
+Given("the user is on the homepage", async function () {
+  await this.basePage.navigateToHome();
+  await this.basePage.verifyOnHomePage();
+});
+
+When("the user selects a product {string}", async function (itemName: string) {
+  this.basePage.clickProduct(itemName);
+});
+
+When("the user clicks add to cart button", async function () {
+  await this.productPage.addToCart();
+});
+
+Then(
+  "the shopping cart icon should contain {int} item",
+  async function (quantity: number) {
+    await this.productPage.verifyCartIconQuantity(quantity);
+  }
+);

tests/support/world.ts

@@ -2,16 +2,23 @@ import { setWorldConstructor, World } from "@cucumber/cucumber";
 import { Browser, Page } from "playwright";
 import { LoginPage } from "../../pages/LoginPage";
 import {RegistrationPage} from "../../pages/RegistrationPage";
+import { BasePage } from "../../pages/BasePage";
+import { ProductPage } from "../../pages/ProductPage";
 
 export class CustomWorld extends World {
   browser!: Browser;
   page!: Page;
   loginPage!: LoginPage;
   registrationPage!:RegistrationPage;
+  basePage!: BasePage;
+  productPage!: ProductPage;
+  // Add other page objects as needed
 
   async initPageObjects() {
     this.loginPage = new LoginPage(this.page);
     this.registrationPage = new RegistrationPage(this.page);
+    this.basePage = new BasePage(this.page);
+    this.productPage = new ProductPage(this.page);
     // Initialize other page objects similarly
   }
 }