hotSellersSection first test rework

helpers/utils.js

@@ -0,0 +1,10 @@
+import { HomePage } from "../pages/home.page";
+/**
+ * Navigates to the home page and generates a random number between 0 and max (exclusive).
+ * @param {Object} homePage - The object representing the home page.
+ * @param {number} max - The upper limit for the random number.
+ * @returns {Promise<number>} - A promise that resolves to a random number.
+ */
+export async function getRandomNumber(max) {
+  return Math.floor(Math.random() * max);
+}

pages/home.page.js

@@ -1,15 +1,31 @@
 export class HomePage {
-
   constructor(page) {
     this.page = page;
-    this.homePageUrl = 'https://magento.softwaretestingboard.com/';
+    this.homePageUrl = "https://magento.softwaretestingboard.com/";
   }
 
   // locators
-  whatIsNewBTN = () => this.page.locator("#ui-id-3")
+  whatIsNewBTN = () => this.page.locator("#ui-id-3");
+  hotSellersProducts = () => this.page.locator(".product-item");
 
   async navigateToHomePage() {
     await this.page.goto(this.homePageUrl);
   }
-}
 
+  async getNumberOfHotSellers() {
+    return await this.hotSellersProducts().count();
+  }
+
+  async getNameOfHotSeller(hotSellerIndex) {
+    const productName = (
+      await this.hotSellersProducts()
+        .locator(`nth=${hotSellerIndex}`)
+        .innerText()
+    ).split("\n")[0];
+    return productName;
+  }
+
+  async clickOnHotSellerProduct(indexOfSelector) {
+    await this.hotSellersProducts().locator(`nth=${indexOfSelector}`).click();
+  }
+}

pages/product.details.js

@@ -0,0 +1,12 @@
+export class ProductDetails {
+  constructor(page) {
+    this.page = page;
+  }
+
+  // locators
+  productName = () => this.page.locator(".base");
+
+  async getProductName() {
+    return await this.productName().innerText();
+  }
+}

tests/homePage/HotSellersSection.spec.js

@@ -1,34 +1,25 @@
 import { test, expect } from "@playwright/test";
+import { HomePage } from "../../pages/home.page";
+import { ProductDetails } from "../../pages/product.details";
+import { getRandomNumber } from "../../helpers/utils";
 
 test("Six items displayed at hot sellers", async ({ page }) => {
-  await page.goto("https://magento.softwaretestingboard.com/");
-  const productItems = await page.$$(".product-item");
-  expect(productItems).toHaveLength(6);
+  const homePage = new HomePage(page);
+  await homePage.navigateToHomePage();
+  await expect(homePage.hotSellersProducts()).toHaveCount(6);
 });
 
 test("Item redirects correctly on home page", async ({ page }) => {
-  await page.goto("https://magento.softwaretestingboard.com/");
-
-  const productItems = await page.$$(".product-item");
-  const priceItems = await page.locator(".price").allTextContents();
-  const nameItems = await page.locator(".product-item-link").allInnerTexts();
-
-  for (let item in productItems) {
-    // Re-fetch the elements inside the loop to ensure they are still attached to the DOM
-    const updatedProductItems = await page.$$(".product-item");
-
-    // Go to item`s page
-    await updatedProductItems[item].click();
-
-    // Get the name of the item
-    const nameItemsPage = await page.locator("span.base").innerText();
-
-    // Get the price of the item
-    const priceItemPage = await page.locator(".product-info-main .price");
-
-    expect(nameItemsPage).toContain(nameItems[item]);
-    expect(priceItemPage).toHaveText(priceItems[item]);
-
-    await page.goto("https://magento.softwaretestingboard.com/");
-  }
+  const homePage = new HomePage(page);
+  const productDetails = new ProductDetails(page);
+
+  await homePage.navigateToHomePage();
+  const randomNumber = await getRandomNumber(
+    await homePage.getNumberOfHotSellers()
+  );
+
+  const productName = await homePage.getNameOfHotSeller(randomNumber);
+  await homePage.clickOnHotSellerProduct(randomNumber);
+  const productName2 = await productDetails.getProductName();
+  expect(productName).toContain(productName2);
 });