Merge pull request #3028 from IntersectMBO/fix/flaky-timeout-test

Fix: flaky/timeout issue of report-321

Author: mesudip

tests/govtool-frontend/playwright/.gitignore

@@ -16,6 +16,7 @@ allure-report/
 lib/_mock/registerDRepWallets.json
 lib/_mock/registeredDRepWallets.json
 lib/_mock/proposalSubmissionWallets.json
+lib/_mock/proposalSubmissionCopyWallets.json
 lib/_mock/registerDRepCopyWallets.json
 lib/_mock/registeredDRepCopyWallets.json
 lib/_mock/wallets.json

tests/govtool-frontend/playwright/lib/helpers/exceptionHandler.ts

@@ -1,4 +1,5 @@
-import { Expect, ExpectMatcherUtils } from "@playwright/test";
+import { Page } from "@playwright/test";
+import { Logger } from "./logger";
 
 export async function expectWithInfo(
   expectation: () => Promise<void>,
@@ -10,3 +11,20 @@ export async function expectWithInfo(
     throw new Error(errorMessage);
   }
 }
+
+export async function failureWithConsoleMessages(page: Page, fn: Function) {
+  const consoleMessages: string[] = [];
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      consoleMessages.push(msg.text());
+    }
+  });
+  try {
+    await fn();
+  } catch (error) {
+    Logger.fail(
+      `Failed: ${error.message}\nConsole messages: ${consoleMessages.join("\n")}`
+    );
+    throw error;
+  }
+}

tests/govtool-frontend/playwright/lib/helpers/shellyWallet.ts

@@ -12,3 +12,11 @@ export default function extractDRepFromWallet(wallet: ShelleyWallet) {
   const dRepIdBech32 = bech32.encode("drep", words);
   return dRepIdBech32;
 }
+
+export async function generateWallets(num: number) {
+  return await Promise.all(
+    Array.from({ length: num }, () =>
+      ShelleyWallet.generate().then((wallet) => wallet.json())
+    )
+  );
+}

tests/govtool-frontend/playwright/lib/helpers/waitedLoop.ts

@@ -0,0 +1,37 @@
+export async function waitedLoop(
+  conditionFn,
+  timeout = 60000,
+  interval = 2000
+) {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    if (await conditionFn()) return true;
+    await new Promise((resolve) => setTimeout(resolve, interval));
+  }
+  return false;
+}
+
+export async function functionWaitedAssert(
+  fn,
+  options: { timeout?: number; interval?: number; message?: string } = {
+    timeout: 6000,
+    interval: 2000,
+    message: null,
+  }
+) {
+  const { timeout, interval, message } = options;
+  const startTime = Date.now();
+
+  while (true) {
+    try {
+      await fn();
+      return true;
+    } catch (error) {
+      if (Date.now() - startTime >= timeout) {
+        const errorMessage = message || error.message;
+        throw new Error(errorMessage);
+      }
+      await new Promise((resolve) => setTimeout(resolve, interval));
+    }
+  }
+}

tests/govtool-frontend/playwright/lib/pages/dRepDirectoryPage.ts

@@ -1,4 +1,5 @@
 import { convertDRepToCIP129 } from "@helpers/dRep";
+import { functionWaitedAssert, waitedLoop } from "@helpers/waitedLoop";
 import { Locator, Page, expect } from "@playwright/test";
 import { IDRep } from "@types";
 import environments from "lib/constants/environments";
@@ -40,6 +41,8 @@ export default class DRepDirectoryPage {
     '[data-testid$="-delegate-button"]'
   );
 
