From 2ffdbfb03cfd9a73435bbf21d39e6fdf652ba4c3 Mon Sep 17 00:00:00 2001 From: ytimocin Date: Tue, 7 May 2024 16:47:04 +0300 Subject: [PATCH] Fixing the eShop catalog load issue for the UI tests Signed-off-by: ytimocin --- playwright/tests/eshop/eshop.app.spec.ts | 117 +++++++++++++---------- 1 file changed, 66 insertions(+), 51 deletions(-) diff --git a/playwright/tests/eshop/eshop.app.spec.ts b/playwright/tests/eshop/eshop.app.spec.ts index 93ebcda1..ebd6896d 100644 --- a/playwright/tests/eshop/eshop.app.spec.ts +++ b/playwright/tests/eshop/eshop.app.spec.ts @@ -2,140 +2,155 @@ import { test, expect } from "@playwright/test"; test("eShop on Containers App Basic UI and Functionality Checks", async ({ page, -}) => { - console.log("Starting the eShop App UI tests"); +}, testInfo) => { + if (testInfo.retry > 0) { + console.log(`Retrying!`); + } + + console.log("Starting the eShop App UI tests - Attempt: " + testInfo.retry); - console.log("Checking the necessary environment variables"); + console.log( + `Attempt ${testInfo.retry}: Checking the necessary environment variables` + ); let endpoint = process.env.ENDPOINT; expect(endpoint).toBeDefined(); // Remove quotes from the endpoint if they exist try { - console.log("Navigating to the endpoint"); + console.log(`Attempt ${testInfo.retry}: Navigating to the endpoint`); endpoint = (endpoint as string).replace(/['"]+/g, ""); - console.log(`Endpoint: ${endpoint}`); + console.log(`Attempt ${testInfo.retry}: Endpoint: ${endpoint}`); await page.goto(endpoint); } catch (error) { - console.error("Failed to navigate to the endpoint:", error); + console.error( + `Attempt ${testInfo.retry}: Failed to navigate to the endpoint:`, + error + ); } // Expect page to have proper URL - console.log("Checking the URL"); + console.log(`Attempt ${testInfo.retry}: Checking the URL`); await expect(page).toHaveURL(new RegExp(`${endpoint}/catalog.*`)); // Expect page to have proper title - console.log("Checking the title"); + console.log(`Attempt ${testInfo.retry}: Checking the title`); await expect(page).toHaveTitle("eShopOnContainers - SPA"); // Check for the LOGIN button in the home page - console.log("Checking the LOGIN button"); + console.log(`Attempt ${testInfo.retry}: Checking the LOGIN button`); const loginButton = page.getByText("LOGIN"); await expect(loginButton).toBeVisible(); await loginButton.click(); // Expect login page to have proper title - console.log("Checking the login page title"); + console.log(`Attempt ${testInfo.retry}: Checking the login page title`); await expect(page).toHaveTitle("eShopOnContainers - Identity"); // Fill in the username and password - console.log("Filling in the username"); + console.log(`Attempt ${testInfo.retry}: Filling in the username`); const username = page.getByPlaceholder("Username"); await expect(username).toBeVisible(); await username.click(); await username.fill("alice"); - console.log("Filling in the password"); + console.log(`Attempt ${testInfo.retry}: Filling in the password`); const password = page.getByPlaceholder("Password"); await expect(password).toBeVisible(); await password.click(); await password.fill("Pass123$"); // Click on the LOGIN button - console.log("Clicking the LOGIN button"); + console.log(`Attempt ${testInfo.retry}: Clicking the LOGIN button`); await page.getByRole("button", { name: "Login" }).click(); // After login, expect to be redirected to the catalog page // Expect page to have proper URL - console.log("Checking the URL after login"); + console.log(`Attempt ${testInfo.retry}: Checking the URL after login`); await expect(page).toHaveURL(new RegExp(`${endpoint}/catalog.*`)); // Expect page to have proper title - console.log("Checking the title after login"); + console.log(`Attempt ${testInfo.retry}: Checking the title after login`); await expect(page).toHaveTitle("eShopOnContainers - SPA"); // Logged user details should be visible - console.log("Checking the user details"); + console.log(`Attempt ${testInfo.retry}: Checking the user details`); const user = page.getByText("AliceSmith@email.com"); await expect(user).toBeVisible(); // Click on the user details await user.click(); // Check dropdown menu - console.log("Checking the dropdown menu"); + console.log(`Attempt ${testInfo.retry}: Checking the dropdown menu`); await expect(page.getByText("My orders")).toBeVisible(); await expect(page.getByText("Log Out")).toBeVisible(); // Find the catalog - console.log("Finding the catalog"); + console.log(`Attempt ${testInfo.retry}: Finding the catalog`); const catalogSelector = "esh-catalog"; await page.waitForSelector(catalogSelector); const catalog = page.locator(catalogSelector); await expect(catalog).toBeVisible(); - console.log("Catalog found"); - - let numberOfItemsAdded = 0; - // Add the first item to the cart - console.log("Adding an item to the cart"); - const firstItemSelector = "div:nth-child(1) > .esh-catalog-item"; + console.log(`Attempt ${testInfo.retry}: Catalog found`); + const catalogErrorMessage = "Error requesting catalog products"; let attempts = 0; let maxAttempts = 5; - let firstItem; + let catalogFound = false; while (attempts < maxAttempts) { - try { - // If the item is not found in the first attempt, - // reload the page to trigger the API call again. - if (attempts > 0) { - await page.reload(); - } - - await page.waitForSelector(firstItemSelector); - firstItem = page.locator(firstItemSelector); - await expect(firstItem).toBeVisible(); - await firstItem.click(); - console.log("Item added to the cart"); - numberOfItemsAdded++; - break; - } catch (error) { - // If the item is not found within 5 seconds, an error will be thrown here, then the page will be reloaded - console.error("Item not found:", error); + if (await page.getByText(catalogErrorMessage).isVisible()) { + console.log( + `Attempt ${testInfo.retry}: Error message is visible, reloading the page` + ); attempts++; + await page.reload(); + } else { + console.log( + `Attempt ${testInfo.retry}: Catalog products are now visible` + ); + catalogFound = true; + break; } } - if (!firstItem) { - throw new Error("First item not found after " + maxAttempts + " attempts"); + if (!catalogFound) { + throw new Error( + `Attempt ${testInfo.retry}: Catalog not found after ${maxAttempts} attempts` + ); } + // Add the first item to the cart + let numberOfItemsAdded = 0; + console.log(`Attempt ${testInfo.retry}: Adding an item to the cart`); + const firstItemSelector = "div:nth-child(1) > .esh-catalog-item"; + let firstItem; + await page.waitForSelector(firstItemSelector); + firstItem = page.locator(firstItemSelector); + await expect(firstItem).toBeVisible(); + await firstItem.click(); + console.log(`Attempt ${testInfo.retry}: Item added to the cart`); + numberOfItemsAdded++; + // Go to the cart - console.log("Going to the cart"); + console.log(`Attempt ${testInfo.retry}: Going to the cart`); const cartLink = page.getByRole("link", { name: `${numberOfItemsAdded}` }); await expect(cartLink).toBeVisible(); await cartLink.click(); - console.log("Cart page loaded"); + console.log(`Attempt ${testInfo.retry}: Cart page loaded`); // Expect page to have proper URL - console.log("Checking the URL after going to the cart"); + console.log( + `Attempt ${testInfo.retry}: Checking the URL after going to the cart` + ); await expect(page).toHaveURL(new RegExp(`${endpoint}/basket.*`)); // Checkout - console.log("Checking out"); + console.log(`Attempt ${testInfo.retry}: Checking out`); await page.getByRole("button", { name: "Checkout" }).click(); // Place the order - console.log("Placing the order"); + console.log(`Attempt ${testInfo.retry}: Placing the order`); await page.getByRole("button", { name: "Place Order" }).click(); // Continue Shopping - console.log("Continuing shopping"); + console.log(`Attempt ${testInfo.retry}: Continuing shopping`); await page.getByRole("link", { name: "Continue Shopping" }).click(); // Logout - console.log("Logging out"); + console.log(`Attempt ${testInfo.retry}: Logging out`); await page.locator("div").filter({ hasText: "Log Out" }).nth(0).click(); });