Adding a secton that waits until the app is ready

Signed-off-by: ytimocin <[email protected]>
radius-project · Feb 16, 2024 · 478ea43 · 478ea43
1 parent 9700e14
commit 478ea43
Show file tree

Hide file tree

Showing 5 changed files with 265 additions and 124 deletions.
diff --git a/playwright/package-lock.json b/playwright/package-lock.json
diff --git a/playwright/package.json b/playwright/package.json
@@ -8,12 +8,13 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.35.0",
-    "@types/node": "^20.6.0",
-    "@types/uuid": "^9.0.3",
-    "typescript": "^5.2.2"
+    "@playwright/test": "^1.41.2",
+    "@types/node": "^20.11.19",
+    "@types/uuid": "^9.0.8",
+    "typescript": "^5.3.3"
   },
   "dependencies": {
-    "uuid": "^9.0.0"
+    "axios": "^1.6.7",
+    "uuid": "^9.0.1"
   }
 }
diff --git a/playwright/tests/demo/demo.app.spec.ts b/playwright/tests/demo/demo.app.spec.ts
@@ -1,14 +1,17 @@
 import { test, expect } from "@playwright/test";
 import { v4 as uuidv4 } from "uuid";
+import { waitForWebApp } from "../util/helper";
 
 test("To-Do App Basic UI Checks", async ({ page }) => {
   // Listen for all console events and handle errors
-  page.on('console', msg => {
-    if (msg.type() === 'error') {
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
       console.log(`Error text: "${msg.text()}"`);
     }
   });
 
+  await waitForWebApp("http://localhost:3000/");
+
   // Go to http://localhost:3000/
   await page.goto("http://localhost:3000/");
 
@@ -19,31 +22,38 @@ test("To-Do App Basic UI Checks", async ({ page }) => {
   expect(page).toHaveTitle("Radius Demo");
 
   // Make sure the tabs are visible
-  await expect(page.getByRole("link", { name: "Radius Demo" }))
-    .toBeVisible();
-  await expect(page.getByRole("link", { name: "Container Info" }))
-    .toBeVisible();
-  await expect(page.getByRole("link", { name: "Todo List" }))
-    .toBeVisible();
+  await expect(page.getByRole("link", { name: "Radius Demo" })).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "Container Info" })
+  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Todo List" })).toBeVisible();
 
   // Make sure the tabs are clickable
-  await page.getByRole("link", { name: "Radius Demo" })
-    .click();
-  await page.getByRole("link", { name: "Container Info" })
-    .click();
-  await page.getByRole("link", { name: "Todo List" })
-    .click();
+  await page.getByRole("link", { name: "Radius Demo" }).click();
+  await page.getByRole("link", { name: "Container Info" }).click();
+  await page.getByRole("link", { name: "Todo List" }).click();
 
   // Go back to Main Page
-  await page.getByRole("link", { name: "Radius Demo" })
-    .click();
+  await page.getByRole("link", { name: "Radius Demo" }).click();
 
-  await page.getByRole('button', { name: '📄 Environment variables' }).click();
+  await page.getByRole("button", { name: "📄 Environment variables" }).click();
 
   // Make sure important environment variables are visible
-  await expect(page.getByRole('cell', { name: 'CONNECTION_REDIS_CONNECTIONSTRING' }).getByText('CONNECTION_REDIS_CONNECTIONSTRING')).toBeVisible();
-  await expect(page.getByRole('cell', { name: 'CONNECTION_REDIS_HOST' }).getByText('CONNECTION_REDIS_HOST')).toBeVisible();
-  await expect(page.getByRole('cell', { name: 'CONNECTION_REDIS_PORT' }).getByText('CONNECTION_REDIS_PORT')).toBeVisible();
+  await expect(
+    page
+      .getByRole("cell", { name: "CONNECTION_REDIS_CONNECTIONSTRING" })
+      .getByText("CONNECTION_REDIS_CONNECTIONSTRING")
+  ).toBeVisible();
+  await expect(
+    page
+      .getByRole("cell", { name: "CONNECTION_REDIS_HOST" })
+      .getByText("CONNECTION_REDIS_HOST")
+  ).toBeVisible();
+  await expect(
+    page
+      .getByRole("cell", { name: "CONNECTION_REDIS_PORT" })
+      .getByText("CONNECTION_REDIS_PORT")
+  ).toBeVisible();
 });
 
 test("Add an item and check basic functionality", async ({ page }) => {
@@ -52,33 +62,31 @@ test("Add an item and check basic functionality", async ({ page }) => {
   await page.getByRole("link", { name: "Todo List" }).click();
 
   // Make sure the input is visible
-  await expect(page.getByPlaceholder("What do you need to do?"))
-    .toBeVisible();
+  await expect(page.getByPlaceholder("What do you need to do?")).toBeVisible();
 
   // Add a todo item
   const todoItem = `Test Item ${uuidv4()}`;
-  await page.getByPlaceholder("What do you need to do?")
-    .fill(todoItem);
-  await page.getByRole("button", { name: "Add send" })
-    .click();
+  await page.getByPlaceholder("What do you need to do?").fill(todoItem);
+  await page.getByRole("button", { name: "Add send" }).click();
 
   // Make sure the todo item is visible now
-  await expect(page.getByRole("cell", { name: todoItem }))
-    .toBeVisible();
+  await expect(page.getByRole("cell", { name: todoItem })).toBeVisible();
 
   // Complete a todo item
 
   // At first we expect a lightbulb icon in the status column for the given todo item
-  await expect(page.getByRole("row", { name: `${todoItem} lightbulb` }))
-    .toBeVisible();
+  await expect(
+    page.getByRole("row", { name: `${todoItem} lightbulb` })
+  ).toBeVisible();
 
   // Then we expect to have a Complete button for the given todo item
-  await expect(page
-    .getByRole("row", {
-      name: `${todoItem} lightbulb Complete done Delete delete`,
-    })
-    .getByRole("button", { name: "Complete done" }))
-    .toBeVisible();
+  await expect(
+    page
+      .getByRole("row", {
+        name: `${todoItem} lightbulb Complete done Delete delete`,
+      })
+      .getByRole("button", { name: "Complete done" })
+  ).toBeVisible();
 
   // We click the Complete button
   await page
@@ -89,12 +97,13 @@ test("Add an item and check basic functionality", async ({ page }) => {
     .click();
 
   // Now we expect a checkmark icon represented as `done` in the status column for the given todo item
-  await expect(page
-    .getByRole("row", {
-      name: `${todoItem} done Complete done Delete delete`,
-    })
-    .getByRole("button", { name: "Complete done" }))
-    .toBeVisible();
+  await expect(
+    page
+      .getByRole("row", {
+        name: `${todoItem} done Complete done Delete delete`,
+      })
+      .getByRole("button", { name: "Complete done" })
+  ).toBeVisible();
 
   // Delete a todo item
   await page
@@ -105,6 +114,5 @@ test("Add an item and check basic functionality", async ({ page }) => {
     .click();
 
   // Make sure the todo item is not visible now
-  await expect(page.getByRole("cell", { name: todoItem }))
-    .not.toBeVisible();
+  await expect(page.getByRole("cell", { name: todoItem })).not.toBeVisible();
 });