Reworked all tests to share common code, and handle async properly

ui/tests/playwright/BrokerPropertyPage.test.tsx

@@ -1,20 +1,24 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
 
-test("Brokers property page", async ({page}) => {
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToClusterOverview();
+});
+
+test("Brokers property page", async ({ page, authenticatedPage }) => {
   await test.step("Navigate to brokers property page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
     await page.click('text="Brokers"');
-    await page.waitForSelector('text="Broker ID"',{ timeout: 500000 });
-    await page.click('table[aria-label="Kafka clusters"] tbody tr:nth-child(1) td:nth-child(2) a');
-    await page.waitForSelector('text="Clear all filters"',{ timeout: 500000 });
-  })
+    await authenticatedPage.waitForTableLoaded();
+    await authenticatedPage.clickFirstLinkInTheTable("Kafka clusters");
+  });
   await test.step("Brokers page should display properties", async () => {
-    const dataRows = await page.locator('table[aria-label="Node configuration"] tbody tr').count();
+    await authenticatedPage.waitForTableLoaded();
+    const dataRows = await page
+      .locator('table[aria-label="Node configuration"] tbody tr')
+      .count();
     expect(dataRows).toBeGreaterThan(0);
-    const dataCells = await page.locator('table[aria-label="Node configuration"] tbody tr td').evaluateAll((tds) =>
-      tds.map((td) => td.textContent?.trim() ?? "")
-    );
+    const dataCells = await page
+      .locator('table[aria-label="Node configuration"] tbody tr td')
+      .evaluateAll((tds) => tds.map((td) => td.textContent?.trim() ?? ""));
 
     expect(dataCells.length).toBeGreaterThan(0);
   });

ui/tests/playwright/BrokersPage.test.tsx

@@ -1,12 +1,14 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
 
