Tijl/ /fix playwright

.github/workflows/playwright.yml

@@ -12,15 +12,15 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: lts/*
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright tests
         run: npx playwright test
       - uses: actions/upload-artifact@v4
-        if: always()
+        if: ${{ !cancelled() }}
         with:
           name: playwright-report
           path: playwright-report/

package.json

@@ -12,7 +12,6 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@jest/globals": "^28.1.0",
-    "@playwright/test": "^1.38.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
     "@types/node": "^17.0.31",
@@ -84,6 +83,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
+    "@playwright/test": "^1.47.2",
     "@types/crypto-js": "^4.1.1",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",

playwright.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 5 : 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */

playwright/tests/bottom-nav/navigation.spec.ts

@@ -2,10 +2,10 @@ import { test, expect } from "@playwright/test";
 import { STORAGE_STATE } from "playwright/config/constants";
 
 test.describe("BottomNavbar", () => {
-  test.use({ storageState: STORAGE_STATE });
-
   test.beforeEach(async ({ page }) => {
     await page.goto("http://127.0.0.1:3000/");
+    await page.getByText("English").click();
+    await page.getByRole("button", { name: "Continue zinzen faq" }).click();
   });
 
   test("should navigate to MyTime when Schedule button is clicked", async ({ page }) => {

playwright/tests/collaboration-feature/goal-collaboration-feature.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
-import { API_SERVER_URL, API_SERVER_URL_GOAL, STORAGE_STATE } from "playwright/config/constants";
+import { API_SERVER_URL, API_SERVER_URL_GOAL } from "playwright/config/constants";
 import {
   acceptContactInvitation,
   addContact,
@@ -12,22 +12,42 @@ import {
   waitForResponseConfirmation,
 } from "../../utils/collaboration-feature-utils";
 
-test.describe.configure({ mode: "serial" });
+test.describe.configure({ mode: "serial", timeout: 100000 });
 
 test.describe("Goal Sharing Feature", () => {
-  let userAContext;
-  let userBContext;
-  let userCContext;
   let userAPage: Page;
   let userBPage: Page;
   let userCPage: Page;
   let invitationLink: string;
-  let currentGoalTitle: string;
+  let currentGoalTitle = "Test Goal";
 
   test.beforeAll(async ({ browser }) => {
-    ({ context: userAContext, page: userAPage } = await createUserContextAndPage(browser, STORAGE_STATE));
-    ({ context: userBContext, page: userBPage } = await createUserContextAndPage(browser, STORAGE_STATE));
-    ({ context: userCContext, page: userCPage } = await createUserContextAndPage(browser, STORAGE_STATE));
+    console.log("Setting up users A, B, and C pages...");
+    ({ page: userAPage } = await createUserContextAndPage(browser));
+    ({ page: userBPage } = await createUserContextAndPage(browser));
+    ({ page: userCPage } = await createUserContextAndPage(browser));
+
+    console.log("Navigating User A to the main page...");
+    await userAPage.goto("http://127.0.0.1:3000/");
+    await userAPage.getByText("English").click();
+    await userAPage.getByRole("button", { name: "Continue zinzen faq" }).click();
+
+    console.log("Navigating User B to the main page...");
+    await userBPage.goto("http://127.0.0.1:3000/");
+    await userBPage.getByText("English").click();
+    await userBPage.getByRole("button", { name: "Continue zinzen faq" }).click();
+
+    console.log("Navigating User C to the main page...");
+    await userCPage.goto("http://127.0.0.1:3000/");
+    await userCPage.getByText("English").click();
+    await userCPage.getByRole("button", { name: "Continue zinzen faq" }).click();
+  });
+
+  test.afterAll(async () => {
+    console.log("Closing all user pages...");
+    await userAPage.close();
+    await userBPage.close();
+    await userCPage.close();
   });
 
   const userCollaborationScenarios = [
@@ -64,56 +84,96 @@ test.describe("Goal Sharing Feature", () => {
 
   userCollaborationScenarios.forEach(({ sharer, receiver, sharerPage, receiverPage }) => {
     test(`from User ${sharer} share invitation to User ${receiver}`, async () => {
+      console.log(`User ${sharer} is navigating to their goals page...`);
       await goToMyGoalsPageFlow(sharerPage());
-      currentGoalTitle = await sharerPage().locator(".goal-title").first().locator("span").innerText();
-      invitationLink = await addContact(sharerPage(), receiver, "relId", "relationshipId");
+
+      if (sharer === "A") {
+        console.log(`User ${sharer} is creating a new goal titled "${currentGoalTitle}"...`);
+        await sharerPage().getByRole("button", { name: "add goal | add feeling | add group", exact: true }).click();
+        const titleInputContainer = sharerPage().getByPlaceholder("Goal title");
+        await titleInputContainer.fill(currentGoalTitle);
+        await titleInputContainer.press("Enter");
+      }
+
+      console.log(`User ${sharer} is adding User ${receiver} as a contact...`);
+      invitationLink = await addContact(sharerPage(), receiver, currentGoalTitle);
+
+      console.log(`User ${sharer} is navigating to their goals page again...`);
       await goToMyGoalsPageFlow(sharerPage());
-      await goToShareGoalModalFlow(sharerPage());
+
+      console.log(`User ${sharer} is opening the share goal modal for "${currentGoalTitle}"...`);
+      await goToShareGoalModalFlow(sharerPage(), currentGoalTitle);
     });
 
     test(`from User ${receiver} accept invitation of User ${sharer}`, async () => {
+      console.log(`User ${receiver} is accepting the invitation from User ${sharer}...`);
       await acceptContactInvitation(receiverPage(), invitationLink, receiver);
-      await waitForResponseConfirmation(receiverPage(), API_SERVER_URL, "accepted");
+      await waitForResponseConfirmation(receiverPage(), API_SERVER_URL);
     });
 
     test(`share goal from User ${receiver} to User ${sharer}`, async () => {
-      await sharerPage().getByRole("button", { name: receiver, exact: true }).click();
-      await sharerPage().waitForSelector(".ant-notification-notice");
+      console.log(`User ${sharer} is sharing the goal with User ${receiver}...`);
+      await goToMyGoalsPageFlow(sharerPage());
+
+      console.log(`User ${sharer} is opening the share goal modal for "${currentGoalTitle}"...`);
+      await goToShareGoalModalFlow(sharerPage(), currentGoalTitle);
+      await expect(async () => {
+        await sharerPage().getByRole("button", { name: receiver, exact: true }).click();
+        await sharerPage().waitForLoadState("networkidle");
+      }).toPass({
+        timeout: 10_000,
+      });
     });
 
-    test(`check whether shared goal is visible in User ${receiver}'s patner goal`, async () => {
+    test(`check whether shared goal is visible in User ${receiver}'s partner goal`, async () => {
+      console.log(`User ${receiver} is reloading the page to check for shared goal visibility...`);
       await receiverPage().reload();
-      await waitForResponseConfirmation(receiverPage(), API_SERVER_URL_GOAL, "shareMessage");
+      await waitForResponseConfirmation(receiverPage(), API_SERVER_URL_GOAL);
       await receiverPage().getByRole("img", { name: "ZinZen" }).click();
       await receiverPage().reload();
       await expect(receiverPage().locator(".user-goal-main")).toBeVisible();
     });
 
     test(`initiate collaboration between User ${sharer} and User ${receiver}`, async () => {
-      await collaborateFlow(receiverPage());
+      console.log(`Initiating collaboration between User ${sharer} and User ${receiver}...`);
+      await collaborateFlow(receiverPage(), currentGoalTitle);
     });
 
     test(`check if collaborated goal is visible in User ${receiver}'s MyGoal`, async () => {
-      await receiverPage().getByRole("button", { name: "Goals" }).click();
-      await expect(receiverPage().locator(".goal-title").first().locator("span")).toContainText(currentGoalTitle);
+      console.log(`Checking if collaborated goal is visible in User ${receiver}'s MyGoal...`);
+      await receiverPage().locator(".header-logo-wrapper").click();
+      await expect(receiverPage().locator(".my-goals-content").first()).toContainText(currentGoalTitle);
     });
   });
 
   editAndConfirmScenarios.forEach(
     ({ sharer, receiverFirst, receiverSecond, sharerPage, receiverPageFirst, receiverPageSecond }) => {
       test(`goal update by ${sharer}: edit goal in User ${sharer}`, async () => {
-        await goToMyGoalsPageFlow(sharerPage());
-        await goalActionFlow(sharerPage(), "Edit");
-        await sharerPage().locator(".header-title").locator("input").fill(`${currentGoalTitle} edited by ${sharer}`);
-        await sharerPage().locator(".action-btn-container").locator(".action-btn").click();
-        currentGoalTitle = await sharerPage().locator(".goal-title").first().locator("span").innerText();
+        console.log(`User ${sharer} is updating the goal "${currentGoalTitle}"...`);
+        await expect(async () => {
+          await goToMyGoalsPageFlow(sharerPage());
+          await goalActionFlow(sharerPage(), "Edit", currentGoalTitle);
+          await sharerPage().locator(".header-title").locator("input").fill(`${currentGoalTitle} edited by ${sharer}`);
+          await sharerPage().locator(".action-btn-container").locator(".action-btn").click();
+        }).toPass();
+
+        console.log(`Getting the updated goal title from User ${sharer}'s page...`);
+        currentGoalTitle = await sharerPage()
+          .locator(".user-goal-dark")
+          .filter({
+            has: sharerPage().locator(".contact-button"),
+          })
+          .locator(".goal-title span")
+          .innerText();
       });
 
       test(`goal update by ${sharer}: check if User ${receiverFirst} received updated goal from User ${sharer}`, async () => {
+        console.log(`Checking if User ${receiverFirst} received the updated goal from User ${sharer}...`);
         await verifyUpdatedGoal(receiverPageFirst(), currentGoalTitle, API_SERVER_URL_GOAL);
       });
 
       test(`goal update by ${sharer}: check if User ${receiverSecond} received updated goal from User ${sharer}`, async () => {
+        console.log(`Checking if User ${receiverSecond} received the updated goal from User ${sharer}...`);
         await verifyUpdatedGoal(receiverPageSecond(), currentGoalTitle, API_SERVER_URL_GOAL);
       });
     },

playwright/tests/config-goal-ui.spec.ts

@@ -10,8 +10,7 @@ test.describe("Config Goal UI", () => {
 
   test("should add a new goal after pressing Enter key", async ({ page }) => {
     await page.getByRole("button", { name: "Goals" }).click();
-    await page.getByRole("button", { name: "add goal | add feeling | add group", exact: true }).click();
-    await page.getByRole("button", { name: "Goal add goal", exact: true }).click();
+    await page.getByRole("button", { name: "add goal | add feeling | add group", exact: true }).click({});
 
     const titleInputContainer = page.getByPlaceholder("Goal title");
     const testGoalTitle = "Test Goal";
@@ -24,7 +23,9 @@ test.describe("Config Goal UI", () => {
 
   test("should add a new budget after pressing Enter key", async ({ page }) => {
     await page.getByRole("button", { name: "Goals" }).click();
-    await page.getByRole("button", { name: "add goal | add feeling | add group", exact: true }).click();
+    await page.getByRole("button", { name: "add goal | add feeling | add group", exact: true }).click({
+      delay: 1000,
+    });
     await page.getByRole("button", { name: "Budget add goal", exact: true }).click();
 
     const titleInputContainer = page.getByPlaceholder("Budget title");

playwright/tests/header-ui.spec.ts

@@ -1,11 +1,10 @@
 import { test, expect } from "@playwright/test";
-import { STORAGE_STATE } from "playwright/config/constants";
 
 test.describe("Header component", () => {
-  test.use({ storageState: STORAGE_STATE });
-
   test.beforeEach(async ({ page }) => {
     await page.goto("http://127.0.0.1:3000/");
+    await page.getByText("English").click();
+    await page.getByRole("button", { name: "Continue zinzen faq" }).click();
   });
 
   test("should display the title correctly", async ({ page }) => {