feat: use shared authentication context in playwright

Author: samshara

packages/e2e-tests/.gitignore

@@ -3,3 +3,5 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+playwright/.auth

packages/e2e-tests/playwright.config.ts

@@ -33,14 +33,21 @@ export default defineConfig({
     /* Configure projects for major browsers */
     projects: process.env.CI
         ? [
+
+              {
+                  name: 'setup',
+                  testMatch: /.*\.setup\.ts/,
+              },
               {
                   name: 'chromium',
                   use: { ...devices['Desktop Chrome'] },
+                  dependencies: ['setup'],
               },
 
               {
                   name: 'firefox',
                   use: { ...devices['Desktop Firefox'] },
+                  dependencies: ['setup'],
               },
 
               // FIXME: tests not working in webkit
@@ -70,14 +77,20 @@ export default defineConfig({
           ]
         : [
               // NOTE: WebKit is only supported on Debian and Ubuntu in Playwright.
+              {
+                  name: 'setup',
+                  testMatch: /.*\.setup\.ts/,
+              },
               {
                   name: 'chromium',
                   use: { ...devices['Desktop Chrome'] },
+                  dependencies: ['setup'],
               },
 
               {
                   name: 'firefox',
                   use: { ...devices['Desktop Firefox'] },
+                  dependencies: ['setup'],
               },
           ],
 

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

@@ -0,0 +1,12 @@
+import { test as setup } from '@playwright/test';
+import { login } from '#utils/auth';
+const authFile = 'playwright/.auth/user.json';
+
+setup('authenticate', async ({ page }) => {
+    if (process.env.PLAYWRIGHT_USER_NAME && process.env.PLAYWRIGHT_USER_PASSWORD) {
+        await login(page, process.env.PLAYWRIGHT_USER_NAME, process.env.PLAYWRIGHT_USER_PASSWORD);
+    }
+
+    // End of authentication steps.
+    await page.context().storageState({ path: authFile });
+});

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

@@ -1,19 +1,11 @@
 import { expect, test } from '@playwright/test';
-import { login } from '../../utils/auth';
-import { formatNumber } from '../../utils/common';
+import { formatNumber } from '#utils/common';
 import fixtureData from './fieldReport.json';
 
-test.describe('test suite for Field report', async () => {
-    test.beforeEach('login credentials', async ({ page }) => {
-        await login(
-            page,
-            process.env.PLAYWRIGHT_APP_BASE_URL,
-            process.env.PLAYWRIGHT_USER_NAME,
-            process.env.PLAYWRIGHT_USER_PASSWORD,
-        );
-    });
+test.use({ storageState: 'playwright/.auth/user.json' });
 
-    test('Field report for Event', async ({ page }) => {
+test.describe('Field Report',  () => {
+    test('should create a new event type field report', async ({ page }) => {
         const {
             formName,
             country,
@@ -84,6 +76,7 @@ test.describe('test suite for Field report', async () => {
             visibiltyOptTwo,
         } = fixtureData;
 
+        await page.goto('/');
         await page.getByRole('button', { name: 'Create a Report' }).click();
         await page.getByRole('link', { name: 'New Field Report' }).click();
         await expect(page.locator('h1')).toContainText(formName);

packages/e2e-tests/tests/field_report/fieldReport.json renamed to packages/e2e-tests/tests/field-report/fieldReport.json

@@ -1,31 +1,23 @@
 import { expect, test } from '@playwright/test';
-import { login } from '../utils/auth';
+import { login } from '#utils/auth';
 
-test('Login', async ({ page }) => {
+test('should login', async ({ page }) => {
     await login(
         page,
-        process.env.PLAYWRIGHT_APP_BASE_URL,
         process.env.PLAYWRIGHT_USER_NAME,
         process.env.PLAYWRIGHT_USER_PASSWORD,
     );
-    await expect(page.getByRole('navigation')).toContainText(
-        process.env.PLAYWRIGHT_USER_NAME,
-    );
-    await page
-        .getByRole('button', { name: process.env.PLAYWRIGHT_USER_NAME })
-        .click();
+    await page.waitForURL('/');
+    await expect(page.getByRole('button', { name: 'Create a Report' })).toBeVisible();
 });
 
-test('logout', async ({ page }) => {
+test('should logout', async ({ page }) => {
     await login(
         page,
-        process.env.PLAYWRIGHT_APP_BASE_URL,
         process.env.PLAYWRIGHT_USER_NAME,
         process.env.PLAYWRIGHT_USER_PASSWORD,
     );
-    await expect(page.getByRole('navigation')).toContainText(
-        process.env.PLAYWRIGHT_USER_NAME,
-    );
+    await page.waitForURL('/');
     await page
         .getByRole('button', { name: process.env.PLAYWRIGHT_USER_NAME })
         .click();

packages/e2e-tests/tests/field_report/fieldReport.spec.ts renamed to packages/e2e-tests/tests/field-report/fieldReport.spec.ts

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "#utils/*": ["./utils/*"],
+        },
+        "esModuleInterop": true,
+        "resolveJsonModule": true,
+    },
+    "include": ["tests"]
+}

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

@@ -1,7 +1,17 @@
-export async function login(page, baseurl, username, password) {
-    await page.goto(baseurl);
-    await page.getByRole('link', { name: 'Login' }).click();
+import { type Page, expect } from '@playwright/test';
+export async function login(page: Page, username: string, password: string) {
+    await page.goto('/login');
+
+    //FIXME: page.fill is discouraged. We should use locator based fill.
+    // @ifrc/go-ui should be updated to support locators
     await page.fill('input[name="username"]', username);
     await page.fill('input[name="password"]', password);
+
     await page.getByRole('button', { name: 'Login' }).click();
-}
+    // Wait until the page receives the cookies.
+    // Sometimes login flow sets cookies in the process of several redirects.
+    // Wait for the final URL to ensure that the cookies are actually set.
+    await page.waitForURL('/');
+    // Alternatively, you can wait until the page reaches a state where all cookies are set.
+    await expect(page.getByRole('button', { name: 'Create a Report' })).toBeVisible();
+}