-test("Brokers page", async ({page}) => {
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToClusterOverview();
+});
+
+test("Brokers page", async ({ page }) => {
   await test.step("Navigate to brokers page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
     await page.click('text="Brokers"');
     await page.waitForSelector('text="Rack"', { timeout: 500000 });
-  })
+  });
   await test.step("Brokers page should display table", async () => {
     expect(await page.innerText("body")).toContain("Brokers");
     expect(await page.innerText("body")).toContain(
@@ -16,11 +18,13 @@ test("Brokers page", async ({page}) => {
     expect(await page.innerText("body")).toContain("Total Replicas");
     expect(await page.innerText("body")).toContain("Rack");
     expect(await page.innerText("body")).toContain("Broker ID");
-    const dataRows = await page.locator('table[aria-label="Kafka clusters"] tbody tr').count();
+    const dataRows = await page
+      .locator('table[aria-label="Kafka clusters"] tbody tr')
+      .count();
     expect(dataRows).toBeGreaterThan(0);
-    const dataCells = await page.locator('table[aria-label="Kafka clusters"] tbody tr td').evaluateAll((tds) =>
-      tds.map((td) => td.textContent?.trim() ?? "")
-    );
+    const dataCells = await page
+      .locator('table[aria-label="Kafka clusters"] tbody tr td')
+      .evaluateAll((tds) => tds.map((td) => td.textContent?.trim() ?? ""));
 
     expect(dataCells.length).toBeGreaterThan(0);
   });

ui/tests/playwright/ClusterOverview.test.tsx

@@ -1,12 +1,17 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
+
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToClusterOverview();
+});
 
 test("Cluster Overview page", async ({ page }) => {
   await test.step("Navigate to cluster overview page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
     await page.click('text="Cluster overview"');
-    await page.waitForSelector('text="Key performance indicators and important information regarding the Kafka cluster."', { timeout: 500000 });
-  })
+    await page.waitForSelector(
+      'text="Key performance indicators and important information regarding the Kafka cluster."',
+      { timeout: 500000 },
+    );
+  });
   await test.step("Cluster overview page should display correctly", async () => {
     const newPage = page.mainFrame();
     expect(await newPage.innerText("body")).toContain("Cluster overview");

ui/tests/playwright/ConsumerGroupsPage.test.tsx

@@ -1,29 +1,31 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
+
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToConsumerGroups();
+});
 
 test("Consumer groups page", async ({ page }) => {
-  await test.step("Navigate to consumers group page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
-    await page.click('text="Consumer groups"');
-    await page.waitForSelector('text="Consumer group name"', {
-      timeout: 500000,
-    });
-  });
   await test.step("Consumer groups page should display table", async () => {
     await page.waitForFunction(() => {
-        return document.querySelectorAll('table[aria-label="Consumer groups"] tbody tr').length > 0;
+      return (
+        document.querySelectorAll(
+          'table[aria-label="Consumer groups"] tbody tr',
+        ).length > 0
+      );
     });
     expect(await page.innerText("body")).toContain("Consumer group name");
     expect(await page.innerText("body")).toContain("State");
     expect(await page.innerText("body")).toContain("Overall lag");
     expect(await page.innerText("body")).toContain("Members");
     expect(await page.innerText("body")).toContain("Topics");
-    const dataRows = await page.locator('table[aria-label="Consumer groups"] tbody tr').count();
+    const dataRows = await page
+      .locator('table[aria-label="Consumer groups"] tbody tr')
+      .count();
     expect(dataRows).toBeGreaterThan(0);
 
-    const dataCells = await page.locator('table[aria-label="Consumer groups"] tbody tr td').evaluateAll((tds) =>
-      tds.map((td) => td.textContent?.trim() ?? "")
-    );
+    const dataCells = await page
+      .locator('table[aria-label="Consumer groups"] tbody tr td')
+      .evaluateAll((tds) => tds.map((td) => td.textContent?.trim() ?? ""));
 
     expect(dataCells.length).toBeGreaterThan(0);
   });

ui/tests/playwright/ConsumerPage.test.tsx

@@ -1,18 +1,23 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
 
-test("Consumer  page", async ({page}) => {
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToConsumerGroups();
+});
+
+test("Consumer  page", async ({ page, authenticatedPage }) => {
   await test.step("Navigate to consumer page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
-    await page.click('text="Consumer groups"');
-    await page.click('table[aria-label="Consumer groups"] tbody.pf-v5-c-table__tbody > tr:nth-of-type(1) td.pf-v5-c-table__td:nth-of-type(1) a');
-    await page.waitForSelector('text="Member ID"', { timeout: 500000 });
-  })
+    await authenticatedPage.clickFirstLinkInTheTable("Consumer groups");
+    await authenticatedPage.waitForTableLoaded();
+  });
   await test.step("Consumer  page should display table", async () => {
     expect(await page.innerText("body")).toContain("Member ID");
     expect(await page.innerText("body")).toContain("Overall lag");
     expect(await page.innerText("body")).toContain("Assigned partitions");
-    const button = page.locator('button[aria-labelledby="simple-node0 00"][aria-label="Details"]').first();
+    const button = page
+      .locator(
+        'button[aria-labelledby="simple-node0 00"][aria-label="Details"]',
+      )
+      .first();
     await button?.click();
     expect(await page.innerText("body")).toContain("Committed offset");
     expect(await page.innerText("body")).toContain("Topic");

ui/tests/playwright/CreateTopicPage.test.tsx

@@ -1,10 +1,11 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
+
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToClusterOverview();
+});
 
 test.describe("Create Topic", () => {
   test.skip("Create Topic form should appear", async ({ page }) => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
-
     await page.goto(`./kafka/j7W3TRG7SsWCBXHjz2hfrg/topics/create`);
     await page.waitForLoadState("networkidle", { timeout: 10000 });
     const screenshot = await page.screenshot();

ui/tests/playwright/HomePage.test.tsx

@@ -3,8 +3,9 @@ import { expect, test } from "@playwright/test";
 test.skip("Home page", async ({ page }) => {
   await test.step("Column headings are present", async () => {
     await page.goto("./");
-    const columnHeadings = await page.locator('table[aria-label="Kafka clusters"] thead th').evaluateAll((ths) =>
-      ths.map((th) => th.textContent?.trim()));
+    const columnHeadings = await page
+      .locator('table[aria-label="Kafka clusters"] thead th')
+      .evaluateAll((ths) => ths.map((th) => th.textContent?.trim()));
     expect(columnHeadings).toContain("Name");
     expect(columnHeadings).toContain("Brokers");
     expect(columnHeadings).toContain("Consumer groups");
@@ -21,7 +22,7 @@ test.skip("Home page", async ({ page }) => {
 
     // Click on the "Connection details" button within the dropdown menu
     await page.click(
-      'button[class="pf-v5-c-menu__item"] span[class="pf-v5-c-menu__item-text"]:has-text("Connection details")'
+      'button[class="pf-v5-c-menu__item"] span[class="pf-v5-c-menu__item-text"]:has-text("Connection details")',
     );
 
     // Wait for the input fields to appear
@@ -32,21 +33,25 @@ test.skip("Home page", async ({ page }) => {
     expect(await page.innerText("body")).toContain(
       "External listeners provide client access to a Kafka cluster from outside the OpenShift cluster.",
     );
-    const inputValues = await page.locator('.pf-v5-c-form-control input[type="text"]').evaluateAll((inputs) =>
-      inputs.map((input) => (input as HTMLInputElement).value)
-    );
+    const inputValues = await page
+      .locator('.pf-v5-c-form-control input[type="text"]')
+      .evaluateAll((inputs) =>
+        inputs.map((input) => (input as HTMLInputElement).value),
+      );
     expect(inputValues.every((value) => value.length > 1)).toBe(true); //await page.waitForSelector('span[class="pf-v5-c-form-control pf-m-readonly"] input[id="text-input-13"]');
   });
 
   await test.step("Data rows are present", async () => {
-    const dataRows = await page.locator('table[aria-label="Kafka clusters"] tbody tr').elementHandles();
+    const dataRows = await page
+      .locator('table[aria-label="Kafka clusters"] tbody tr')
+      .elementHandles();
     expect(dataRows.length).toBeGreaterThan(0);
   });
 
   await test.step("Data cells in each row are present", async () => {
-    const dataCells = await page.locator('table[aria-label="Kafka clusters"] tbody tr td').evaluateAll((tds) =>
-      tds.map((td) => td.textContent?.trim() ?? "")
-    );
+    const dataCells = await page
+      .locator('table[aria-label="Kafka clusters"] tbody tr td')
+      .evaluateAll((tds) => tds.map((td) => td.textContent?.trim() ?? ""));
     expect(dataCells.length).toBeGreaterThan(0);
   });
 

ui/tests/playwright/MessagesPage.test.tsx

@@ -1,35 +1,11 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
 
-test("Messages page", async ({ page }) => {
-  await test.step("Navigate to topics messages page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
-    await page.waitForURL(page.url().replace("login", "overview"));
-    const topicsLink = page.locator("a").locator('text="Topics"');
-    await topicsLink.click();
-    await page.waitForURL(await topicsLink.getAttribute("href"));
-    await page.waitForSelector('text="Loading data"', {
-      state: "hidden",
-    });
-    const link = page
-      .locator('table[aria-label="Topics"]')
-      .locator("tbody")
-      .locator("tr")
-      .first()
-      .locator("td")
-      .first()
-      .locator("a");
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToFirstTopic();
+});
 
-    await link.click();
-    await page.waitForURL(await link.getAttribute("href"));
-    await page.waitForSelector('text="Loading data"', {
-      state: "hidden",
-    });
-    await expect(
-      page.getByText("Last updated").or(page.getByText("No messages data")),
-    ).toBeVisible();
-  });
-  await test.step("Messages page should display table", async () => {
+test("Messages page", async ({ page, authenticatedPage }) => {
+  await test.step("Messages page should display table, or an empty state", async () => {
     if (await page.getByText("No messages data").isVisible()) {
       expect(await page.innerText("body")).toContain(
         "Data will appear shortly after we receive produced messages.",

ui/tests/playwright/PartitionsPage.test.tsx

@@ -1,28 +1,28 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
 
-test("Partitions page", async ({page}) => {
-  await test.step("Navigate to partitions page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
-    await page.click('text="Topics"');
-    await page.waitForSelector('text="Hide internal topics"', { timeout: 500000 });
-    await page.click('table[aria-label="Topics"] tbody tr:first-child td:first-child a');
-    await expect(page.getByText("Last updated").or(page.getByText("No messages data"))).toBeVisible();
-    await page.click('text="Partitions"');
-    await page.waitForSelector('text="Partition ID"', { timeout: 500000 });
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToFirstTopic();
+});
 
-  })
+test("Partitions page", async ({ page, authenticatedPage }) => {
+  await test.step("Navigate to partitions page", async () => {
+    await authenticatedPage.clickLink("Partitions");
+    await authenticatedPage.waitForTableLoaded();
+  });
   await test.step("Partitions page should display table", async () => {
     expect(await page.innerText("body")).toContain("Partition ID");
     expect(await page.innerText("body")).toContain("Status");
     expect(await page.innerText("body")).toContain("Replicas");
     expect(await page.innerText("body")).toContain("Size");
     expect(await page.innerText("body")).toContain("Leader");
     expect(await page.innerText("body")).toContain("Preferred leader");
-    const dataRows = await page.locator('table[aria-label="Partitions"] tbody tr').elementHandles();
+    const dataRows = await page
+      .locator('table[aria-label="Partitions"] tbody tr')
+      .elementHandles();
     expect(dataRows.length).toBeGreaterThan(0);
-    const dataCells = await page.locator('table[aria-label="Partitions"] tbody tr td').evaluateAll((tds) =>
-    tds.map((td) => td.textContent?.trim() ?? ""));
+    const dataCells = await page
+      .locator('table[aria-label="Partitions"] tbody tr td')
+      .evaluateAll((tds) => tds.map((td) => td.textContent?.trim() ?? ""));
     expect(dataCells.length).toBeGreaterThan(0);
   });
 });

ui/tests/playwright/TopicConfigurationPage.test.tsx

@@ -1,22 +1,22 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./authenticated-test";
 
-test("Topics configuration", async ({page}) => {
+test.beforeEach(async ({ authenticatedPage }) => {
+  await authenticatedPage.goToFirstTopic();
+});
+
+test("Topics configuration", async ({ page, authenticatedPage }) => {
   await test.step("Navigate to topics configuration page", async () => {
-    await page.goto("./");
-    await page.click('text="Click to login anonymously"');
-    await page.click('text="Topics"');
-    await page.waitForSelector('text="Hide internal topics"', { timeout: 500000 });
-    await page.click('table[aria-label="Topics"] tbody tr:first-child td:first-child a');
-    await expect(page.getByText("Last updated").or(page.getByText("No messages data"))).toBeVisible();
-    await page.click('text="Configuration"');
-    await page.waitForSelector('text="Clear all filters"', { timeout: 500000 });
-  })
+    await authenticatedPage.clickLink("Configuration");
+  });
   await test.step("Topics configuration page should display table", async () => {
-    const dataRows = await page.locator('table[aria-label="Node configuration"] tbody tr').elementHandles();
+    await authenticatedPage.waitForTableLoaded();
+    const dataRows = await page
+      .locator('table[aria-label="Node configuration"] tbody tr')
+      .elementHandles();
     expect(dataRows.length).toBeGreaterThan(0);
-    const dataCells = await page.locator('table[aria-label="Node configuration"] tbody tr td').evaluateAll((tds) =>
-    tds.map((td) => td.textContent?.trim() ?? "")
-  );
+    const dataCells = await page
+      .locator('table[aria-label="Node configuration"] tbody tr td')
+      .evaluateAll((tds) => tds.map((td) => td.textContent?.trim() ?? ""));
     expect(dataCells.length).toBeGreaterThan(0);
   });
 });