fix: add redirecting to field report listing page in playwright tests

Author: samshara

.github/workflows/playwright.yml

@@ -2,7 +2,7 @@ name: Playwright
 
 env:
   PLAYWRIGHT_APP_BASE_URL: ${{ vars.PLAYWRIGHT_APP_BASE_URL }}
-  PLAYWRIGHT_USER_NAME: ${{ secrets.PLAYWRIGHT_USER_NAME }}
+  PLAYWRIGHT_USER_EMAIL: ${{ secrets.PLAYWRIGHT_USER_EMAIL }}
   PLAYWRIGHT_USER_PASSWORD: ${{ secrets.PLAYWRIGHT_USER_PASSWORD }}
 
 on:

package.json

@@ -20,7 +20,7 @@
         "storybook": "pnpm -F go-ui-storybook storybook",
         "build-storybook": "pnpm -F go-ui-storybook build-storybook",
         "chromatic": "pnpm -F go-ui-storybook chromatic",
-        "test:e2e": "pnpm -F e2e-tests playwright test"
+        "test:e2e": "pnpm -F e2e-tests test"
     },
     "engines": {
         "node": "20",
@@ -30,6 +30,10 @@
         "@changesets/cli": "^2.27.10",
         "knip": "^5.36.3"
     },
+    "engines": {
+        "node": "20",
+        "pnpm": "8.6.0"
+    },
     "packageManager": "[email protected]+sha1.71f9126a20cd3d00fa47c188f956918858180e54",
     "pnpm": {
         "patchedDependencies": {

packages/e2e-tests/.env.example

@@ -1,6 +1,6 @@
 # Base URL for the application where Playwright will run tests
 PLAYWRIGHT_APP_BASE_URL=
 # User name of the test user for Playwright
-PLAYWRIGHT_USER_NAME=
+PLAYWRIGHT_USER_EMAIL=
 # Password of the test user for Playwright
 PLAYWRIGHT_USER_PASSWORD=

packages/e2e-tests/playwright.config.ts

@@ -8,7 +8,7 @@ import 'dotenv/config';
 require('dotenv').config();
 
 /**
- * See https://playwright.dev/docs/test-configuration.
+ * See https://playwright.dev/docs/test-configuration
  */
 export default defineConfig({
     testDir: './tests',
@@ -22,7 +22,7 @@ export default defineConfig({
     workers: process.env.CI ? 1 : undefined,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: 'html',
-    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions */
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
         baseURL: process.env.PLAYWRIGHT_APP_BASE_URL,
@@ -93,11 +93,4 @@ export default defineConfig({
                   dependencies: ['setup'],
               },
           ],
-
-    /* Run your local dev server before starting the tests */
-    // webServer: {
-    //   command: 'npm run start',
-    //   url: 'http://127.0.0.1:3000',
-    //   reuseExistingServer: !process.env.CI,
-    // },
 });

packages/e2e-tests/tests/auth.setup.ts

@@ -4,12 +4,12 @@ const authFile = 'playwright/.auth/user.json';
 
 setup('authenticate', async ({ page }) => {
     if (
-        process.env.PLAYWRIGHT_USER_NAME &&
+        process.env.PLAYWRIGHT_USER_EMAIL &&
         process.env.PLAYWRIGHT_USER_PASSWORD
     ) {
         await login(
             page,
-            process.env.PLAYWRIGHT_USER_NAME,
+            process.env.PLAYWRIGHT_USER_EMAIL,
             process.env.PLAYWRIGHT_USER_PASSWORD,
         );
     }

packages/e2e-tests/tests/earlyWarning/earlyWarning.spec.ts

@@ -265,6 +265,8 @@ test.describe('Field Report', () => {
             .filter({ hasText: visibiltyOptTwo })
             .click();
         await page.getByRole('button', { name: 'Submit' }).click();
+        // Wait for redirection to field reports listing page
+        await page.waitForURL(/\/field-reports\/\d+/);
         await expect(page.locator('h1')).toContainText(
             `${newtitle} - ${title}`,
         );

packages/e2e-tests/tests/epidemic-field-report/epidemic-field-report.spec.ts

@@ -252,9 +252,8 @@ test.describe('Field report flow', async () => {
             .filter({ hasText: visibiltyOptTwo })
             .click();
         await page.getByRole('button', { name: 'Submit' }).click();
-        await expect(page.locator('body')).toContainText(
-            'Field report updated, redirecting...',
-        );
+        // Wait for redirection to field reports listing page
+        await page.waitForURL(/\/field-reports\/\d+/);
         // Title Assertion
         await expect(page.locator('h1')).toContainText(
             `${newtitle} - ${title}`,

packages/e2e-tests/tests/field-report/fieldReport.spec.ts

@@ -266,9 +266,8 @@ test.describe('Field Report', () => {
             .filter({ hasText: visibiltyOptTwo })
             .click();
         await page.getByRole('button', { name: 'Submit' }).click();
-        await expect(page.locator('body')).toContainText(
-            'Field report updated, redirecting...',
-        );
+        // Wait for redirection to field reports listing page
+        await page.waitForURL(/\/field-reports\/\d+/);
         // Title Assertion
         await expect(page.locator('h1')).toContainText(
             `${newtitle} - ${title}`,

packages/e2e-tests/tests/loginLogout.spec.ts

@@ -3,7 +3,7 @@ import { login } from '#utils/auth';
 test('should login', async ({ page }) => {
     await login(
         page,
-        process.env.PLAYWRIGHT_USER_NAME,
+        process.env.PLAYWRIGHT_USER_EMAIL,
         process.env.PLAYWRIGHT_USER_PASSWORD,
     );
     await page.waitForURL('/');
@@ -15,13 +15,12 @@ test('should login', async ({ page }) => {
 test('should logout', async ({ page }) => {
     await login(
         page,
-        process.env.PLAYWRIGHT_USER_NAME,
+        process.env.PLAYWRIGHT_USER_EMAIL,
         process.env.PLAYWRIGHT_USER_PASSWORD,
     );
     await page.waitForURL('/');
-    await page
-        .getByRole('button', { name: process.env.PLAYWRIGHT_USER_NAME })
-        .click();
+    const name = process.env.PLAYWRIGHT_USER_EMAIL.match(/^[^@]+(?=@)/);
+    await page.getByRole('button', { name: name[0] }).click();
     await page.getByRole('button', { name: 'Logout' }).click();
     await page.getByRole('button', { name: 'Ok' }).click();
     await expect(page.getByRole('navigation')).toContainText('Login');