test-for-visual-user

fixtures/usersBillingData.json

@@ -0,0 +1,5 @@
+{
+    "firstname": "TestName",
+    "lastname": "TestLastName",
+    "zip": 92618
+  }  

page_objects_ts/InventoryPage.ts

@@ -2,20 +2,36 @@ import { test, expect, Locator, Page } from "@playwright/test";
 export class InventoryPage {
   page: Page;
   userMenu: Locator;
+  crossUserMenuIcon: Locator;
   logoutLink: Locator;
+  addToCartFirstButtonItem: Locator;
+  shoppingContainerIcon: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.shoppingContainerIcon = page.locator("#shopping_cart_container");
   }
 
   async UserMenuIcon() {
     await this.userMenu.click();
   }
+  async closeMenuIcon() {
+    await this.crossUserMenuIcon.click();
+  }
+  async addToCartFirstItem(){
+    await this.addToCartFirstButtonItem.click();
+  }
+  async ShopContainerIcon(){
+    await this.shoppingContainerIcon.click();
+  }
   async Logout() {
     await this.logoutLink.click();
   }
+
 }
 
 module.exports = { InventoryPage };

tests/visualUser.spec.ts

@@ -0,0 +1,81 @@
+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";
+
+test.describe("Visual user tests", () => {
+  test("Visual user issues", async ({ page }) => {
+    const mainPage = new MainPage(page);
+    const inventoryPage = new InventoryPage(page);
+    const username = usersData.users[5];
+    const password = usersData.password;
+
+    await mainPage.visitMainPage();
+    await mainPage.fillUsername(username);
+    await mainPage.fillPassword(password);
+
+    await expect(page.locator('input[name="user-name"]')).toHaveValue(username);
+    await expect(page.locator('input[name="password"]')).toHaveValue(password);
+
+    await mainPage.loginButton();
+
+    await page.waitForURL("/inventory.html");
+    await inventoryPage.UserMenuIcon();
+    await expect(
+      page.locator('img[class*="bm-cross visual_failure"]')
+    ).toBeVisible();
+    await inventoryPage.closeMenuIcon();
+    await expect(
+      page.locator('img[class*="bm-cross visual_failure"]')
+    ).toBeVisible();
+
+    // Verify title class and spacing
+    const idElementOne = page.locator(
+      "#item_1_title_link .inventory_item_name"
+    );
+    await expect(idElementOne).toHaveText("Sauce Labs Bolt T-Shirt");
+    await expect(idElementOne).toHaveClass(/inventory_item_name\s+align_right/);
+
+    const idElementTwo = page.locator(
+      "#item_5_title_link .inventory_item_name"
+    );
+    await expect(idElementTwo).toHaveText("Sauce Labs Fleece Jacket");
+    await expect(idElementTwo).toHaveClass(/inventory_item_name\s+align_right/);
+
+    //Verify shopping icon and badge
+    const shoppingCart = page.locator("#shopping_cart_container");
+    await expect(shoppingCart).toHaveClass(
+      /shopping_cart_container\s+visual_failure/
+    );
+    await inventoryPage.addToCartFirstItem();
+    await expect(
+      page.locator('a span[class="shopping_cart_badge"]')
+    ).toBeVisible();
+
+    await inventoryPage.ShopContainerIcon();
+    await page.goto("/cart.html");
+    // Locate the item name using data-test attribute
+    const itemName = page.locator('[data-test="inventory-item-name"]');
+
+    // Verify the item name is "Sauce Labs Backpack"
+    await expect(itemName).toHaveText("Sauce Labs Backpack");
+
+    // Verify Checkout button exists and is clickable
+    const checkoutButton = page.locator("button", { hasText: "Checkout" });
+    await expect(checkoutButton).toBeVisible();
+    await expect(checkoutButton).toHaveClass(
+      /btn\s+btn_action\s+btn_medium\s+checkout_button\s+btn_visual_failure/
+    );
+
+    // Click on Checkout button
+    await checkoutButton.click();
+
+    await expect(shoppingCart).toHaveClass(
+      /shopping_cart_container\s+visual_failure/
+    );
+    await expect(
+      page.locator('a span[class="shopping_cart_badge"]')
+    ).toBeVisible();
+  });
+});