Skip to content

Commit

Permalink
Fixing the eShop catalog load issue for the UI tests (#1548)
Browse files Browse the repository at this point in the history 
Signed-off-by: ytimocin <ytimocin@microsoft.com>
Signed-off-by: sk593 <shruthikumar@microsoft.com>
  • Loading branch information
@ytimocin @sk593
ytimocin authored and sk593 committed May 23, 2024
1 parent a4d51ba commit 5939e46
Showing 1 changed file with 59 additions and 47 deletions.
106 changes: 59 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,152 @@ 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!`);
}

const log = (message: any) => {
console.log(`Attempt ${testInfo.retry}: ${message}`);
};

console.log("Checking the necessary environment variables");
log("Starting the eShop App UI tests");

log("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");
endpoint = (endpoint as string).replace(/['"]+/g, "");
console.log(`Endpoint: ${endpoint}`);
log(`Navigating to the 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");
log(`Checking the URL: ${endpoint}/catalog`);
await expect(page).toHaveURL(new RegExp(`${endpoint}/catalog.*`));
// Expect page to have proper title
console.log("Checking the title");
log("Checking the title: eShopOnContainers - SPA");
await expect(page).toHaveTitle("eShopOnContainers - SPA");

// Check for the LOGIN button in the home page
console.log("Checking the LOGIN button");
log("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");
log("Checking the title: eShopOnContainers - Identity");
await expect(page).toHaveTitle("eShopOnContainers - Identity");

// Fill in the username and password
console.log("Filling in the username");
log("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");
log("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");
log("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");
log("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");
log("Checking the title after login");
await expect(page).toHaveTitle("eShopOnContainers - SPA");

// Logged user details should be visible
console.log("Checking the user details");
log("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");
log("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");
log("Finding the catalog");
const catalogSelector = "esh-catalog";
await page.waitForSelector(catalogSelector);
const catalog = page.locator(catalogSelector);
await expect(catalog).toBeVisible();
console.log("Catalog found");
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";
let numberOfItemsAdded = 0;
log("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) {
log("Item is not visible, reloading the page");
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");
log("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
log(`Failed to add an item to the cart after ${maxAttempts} attempts`);
return;
}

// Go to the cart
console.log("Going to the cart");
log("Going to the cart");
const cartLink = page.getByRole("link", { name: `${numberOfItemsAdded}` });
await expect(cartLink).toBeVisible();
await cartLink.click();
console.log("Cart page loaded");
log("Cart page loaded");

// Expect page to have proper URL
console.log("Checking the URL after going to the cart");
log("Checking the URL after going to the cart");
await expect(page).toHaveURL(new RegExp(`${endpoint}/basket.*`));
// Checkout
console.log("Checking out");
log("Checking out");
await page.getByRole("button", { name: "Checkout" }).click();
// Place the order
console.log("Placing the order");
log("Placing the order");
await page.getByRole("button", { name: "Place Order" }).click();
// Continue Shopping
console.log("Continuing shopping");
log("Continuing shopping");
await page.getByRole("link", { name: "Continue Shopping" }).click();
// Logout
console.log("Logging out");
log("Logging out");
await page.locator("div").filter({ hasText: "Log Out" }).nth(0).click();
});

0 comments on commit 5939e46

Please sign in to comment.