Merge pull request #19 from auto-qa-hub/po-add-to-cart-flow

po-for-cart-and-few-po-updates

Author: andrew-ksv

page_objects_ts/CartPage.ts

@@ -0,0 +1,52 @@
+import { Locator, Page } from "@playwright/test";
+export class CartPage {
+  readonly page: Page;
+  readonly cartItems: Locator;
+  readonly removeButtons: Locator;
+  readonly checkoutButton: Locator;
+  readonly continueShoppingButton: Locator;
+  readonly itemNames: Locator;
+  readonly itemPrices: Locator;
+  readonly itemQuantities: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.cartItems = page.locator(".cart_item");
+    this.removeButtons = page.locator(".inventory_item_price");
+    this.checkoutButton = page.locator("#checkout");
+    this.continueShoppingButton = page.locator("#continue-shopping");
+    this.itemNames = page.locator(".inventory_item_name");
+    this.itemPrices = page.locator(".inventory_item_price");
+    this.itemQuantities = page.locator(".cart_quantity");
+  }
+
+  async removeItem(index: number) {
+    await this.removeButtons.nth(index).click();
+  }
+
+  async verifyItemExists(itemName: string) {
+    await this.page.locator(`text=${itemName}`).waitFor();
+  }
+
+  async clickCheckout() {
+    await this.checkoutButton.click();
+  }
+
+  async clickContinueShopping() {
+    await this.continueShoppingButton.click();
+  }
+
+  async getCartItemsCount(): Promise<number> {
+    return await this.cartItems.count();
+  }
+
+  async getItemPrice(index: number): Promise<string> {
+    return await this.itemPrices.nth(index).innerText();
+  }
+
+  async getItemQuantity(index: number): Promise<string> {
+    return await this.itemQuantities.nth(index).innerText();
+  }
+}
+
+module.exports = { CartPage };

page_objects_ts/InventoryPage.ts

@@ -1,37 +1,90 @@
-import { test, expect, Locator, Page } from "@playwright/test";
+import { Locator, Page } from "@playwright/test";
 export class InventoryPage {
   page: Page;
-  userMenu: Locator;
-  crossUserMenuIcon: Locator;
-  logoutLink: Locator;
   addToCartFirstButtonItem: Locator;
-  shoppingContainerIcon:Locator;
+  removeButtonFirstItem: Locator;
+
+  addToCartButton2ndItem: Locator;
+  removeButton2ndItem: Locator;
+
+  addToCartButton3rdItem: Locator;
+  removeButton3rdItem: Locator;
+
+  addToCartButton4thItem: Locator;
+  removeButton4thItem: Locator;
+
+  addToCartButton5thItem: Locator;
+  removeButton5thItem: Locator;
+
+  addToCartButton6thItem: Locator;
+  removeButton6thItem: Locator;
+
+  shoppingContainerIcon: Locator;
+  shoppingCartBagde: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.userMenu = page.locator("#react-burger-menu-btn");
-    this.crossUserMenuIcon = page.locator("#react-burger-cross-btn");
-    this.logoutLink = page.locator("#logout_sidebar_link");
-    this.addToCartFirstButtonItem = page.locator("#add-to-cart-sauce-labs-backpack")
+    this.addToCartFirstButtonItem = page.locator("#add-to-cart-sauce-labs-backpack");
+    this.removeButtonFirstItem = page.locator("#remove-sauce-labs-backpack");
+
+    this.addToCartButton2ndItem = page.locator("#add-to-cart-sauce-labs-bike-light");
+    this.removeButton2ndItem = page.locator("#remove-sauce-labs-bike-light");
+
+    this.addToCartButton3rdItem = page.locator("#add-to-cart-sauce-labs-bolt-t-shirt");
+    this.removeButton3rdItem = page.locator("#remove-sauce-labs-bolt-t-shirt");
+
+    this.addToCartButton4thItem = page.locator("#add-to-cart-sauce-labs-fleece-jacket");
+    this.removeButton4thItem = page.locator("#remove-sauce-labs-fleece-jacket");
+
+    this.addToCartButton5thItem = page.locator("#add-to-cart-sauce-labs-onesie");
+    this.removeButton5thItem = page.locator("#remove-sauce-labs-onesie");
+
+    this.addToCartButton6thItem = page.locator('[id*="add-to-cart-test.allthethings()-t-shirt-(red)"]');
+    this.removeButton6thItem = page.locator('[id*="remove-test.allthethings()-t-shirt-(red)"]');
+
     this.shoppingContainerIcon = page.locator("#shopping_cart_container");
+    this.shoppingCartBagde = page.locator('a span[class="shopping_cart_badge"]');
   }
 
