Skip to content

Commit

Permalink
Fixing the eShop catalog load issue for the UI tests
Browse files Browse the repository at this point in the history 
Signed-off-by: ytimocin <[email protected]>
  • Loading branch information
@ytimocin
ytimocin committed May 14, 2024
1 parent ef1650e commit f92dc65
Showing 1 changed file with 62 additions and 47 deletions.
109 changes: 62 additions & 47 deletions playwright/tests/eshop/eshop.app.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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("[email protected]");
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");
console.log(`Attempt ${testInfo.retry}: 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";
let numberOfItemsAdded = 0;
console.log(`Attempt ${testInfo.retry}: Adding an item to the cart`);

let attempts = 0;
let maxAttempts = 5;
let firstItem;
let itemAdded = 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();
// Try to find the first item in the catalog
const firstItemSelector = "div:nth-child(1) > .esh-catalog-item";
// await page.waitForSelector(firstItemSelector);
const firstItem = page.locator(firstItemSelector);
const isFirstItemVisible = await firstItem.isVisible();

// If not visible, reload the page
if (!isFirstItemVisible) {
console.log(`Attempt ${testInfo.retry}: Item is not visible!`);
attempts++;
await page.reload({ waitUntil: "commit" });
} else {
// If visible, add the item to the cart
await firstItem.click();
console.log("Item added to the cart");
console.log(`Attempt ${testInfo.retry}: Item added to the cart`);
numberOfItemsAdded++;
itemAdded = true;
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);
attempts++;
}
}

if (!firstItem) {
throw new Error("First item not found after " + maxAttempts + " attempts");
if (!itemAdded) {
// If the item was not added, log and end the test.
// Please see this issue: https://github.com/radius-project/samples/issues/1545
console.log(
`Attempt ${testInfo.retry}: Failed to add an item to the cart after ${maxAttempts} attempts`
);
return;
}

// 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();
});

0 comments on commit f92dc65

Please sign in to comment.