+  readonly NoDRepText = this.page.getByText("No DReps found");
+
   constructor(private readonly page: Page) {}
 
   async goto() {
@@ -75,22 +78,35 @@ export default class DRepDirectoryPage {
   }
 
   async validateFilters(filters: string[], filterOptions: string[]) {
-    const excludedFilters = filterOptions.filter(
-      (filter) => !filters.includes(filter)
+    let errorMessage = "";
+    await functionWaitedAssert(
+      async () => {
+        const excludedFilters = filterOptions.filter(
+          (filter) => !filters.includes(filter)
+        );
+
+        const dRepList = await this.getAllListedDReps();
+
+        for (const filter of excludedFilters) {
+          await expect(this.page.getByTestId(`${filter}-checkbox`)).toHaveCount(
+            1
+          );
+        }
+
+        for (const dRep of dRepList) {
+          const hasFilter = await this._validateTypeFiltersInDRep(
+            dRep,
+            filters
+          );
+          const actualFilter = await dRep
+            .locator('[data-testid$="-pill"]')
+            .textContent();
+          errorMessage = `${actualFilter} does not match any of the ${filters}`;
+          expect(hasFilter).toBe(true);
+        }
+      },
+      { message: errorMessage }
     );
-
-    await this.page.waitForTimeout(4_000); // wait for the dRep list to render properly
-
-    const dRepList = await this.getAllListedDReps();
-
-    for (const filter of excludedFilters) {
-      await expect(this.page.getByTestId(`${filter}-checkbox`)).toHaveCount(1);
-    }
-
-    for (const dRep of dRepList) {
-      const hasFilter = await this._validateTypeFiltersInDRep(dRep, filters);
-      expect(hasFilter).toBe(true);
-    }
   }
 
   async _validateTypeFiltersInDRep(
@@ -128,7 +144,6 @@ export default class DRepDirectoryPage {
       const isValid = validationFn(dRepList[i], dRepList[i + 1]);
       expect(isValid).toBe(true);
     }
-
     // Frontend validation
     const cip105DRepListFE = await this.getAllListedCIP105DRepIds();
     const cip129DRepListFE = await this.getAllListedCIP129DRepIds();
@@ -138,9 +153,9 @@ export default class DRepDirectoryPage {
     );
 
     for (let i = 0; i <= cip105DRepListFE.length - 1; i++) {
-      await expect(cip105DRepListFE[i]).toHaveText(dRepList[i].view);
-      await expect(cip129DRepListFE[i]).toHaveText(
-        `(CIP-129) ${cip129DRepListApi[i]}`
+      await expect(cip129DRepListFE[i]).toHaveText(cip129DRepListApi[i]);
+      await expect(cip105DRepListFE[i]).toHaveText(
+        `(CIP-105) ${dRepList[i].view}`
       );
     }
   }
@@ -149,46 +164,40 @@ export default class DRepDirectoryPage {
   }
 
   async getAllListedCIP105DRepIds() {
-    await this.page.waitForTimeout(2_000);
-
     const dRepCards = await this.getAllListedDReps();
 
     return dRepCards.map((dRep) =>
-      dRep.locator('[data-testid$="-copy-id-button"]').first()
+      dRep.locator('[data-testid$="-copy-id-button"]').last()
     );
   }
 
   async getAllListedCIP129DRepIds() {
-    await this.page.waitForTimeout(2_000);
-
     const dRepCards = await this.getAllListedDReps();
 
     return dRepCards.map((dRep) =>
-      dRep.locator('[data-testid$="-copy-id-button"]').last()
+      dRep.locator('[data-testid$="-copy-id-button"]').first()
     );
   }
 
   async getAllListedDReps() {
-    // wait for the dRep list to render properly
-    await this.page.waitForTimeout(3_000);
-    // add assertion to wait until the search input is visible
     await expect(this.searchInput).toBeVisible({ timeout: 10_000 });
 
-    return await this.page
-      .getByRole("list")
-      .locator('[data-testid$="-drep-card"]')
-      .all();
+    await waitedLoop(async () => {
+      return (
+        (await this.page.locator('[data-testid$="-drep-card"]').count()) > 0
+      );
+    });
+
+    return this.page.locator('[data-testid$="-drep-card"]').all();
   }
 
   async verifyDRepInList(dRepId: string) {
     await this.goto();
 
     await this.searchInput.fill(dRepId);
 
-    await this.page.waitForTimeout(5_000); // wait until the dRep list render properly
-
-    await expect(
-      this.page.getByTestId(`${dRepId}-drep-card`)
-    ).not.toBeVisible();
+    await expect(this.page.getByText("No DReps found")).toBeVisible({
+      timeout: 20_000,
+    });
   }
 }

tests/govtool-frontend/playwright/lib/pages/governanceActionsPage.ts

@@ -4,6 +4,7 @@ import { GovernanceActionType, IProposal } from "@types";
 import environments from "lib/constants/environments";
 import GovernanceActionDetailsPage from "./governanceActionDetailsPage";
 import { getEnumKeyByValue } from "@helpers/enum";
+import { waitedLoop } from "@helpers/waitedLoop";
 
 const MAX_SLIDES_DISPLAY_PER_TYPE = 6;
 
@@ -94,8 +95,13 @@ export default class GovernanceActionsPage {
     }
   }
 
-  async getAllProposals() {
-    await this.page.waitForTimeout(4_000); // waits for proposals to render
+  async getAllProposals(): Promise<Locator[]> {
+    await waitedLoop(async () => {
+      return (
+        (await this.page.locator('[data-testid$="-card"]').count()) > 0 ||
+        this.page.getByText("No results for the search.")
+      );
+    });
     return this.page.locator('[data-testid$="-card"]').all();
   }
 

tests/govtool-frontend/playwright/lib/pages/proposalDiscussionPage.ts

@@ -2,6 +2,7 @@ import { expect, Locator, Page } from "@playwright/test";
 import { ProposalCreateRequest, ProposalType, ProposedGovAction } from "@types";
 import environments from "lib/constants/environments";
 import ProposalDiscussionDetailsPage from "./proposalDiscussionDetailsPage";
+import { functionWaitedAssert, waitedLoop } from "@helpers/waitedLoop";
 
 export default class ProposalDiscussionPage {
   // Buttons
@@ -31,15 +32,6 @@ export default class ProposalDiscussionPage {
     await this.page.waitForTimeout(2_000);
   }
 
-  async closeUsernamePrompt() {
-    await this.page.waitForTimeout(5_000);
-    await this.page
-      .locator("div")
-      .filter({ hasText: /^Hey, setup your username$/ })
-      .getByRole("button")
-      .click();
-  }
-
   async viewFirstProposal(): Promise<ProposalDiscussionDetailsPage> {
     await this.page
       .locator('[data-testid^="proposal-"][data-testid$="-view-details"]')
@@ -49,7 +41,13 @@ export default class ProposalDiscussionPage {
   }
 
   async getAllProposals() {
-    await this.page.waitForTimeout(4_000); // waits for proposals to render
+    await waitedLoop(async () => {
+      return (
+        (await this.page
+          .locator('[data-testid^="proposal-"][data-testid$="-card"]')
+          .count()) > 0
+      );
+    });
 
     return this.page
       .locator('[data-testid^="proposal-"][data-testid$="-card"]')
@@ -129,12 +127,22 @@ export default class ProposalDiscussionPage {
     filters: string[],
     validateFunction: (proposalCard: any, filters: string[]) => Promise<boolean>
   ) {
-    const proposalCards = await this.getAllProposals();
-
-    for (const proposalCard of proposalCards) {
-      const hasFilter = await validateFunction(proposalCard, filters);
-      expect(hasFilter).toBe(true);
-    }
+    let errorMessage = "";
+    await functionWaitedAssert(
+      async () => {
+        const proposalCards = await this.getAllProposals();
+
+        for (const proposalCard of proposalCards) {
+          const type = await proposalCard
+            .getByTestId("governance-action-type")
+            .textContent();
+          const hasFilter = await validateFunction(proposalCard, filters);
+          errorMessage = `A governance action type ${type} does not contain on ${filters}`;
+          expect(hasFilter).toBe(true);
+        }
+      },
+      { message: errorMessage }
+    );
   }
 
   async sortAndValidate(

tests/govtool-frontend/playwright/lib/pages/proposalSubmissionPage.ts

@@ -129,8 +129,6 @@ export default class ProposalSubmissionPage {
   async goto() {
     await this.page.goto(`${environments.frontendUrl}/proposal_discussion`);
 
-    await this.page.waitForTimeout(2_000); // wait until page load properly
-
     await this.verifyIdentityBtn.click();
     await this.proposalCreateBtn.click();
 
@@ -482,9 +480,7 @@ export default class ProposalSubmissionPage {
     await this.continueBtn.click();
     await this.submitBtn.click();
 
-    // Wait for redirection to `proposal-discussion-details` page
-    await this.page.waitForTimeout(2_000);
-
+    await expect(this.page.getByTestId("submit-as-GA-button")).toBeVisible();
     const currentPageUrl = this.page.url();
     return extractProposalIdFromUrl(currentPageUrl);
   }

tests/govtool-frontend/playwright/lib/services/kuberService.ts

@@ -137,8 +137,12 @@ const kuberService = {
     });
   },
   // register stake and outputs 20A
-  initializeWallets: (wallets: StaticWallet[]) => {
-    const kuber = new Kuber(faucetWallet.address, faucetWallet.payment.private);
+  initializeWallets: (
+    wallets: StaticWallet[],
+    faucetAddress: string = faucetWallet.address,
+    faucetStakeKey: string = faucetWallet.payment.private
+  ) => {
+    const kuber = new Kuber(faucetAddress, faucetStakeKey);
     const outputs = [];
     const stakes = [];
     const certificates = [];
@@ -195,9 +199,11 @@ const kuberService = {
   },
 
   multipleTransferADA: (
-    outputs: { address: string; value: string | number }[]
+    outputs: { address: string; value: string | number }[],
+    addr = faucetWallet.address,
+    signingKey = faucetWallet.payment.private
   ) => {
-    const kuber = new Kuber(faucetWallet.address, faucetWallet.payment.private);
+    const kuber = new Kuber(addr, signingKey);
     const req = {
       outputs,
     };

tests/govtool-frontend/playwright/lib/walletManager.ts

@@ -9,6 +9,7 @@ export type Purpose =
   | "registerDRep"
   | "registeredDRep"
   | "proposalSubmission"
+  | "proposalSubmissionCopy"
   | "registerDRepCopy"
   | "registeredDRepCopy";