diff --git a/page_objects_ts/CartPage.ts b/page_objects_ts/CartPage.ts new file mode 100644 index 0000000..46c8f46 --- /dev/null +++ b/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 { + return await this.cartItems.count(); + } + + async getItemPrice(index: number): Promise { + return await this.itemPrices.nth(index).innerText(); + } + + async getItemQuantity(index: number): Promise { + return await this.itemQuantities.nth(index).innerText(); + } +} + +module.exports = { CartPage }; diff --git a/page_objects_ts/InventoryPage.ts b/page_objects_ts/InventoryPage.ts index b47607f..6ba0d0e 100644 --- a/page_objects_ts/InventoryPage.ts +++ b/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 }; diff --git a/page_objects_ts/UserMenuPage.ts b/page_objects_ts/UserMenuPage.ts new file mode 100644 index 0000000..b5e1a00 --- /dev/null +++ b/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 }; diff --git a/tests/visualUser.spec.ts b/tests/visualUser.spec.ts index 55244d5..6538214 100644 --- a/tests/visualUser.spec.ts +++ b/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();