added new pages - modfied logic and added cart functionality test

Romarionijim · Romarionijim · commit bc82ccd1f4ef · 2024-04-13T13:32:41.000+03:00
diff --git a/common/navigationEnums/menuBarCategories/MenuBarCategories.ts b/common/navigationEnums/menuBarCategories/MenuBarCategories.ts
@@ -1,12 +1,8 @@
 export enum MenuBarCategories {
   //================================================================
-  //-----------------------------WOMEN------------------------------
-  WOMEN_TOPS = 'Tops',
-  WOMEN_BOTTOMS = 'Bottomd',
-  //================================================================
-  //-----------------------------MEN--------------------------------
-  MEN_TOPS = 'Tops',
-  MEN_BOTTOMS = 'Bottoms',
+  //-----------------------------MEN&WOMEN--------------------------
+  TOPS = 'Tops',
+  BOTTOMS = 'Bottoms',
   //================================================================
   //-----------------------------GEAR-------------------------------
   BAGS = 'Bags',
diff --git a/helpers/fixtures/customFixtures/CustomFixtures.ts b/helpers/fixtures/customFixtures/CustomFixtures.ts
@@ -7,6 +7,7 @@ import { CheckoutShippingPage } from '../../../pages/checkoutPage/CheckOutShippi
 import { CheckoutReviewAndPaymentPage } from '../../../pages/checkoutPage/CheckoutReviewAndPaymentPage';
 import { ShoppingCartPage } from '../../../pages/cartPage/ShoppingCartPage';
 import { WomenCategoryPage } from '../../../pages/women/WomenCategoryPage';
+import { ProductPage } from '../../../pages/productPage/ProductPage';
 
 type MyFixtures = {
   loginPage: LoginPage;
@@ -19,6 +20,7 @@ type MyFixtures = {
   checkoutPaymentPage: CheckoutReviewAndPaymentPage;
   shoppingCartPage: ShoppingCartPage;
   womenCategoryPage: WomenCategoryPage;
+  productPage: ProductPage;
 }
 
 /**
@@ -30,44 +32,41 @@ export const test = base.extend<MyFixtures>({
     await loginPage.loadApp();
     await loginPage.login();
     await use(loginPage);
-    await context.clearCookies()
   },
   loadApplication: async ({ page, context }, use) => {
     let lumaMainPage = new LumaMainPage(page);
     await lumaMainPage.loadApp();
     await use(lumaMainPage);
-    await context.clearCookies();
   },
-  loginPage: async ({ page, context }, use) => {
+  loginPage: async ({ page }, use) => {
     await use(new LoginPage(page));
-    await context.clearCookies();
   },
-  lumaMainPage: async ({ page, context }, use) => {
+  lumaMainPage: async ({ page }, use) => {
     await use(new LumaMainPage(page));
-    await context.clearCookies();
   },
-  createAnAccountPage: async ({ page, context }, use) => {
+  createAnAccountPage: async ({ page }, use) => {
     await use(new CreateAnAccountPage(page));
-    await context.clearCookies();
   },
-  menCategoryPage: async ({ page, context }, use) => {
+  menCategoryPage: async ({ page }, use) => {
     await use(new MenCategoryPage(page));
-    await context.clearCookies();
   },
-  checkoutShippingPage: async ({ page, context }, use) => {
+  checkoutShippingPage: async ({ page }, use) => {
     await use(new CheckoutShippingPage(page))
-    await context.clearCookies();
   },
-  checkoutPaymentPage: async ({ page, context }, use) => {
+  checkoutPaymentPage: async ({ page }, use) => {
     await use(new CheckoutReviewAndPaymentPage(page))
-    await context.clearCookies();
   },
-  shoppingCartPage: async ({ page, context }, use) => {
+  shoppingCartPage: async ({ page }, use) => {
     await use(new ShoppingCartPage(page));
-    await context.clearCookies();
   },
-  womenCategoryPage: async ({ page, context }, use) => {
+  womenCategoryPage: async ({ page }, use) => {
     await use(new WomenCategoryPage(page));
-    await context.clearCookies();
-  }
-})
+  },
+  productPage: async ({ page }, use) => {
+    await use(new ProductPage(page));
+  },
+})
+
+test.afterEach(async ({ context }) => {
+  await context.clearCookies();
+});
diff --git a/helpers/optionalParamsInterfaces/OptionalParams.ts b/helpers/optionalParamsInterfaces/OptionalParams.ts
@@ -22,6 +22,8 @@ export interface ProductItemOptionalParamsInterface {
   validatePrice?: boolean,
   price?: string,
   addItemToCart?: boolean,
+  modifyQuantity?: boolean,
+  quantity?: string,
 }
 
 export interface ClientSideValiationErrorOptionalParamsInterface {
diff --git a/pages/BasePage.ts b/pages/BasePage.ts
@@ -63,7 +63,7 @@ export class BasePage {
     await locatorElement.clear();
   }
 
-  public async countElement(locator: (string | Locator)) {
+  public async countElements(locator: (string | Locator)) {
     const locatorElement = await this.getTypeOfLocator(locator);
     const locatorCount = await locatorElement.count();
     return locatorCount;
@@ -86,7 +86,7 @@ export class BasePage {
   }
 
   public async getPageUrl() {
-    const pageUrl = this.page.url;
+    const pageUrl = this.page.url();
     return pageUrl;
   }
 
diff --git a/pages/LumaMainPage.ts b/pages/LumaMainPage.ts
@@ -31,7 +31,7 @@ export class LumaMainPage extends BasePage {
 
   public async chooseMenuBarOption(menuBarItem: MenuBar) {
     let menuBarValue = this.page.locator(this.navigationMenuBar, { hasText: new RegExp(`^\\${menuBarItem.valueOf()}\\b$`, 'i') });
-    if (menuBarItem === 'Women' || menuBarItem === 'Men' || menuBarItem === 'Training') {
+    if (menuBarItem === 'Women' || menuBarItem === 'Men' || menuBarItem === 'Training' || menuBarItem === 'Gear') {
       await this.hover(menuBarValue);
     } else {
       await this.clickElement(menuBarValue);
@@ -169,7 +169,7 @@ export class LumaMainPage extends BasePage {
    */
   public async countShoppingCartItems(expectedCount: number) {
     const cartItems = this.page.locator(this.cartItemListLocator);
-    const itemCount = await this.countElement(cartItems);
+    const itemCount = await this.countElements(cartItems);
     expect(itemCount).toBe(expectedCount);
   }
 
@@ -211,7 +211,7 @@ export class LumaMainPage extends BasePage {
    */
   public async handleClientSideValidationErrors(expectedCount: number, inputFieldsLocator: Locator[], options?: ClientSideValiationErrorOptionalParamsInterface) {
     const cliendSideValidationError = this.page.locator(this.clientSideValidationErrorLocator);
-    const validationErrorsCount = await this.countElement(cliendSideValidationError);
+    const validationErrorsCount = await this.countElements(cliendSideValidationError);
     expect(validationErrorsCount).toBe(expectedCount);
     const inputFields = await this.getInputFieldsValues(inputFieldsLocator);
     const emptyFieldIndexes: number[] = [];
@@ -314,8 +314,32 @@ export class LumaMainPage extends BasePage {
     expect(cellInnerText).toBe(expectedCellValue);
   }
 
+  /**
+   * @description generic function to proceed to checkout - every page has this option
+   */
   public async proceedToCheckout() {
     const proceedToCheckoutButton = this.page.getByRole('button', { name: 'Proceed to Checkout' });
     await this.clickElement(proceedToCheckoutButton);
   }
-}
+
+  /**
+   * @description clicks on the desired button from a specific row that contains a specific text on a table
+   */
+  public async clickOnTargetButtonFromSpecificTableRow(tableLocator: string, rowText: string, buttonLocator: (string | Locator)) {
+    const tableRow = this.page.locator(`${tableLocator} tbody tr`, { hasText: rowText });
+    const tableRowButton = tableRow.locator(buttonLocator);
+    await this.clickElement(tableRowButton);
+  }
+
+  public async validateAllTableCellValues(tableLocator: string, rowText: string, expectedCellValues: string[]) {
+    const tableRow = this.page.locator(`${tableLocator} tbody tr`, { hasText: rowText });
+    const tableRowInnerText = await this.getInnerText(tableRow);
+    const tableRowCellValues = tableRowInnerText.split('\n');
+    for (let item of expectedCellValues) {
+      if (!tableRowCellValues.includes(item)) {
+        throw new Error(`one of the expected cell values: ${expectedCellValues} do not exist on table row`)
+      }
+    }
+    expect(tableRowCellValues).toEqual(expectedCellValues);
+  }
+} 
diff --git a/pages/cartPage/ShoppingCartPage.ts b/pages/cartPage/ShoppingCartPage.ts
@@ -2,12 +2,20 @@ import { Page, expect } from "@playwright/test";
 import { LumaMainPage } from "../LumaMainPage";
 import { ItemShoppingComponentPage } from "../pageComponents/productShoppingComponent/ItemShoppingPage";
 
+export enum CartActionsEnum {
+  EDIT = 'Edit',
+  REMOVE = 'Remove'
+}
+
 export class ShoppingCartPage extends LumaMainPage {
   private cartItemLocator = '[class="cart item"]';
   private moveToWishListLinkName = 'Move to Wishlist'
   private updateShoppingCartButtonName = 'Update Shopping Cart'
-  private shoppingCartTable = '#shopping-cart-table ';
+  private shoppingCartTable = '#shopping-cart-table';
   private subTotalTableColumn = 'Subtotal';
+  private editCartItemTitle = 'Edit item parameters';
+  private removeItemTitle = 'Remove item';
+  private orderTotalLocator = '.grand.totals .amount';
   itemShoppingPage: ItemShoppingComponentPage;
 
   constructor(page: Page) {
@@ -35,4 +43,40 @@ export class ShoppingCartPage extends LumaMainPage {
   public async validateItemPrice(itemText: string, expectedTotalPrice: string) {
     await this.validateTableCellValue(this.shoppingCartTable, itemText, this.subTotalTableColumn, expectedTotalPrice);
   }
+
+  /**
+   * @description helper function for modify cart item function
+   * @param itemText 
+   * @param buttonTitle 
+   */
+  private async clickOnCartTargetButton(itemText: string, buttonTitle: string) {
+    const targetButton = this.page.getByTitle(buttonTitle);
+    await this.clickOnTargetButtonFromSpecificTableRow(this.shoppingCartTable, itemText, targetButton);
+  }
+  /**
+   * @description this function clicks on either edit item button or delete an item from cart based on the enum value you choose
+   */
+  public async modifyCartItem(cartAction: CartActionsEnum, itemName: string) {
+    try {
+      switch (cartAction) {
+        case CartActionsEnum.EDIT:
+          await this.clickOnCartTargetButton(itemName, this.editCartItemTitle);
+          break;
+        case CartActionsEnum.REMOVE:
+          await this.clickOnCartTargetButton(itemName, this.removeItemTitle);
+      }
+    } catch (error) {
+      throw new Error(`an error occured on function "modifyCartItem": ${error} `)
+    }
+  }
+
+  public async validateCartItemsCount(expectedItemCount: number) {
+    const itemCount = await this.countElements(this.cartItemLocator);
+    expect(itemCount).toBe(expectedItemCount);
+  }
+
+  public async validateCartTotal(expectedTotal: string) {
+    const cartTotal = await this.getInnerText(this.orderTotalLocator);
+    expect(cartTotal).toBe(expectedTotal);
+  }
 }
diff --git a/pages/men/MenCategoryPage.ts b/pages/men/MenCategoryPage.ts
@@ -4,12 +4,12 @@ import { ItemShoppingComponentPage } from "../pageComponents/productShoppingComp
 import { SideBarShoppingComponentPage } from "../pageComponents/sidebarShoppingComponent/SideBarShoppingComponentPage";
 
 export class MenCategoryPage extends LumaMainPage {
-  itemShoppingPage: ItemShoppingComponentPage;
+  itemShoppingComponent: ItemShoppingComponentPage;
   sideBarShoppingComponent: SideBarShoppingComponentPage;
 
   constructor(page: Page) {
     super(page)
-    this.itemShoppingPage = new ItemShoppingComponentPage(page);
+    this.itemShoppingComponent = new ItemShoppingComponentPage(page);
     this.sideBarShoppingComponent = new SideBarShoppingComponentPage(page);
   }
 }
diff --git a/pages/pageComponents/productShoppingComponent/ItemShoppingPage.ts b/pages/pageComponents/productShoppingComponent/ItemShoppingPage.ts
@@ -13,6 +13,8 @@ export class ItemShoppingComponentPage extends BasePage {
   private productItemSize = '[class="swatch-attribute size"]';
   private productColorLocator = '[class="swatch-attribute color"]';
   private productPriceLocator = '.price';
+  private productItemInCartLocator = '[class="product-info-main"]';
+  private productQtyLocator = '#qty';
 
   /**
    * @description function to choose a product item with flexible options to choose from
@@ -21,7 +23,7 @@ export class ItemShoppingComponentPage extends BasePage {
    * in the test
    */
   public async chooseProductItem(productName: string, options?: ProductItemOptionalParamsInterface) {
-    const productItem = this.page.locator(this.productItemLocator, { hasText: productName });
+    const productItem = await this.deterimeItemScope(productName);
     await this.hover(productItem);
     try {
       if (options?.chooseSize && options.size !== undefined) {
@@ -33,6 +35,9 @@ export class ItemShoppingComponentPage extends BasePage {
       if (options?.validatePrice && options.price !== undefined) {
         await this.validateItemPrice(productItem, options.price);
       }
+      if (options?.modifyQuantity && options.quantity !== undefined) {
+        await this.modifyQuantity(productItem, options.quantity)
+      }
       if (options?.addItemToCart) {
         await this.addProductItemToCart(productItem);
         await this.page.waitForTimeout(2500)
@@ -53,6 +58,11 @@ export class ItemShoppingComponentPage extends BasePage {
     await this.clickElement(chosenColor);
   }
 
+  private async modifyQuantity(productItemLocator: Locator, quantity: string) {
+    const itemQuantity = productItemLocator.locator(this.productQtyLocator);
+    await this.fillText(itemQuantity, quantity);
+  }
+
   private async validateItemPrice(productItemLocator: Locator, price: string) {
     const productItemPrice = productItemLocator.locator(this.productPriceLocator);
     expect(productItemPrice).toBe(price);
@@ -63,4 +73,21 @@ export class ItemShoppingComponentPage extends BasePage {
     const addProductToCart = productItemLocator.locator(addToCartButton);
     await this.clickElement(addProductToCart);
   }
+
+  /**
+   * @description returns the scope of the item if it is an item in a random page or is it inside a cart to get the correct locator
+   * and choose product with the correct options and reduce code duplication
+   * @param itemText 
+   * @returns 
+   */
+  private async deterimeItemScope(itemText: string) {
+    let itemLocator: Locator | undefined;
+    let currentPageUrl = await this.getPageUrl();
+    if (currentPageUrl.includes('cart')) {
+      itemLocator = this.page.locator(this.productItemInCartLocator, { hasText: itemText });
+    } else {
+      itemLocator = this.page.locator(this.productItemLocator, { hasText: itemText });
+    }
+    return itemLocator;
+  }
 }
diff --git a/pages/productPage/ProductPage.ts b/pages/productPage/ProductPage.ts
@@ -0,0 +1,45 @@
+import { Page, expect } from "@playwright/test";
+import { LumaMainPage } from "../LumaMainPage";
+import { ItemShoppingComponentPage } from "../pageComponents/productShoppingComponent/ItemShoppingPage";
+
+export enum ProductStockAvailability {
+  IN_STOCK = 'In Stock',
+  OUT_OF_STOCK = 'Out Of Stock',
+}
+
+export class ProductPage extends LumaMainPage {
+  private productInStockLocator = '[class="product-info-stock-sku"]'
+  private addToWishListLink = 'Add to Wish List';
+  private addToCompareLink = 'Add to Compare';
+  private updateCartLocator = '#product-updatecart-button';
+  itemShoppingPage: ItemShoppingComponentPage;
+
+  constructor(page: Page) {
+    super(page);
+    this.itemShoppingPage = new ItemShoppingComponentPage(page);
+  }
+
+  public async validateProductStockAvailability(expectedStockStatus: string) {
+    let producyAvailibility: ProductStockAvailability | undefined;
+    const productStock = this.page.locator(this.productInStockLocator);
+    const stockStatus = await productStock.locator('div').getAttribute('class');
+    if (stockStatus === 'stock available') {
+      producyAvailibility = ProductStockAvailability.IN_STOCK;
+    } else {
+      this.productInStockLocator = ProductStockAvailability.OUT_OF_STOCK;
+    }
+    expect(producyAvailibility).toBe(expectedStockStatus);
+  }
+
+  public async addProductToWishList() {
+    await this.clickOnLink(this.addToWishListLink);
+  }
+
+  public async addProductToCompare() {
+    await this.clickOnLink(this.addToCompareLink);
+  }
+
+  public async updateCart() {
+    await this.clickElement(this.updateCartLocator);
+  }
+}
diff --git a/pages/women/WomenCategoryPage.ts b/pages/women/WomenCategoryPage.ts
@@ -1,11 +1,15 @@
 import { Page } from "@playwright/test";
 import { LumaMainPage } from "../LumaMainPage";
 import { ItemShoppingComponentPage } from "../pageComponents/productShoppingComponent/ItemShoppingPage";
+import { SideBarShoppingComponentPage } from "../pageComponents/sidebarShoppingComponent/SideBarShoppingComponentPage";
 
 export class WomenCategoryPage extends LumaMainPage {
-  itemShoppingPage: ItemShoppingComponentPage;
+  itemShoppingComponent: ItemShoppingComponentPage;
+  sideBarShoppingComponent: SideBarShoppingComponentPage;
+
   constructor(page: Page) {
     super(page)
-    this.itemShoppingPage = new ItemShoppingComponentPage(page);
+    this.itemShoppingComponent = new ItemShoppingComponentPage(page);
+    this.sideBarShoppingComponent = new SideBarShoppingComponentPage(page);
   }
 }
diff --git a/tests/menCategoryShoppingTests/BuyFilteredProductFromMenCategory.spec.ts b/tests/menCategoryShoppingTests/BuyFilteredProductFromMenCategory.spec.ts
diff --git a/tests/productPurchaseTests/BuyProductEndToEndSanityTest.spec.ts b/tests/productPurchaseTests/BuyProductEndToEndSanityTest.spec.ts
diff --git a/tests/shoppingCartTests/ShoppingCartSanityTest.spec.ts b/tests/shoppingCartTests/ShoppingCartSanityTest.spec.ts
diff --git a/tests/signUpTests/CreateAnAccountTest.spec.ts b/tests/signUpTests/CreateAnAccountTest.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,8 @@ export interface ProductItemOptionalParamsInterface {`
`22`	`22`	`validatePrice?: boolean,`
`23`	`23`	`price?: string,`
`24`	`24`	`addItemToCart?: boolean,`
	`25`	`+ modifyQuantity?: boolean,`
	`26`	`+ quantity?: string,`
`25`	`27`	`}`
`26`	`28`
`27`	`29`	`export interface ClientSideValiationErrorOptionalParamsInterface {`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ export class BasePage {`
`63`	`63`	`await locatorElement.clear();`
`64`	`64`	`}`
`65`	`65`
`66`		`- public async countElement(locator: (string \| Locator)) {`
	`66`	`+ public async countElements(locator: (string \| Locator)) {`
`67`	`67`	`const locatorElement = await this.getTypeOfLocator(locator);`
`68`	`68`	`const locatorCount = await locatorElement.count();`
`69`	`69`	`return locatorCount;`
`@@ -86,7 +86,7 @@ export class BasePage {`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`public async getPageUrl() {`
`89`		`- const pageUrl = this.page.url;`
	`89`	`+ const pageUrl = this.page.url();`
`90`	`90`	`return pageUrl;`
`91`	`91`	`}`
`92`	`92`
Original file line number	Diff line number	Diff line change
`@@ -4,12 +4,12 @@ import { ItemShoppingComponentPage } from "../pageComponents/productShoppingComp`
`4`	`4`	`import { SideBarShoppingComponentPage } from "../pageComponents/sidebarShoppingComponent/SideBarShoppingComponentPage";`
`5`	`5`
`6`	`6`	`export class MenCategoryPage extends LumaMainPage {`
`7`		`- itemShoppingPage: ItemShoppingComponentPage;`
	`7`	`+ itemShoppingComponent: ItemShoppingComponentPage;`
`8`	`8`	`sideBarShoppingComponent: SideBarShoppingComponentPage;`
`9`	`9`
`10`	`10`	`constructor(page: Page) {`
`11`	`11`	`super(page)`
`12`		`- this.itemShoppingPage = new ItemShoppingComponentPage(page);`
	`12`	`+ this.itemShoppingComponent = new ItemShoppingComponentPage(page);`
`13`	`13`	`this.sideBarShoppingComponent = new SideBarShoppingComponentPage(page);`
`14`	`14`	`}`
`15`	`15`	`}`