fix: Improve flakey E2E tests

e2e/tests/api-driven/src/globalHelpers.ts

@@ -1,4 +1,4 @@
-import { TEST_EMAIL } from "../../ui-driven/src/helpers";
+import { TEST_EMAIL } from "../../ui-driven/src/globalHelpers";
 import { $admin } from "./client";
 
 export function createTeam(

e2e/tests/api-driven/src/invite-to-pay/helpers.ts

@@ -12,7 +12,7 @@ import {
   mockPassport,
 } from "./mocks";
 import { $admin } from "../client";
-import { TEST_EMAIL } from "../../../ui-driven/src/helpers";
+import { TEST_EMAIL } from "../../../ui-driven/src/globalHelpers";
 import { createTeam, createUser } from "../globalHelpers";
 
 export async function setUpMocks() {

e2e/tests/ui-driven/src/context.ts

@@ -1,5 +1,5 @@
 import assert from "node:assert";
-import { log } from "./helpers";
+import { log } from "./globalHelpers";
 import { sign } from "jsonwebtoken";
 import { CoreDomainClient } from "@opensystemslab/planx-core";
 import { GraphQLClient, gql } from "graphql-request";

e2e/tests/ui-driven/src/create-flow.spec.ts → e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts

@@ -3,14 +3,14 @@ import {
   contextDefaults,
   setUpTestContext,
   tearDownTestContext,
-} from "./context";
+} from "../context";
 import {
-  getTeamPage,
   createAuthenticatedSession,
   answerQuestion,
   clickContinue,
-} from "./helpers";
-import type { Context } from "./context";
+} from "../globalHelpers";
+import type { Context } from "../context";
+import { getTeamPage, isGetUserRequest } from "./helpers";
 
 test.describe("Navigation", () => {
   let context: Context = {
@@ -43,32 +43,26 @@ test.describe("Navigation", () => {
       userId: context.user!.id!,
     });
 
-    let getUserRequestCount = 0;
-    page.on("request", (req) => {
-      const isHasuraRequest = req.url().includes("/graphql");
-      const isGetUserRequest =
-        isHasuraRequest && req.postData()?.toString().includes("GetUserById");
+    const initialRequest = page.waitForRequest(isGetUserRequest);
 
-      if (isGetUserRequest) getUserRequestCount++;
-    });
+    Promise.all([await page.goto("/"), await initialRequest]);
 
-    await page.goto("/");
-    await page.waitForLoadState("networkidle");
+    const team = page.locator("h2", { hasText: context.team.name });
 
-    // Get user data on initial page load
-    expect(getUserRequestCount).toBe(1);
+    let isRepeatedRequestMade = false;
+    page.on(
+      "request",
+      (req) => (isRepeatedRequestMade = isGetUserRequest(req)),
+    );
 
-    const team = page.locator("h2", { hasText: context.team.name });
-    team.click();
-    await page.waitForLoadState("networkidle");
+    Promise.all([
+      await team.click(),
+      expect(isRepeatedRequestMade).toBe(false),
+    ]);
 
-    // User data not refetched on navigation to a new page
-    expect(getUserRequestCount).toBe(1);
+    const reloadRequest = page.waitForRequest(isGetUserRequest);
 
-    // User data is refetched when page reloaded
-    await page.reload();
-    await page.waitForLoadState("networkidle");
-    expect(getUserRequestCount).toBe(2);
+    Promise.all([await page.reload(), await reloadRequest]);
   });
 
   test("team data persists on page refresh @regression", async ({

e2e/tests/ui-driven/src/create-flow/helpers.ts

@@ -0,0 +1,37 @@
+import { Browser, Page, Request } from "@playwright/test";
+import { createAuthenticatedSession } from "../globalHelpers";
+
+export const isGetUserRequest = (req: Request) => {
+  const isHasuraRequest = req.url().includes("/graphql");
+  const isGetUserOperation = req.postData()?.toString().includes("GetUserById");
+  return Boolean(isHasuraRequest && isGetUserOperation);
+};
+
+export async function getAdminPage({
+  browser,
+  userId,
+}: {
+  browser: Browser;
+  userId: number;
+}): Promise<Page> {
+  const page = await createAuthenticatedSession({ browser, userId });
+  await page.goto("/");
+  await page.waitForResponse((response) => {
+    return response.url().includes("/graphql");
+  });
+  return page;
+}
+
+export async function getTeamPage({
+  browser,
+  userId,
+  teamName,
+}: {
+  browser: Browser;
+  userId: number;
+  teamName: string;
+}): Promise<Page> {
+  const page = await getAdminPage({ browser, userId });
+  await page.locator("h2", { hasText: teamName }).click();
+  return page;
+}

e2e/tests/ui-driven/src/helpers.ts → e2e/tests/ui-driven/src/globalHelpers.ts

@@ -66,35 +66,6 @@ export async function createAuthenticatedSession({
   return page;
 }
 
-export async function getAdminPage({
-  browser,
-  userId,
-}: {
-  browser: Browser;
-  userId: number;
-}): Promise<Page> {
-  const page = await createAuthenticatedSession({ browser, userId });
-  await page.goto("/");
-  await page.waitForResponse((response) => {
-    return response.url().includes("/graphql");
-  });
-  return page;
-}
-
-export async function getTeamPage({
-  browser,
-  userId,
-  teamName,
-}: {
-  browser: Browser;
-  userId: number;
-  teamName: string;
-}): Promise<Page> {
-  const page = await getAdminPage({ browser, userId });
-  await page.locator("h2", { hasText: teamName }).click();
-  return page;
-}
-
 export async function saveSession({
   page,
   context,

e2e/tests/ui-driven/src/invite-to-pay/agent.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, Page, BrowserContext } from "@playwright/test";
-import { addSessionToContext, modifyFlow } from "../helpers";
+import { addSessionToContext, modifyFlow } from "../globalHelpers";
 import inviteToPayFlow from "../mocks/flows/invite-to-pay-flow";
 import {
   Context,
@@ -15,9 +15,7 @@ import {
   navigateToPayComponent,
 } from "./helpers";
 import { mockPaymentRequest, modifiedInviteToPayFlow } from "./mocks";
-import { saveSession } from "../helpers";
-import { returnToSession } from "../helpers";
-import { clickContinue } from "../helpers";
+import { saveSession, returnToSession, clickContinue } from "../globalHelpers";
 
 let context: Context = {
   ...contextDefaults,

e2e/tests/ui-driven/src/invite-to-pay/helpers.ts

@@ -5,10 +5,10 @@ import {
   answerContactInput,
   addSessionToContext,
   TEST_EMAIL,
-} from "../helpers";
+} from "../globalHelpers";
 import type { Page } from "@playwright/test";
 import { gql, GraphQLClient } from "graphql-request";
-import { fillInEmail } from "../helpers";
+import { fillInEmail } from "../globalHelpers";
 import { PaymentRequest } from "@opensystemslab/planx-core/dist/types";
 import { Context } from "../context";
 

e2e/tests/ui-driven/src/invite-to-pay/mocks.ts

@@ -5,7 +5,7 @@ import {
   SessionData,
 } from "@opensystemslab/planx-core/types";
 import inviteToPayFlow from "../mocks/flows/invite-to-pay-flow";
-import { TEST_EMAIL } from "../helpers";
+import { TEST_EMAIL } from "../globalHelpers";
 
 export const mockPaymentRequest: Partial<PaymentRequest> = {
   payeeEmail: TEST_EMAIL,

e2e/tests/ui-driven/src/invite-to-pay/nominee.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect, Page, APIRequestContext } from "@playwright/test";
 import { v4 as uuidV4 } from "uuid";
-import { fillGovUkCardDetails, cards } from "../helpers";
+import { fillGovUkCardDetails, cards } from "../globalHelpers";
 import inviteToPayFlow from "../mocks/flows/invite-to-pay-flow";
 import {
   Context,

e2e/tests/ui-driven/src/login.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { createAuthenticatedSession } from "./helpers";
+import { createAuthenticatedSession } from "./globalHelpers";
 import {
   contextDefaults,
   setUpTestContext,

e2e/tests/ui-driven/src/pay.spec.ts

@@ -5,7 +5,7 @@ import {
   getSessionId,
   log,
   waitForPaymentResponse,
-} from "./helpers";
+} from "./globalHelpers";
 import type { Page } from "@playwright/test";
 import payFlow from "./mocks/flows/pay-flow.json";
 import { gql, GraphQLClient } from "graphql-request";

e2e/tests/ui-driven/src/save-and-return.spec.ts

@@ -16,7 +16,7 @@ import {
   returnToSession,
   saveSession,
   modifyFlow,
-} from "./helpers";
+} from "./globalHelpers";
 import type { Context } from "./context";
 
 test.describe("Save and return", () => {

e2e/tests/ui-driven/src/sections.spec.ts

@@ -17,7 +17,7 @@ import {
   expectConfirmation,
   saveSession,
   returnToSession,
-} from "./helpers";
+} from "./globalHelpers";
 import { gql } from "graphql-request";
 import type { Context } from "./context";
 import type { FlowGraph } from "@opensystemslab/planx-core/types";