-  async UserMenuIcon() {
-    await this.userMenu.click();
+  async addToCartFirstItem() {
+    await this.addToCartFirstButtonItem.click();
   }
-  async closeMenuIcon() {
-    await this.crossUserMenuIcon.click();
+  async addToCart2ndItem() {
+    await this.addToCartButton2ndItem.click();
   }
-  async addToCartFirstItem(){
-    await this.addToCartFirstButtonItem.click();
+  async addToCart3rdItem() {
+    await this.addToCartButton3rdItem.click();
   }
-  async ShopContainerIcon(){
-    await this.shoppingContainerIcon.click();
+  async addToCart4thItem() {
+    await this.addToCartButton4thItem.click();
+  }
+  async addToCart5thItem() {
+    await this.addToCartButton5thItem.click();
+  }
+  async addToCart6thItem() {
+    await this.addToCartButton6thItem.click();
+  }
+  async removeFirstItem() {
+    await this.removeButtonFirstItem.click();
   }
-  async Logout() {
-    await this.logoutLink.click();
+  async remove2ndItem() {
+    await this.removeButton2ndItem.click();
+  }
+  async remove3rdItem() {
+    await this.removeButton3rdItem.click();
+  }
+  async remove4thItem() {
+    await this.removeButton4thItem.click();
+  }
+  async remove5thItem() {
+    await this.removeButton5thItem.click();
+  }
+  async remove6thItem() {
+    await this.removeButton6thItem.click();
+  }
+  async ShopContainerIcon() {
+    await this.shoppingContainerIcon.click();
   }
-  
 }
 
 module.exports = { InventoryPage };

page_objects_ts/UserMenuPage.ts

@@ -0,0 +1,26 @@
+import { Locator, Page } from "@playwright/test";
+export class UserMenuPage {
+  page: Page;
+  userMenu: Locator;
+  crossUserMenuIcon: Locator;
+  logoutLink: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.userMenu = page.locator("#react-burger-menu-btn");
+    this.crossUserMenuIcon = page.locator("#react-burger-cross-btn");
+    this.logoutLink = page.locator("#logout_sidebar_link");
+  }
+
+  async UserMenuIcon() {
+    await this.userMenu.click();
+  }
+  async closeMenuIcon() {
+    await this.crossUserMenuIcon.click();
+  }
+  async Logout() {
+    await this.logoutLink.click();
+  }
+}
+
+module.exports = { UserMenuPage };

tests/visualUser.spec.ts

@@ -2,12 +2,14 @@ import { test, expect } from "@playwright/test";
 import { MainPage } from "../page_objects_ts/MainPage";
 import usersData from "../fixtures/usersData.json";
 import { InventoryPage } from "../page_objects_ts/InventoryPage";
-import usersBillingData from "../fixtures/usersBillingData.json";
+import { UserMenuPage } from "../page_objects_ts/UserMenuPage";
+
 
 test.describe("Visual user tests", () => {
   test("Visual user issues", async ({ page }) => {
     const mainPage = new MainPage(page);
     const inventoryPage = new InventoryPage(page);
+    const userMenuPage = new UserMenuPage(page);
     const username = usersData.users[5];
     const password = usersData.password;
 
@@ -21,11 +23,11 @@ test.describe("Visual user tests", () => {
     await mainPage.loginButton();
 
     await page.waitForURL("/inventory.html");
-    await inventoryPage.UserMenuIcon();
+    await userMenuPage.UserMenuIcon();
     await expect(
       page.locator('img[class*="bm-cross visual_failure"]')
     ).toBeVisible();
-    await inventoryPage.closeMenuIcon();
+    await userMenuPage.closeMenuIcon();
     await expect(
       page.locator('img[class*="bm-cross visual_failure"]')
     ).toBeVisible();