✅(e2e) e2e instances compatibility

We want to be able to run our e2e tests on
any instance of Docs, to do so we need to make
some adjustments to our tests and configuration.
We will use environment variables to configure
the tests.

Author: AntoLC

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 - 🔧(backend) settings CONVERSION_UPLOAD_ENABLED to control usage of docspec
 - 🥚(frontend) add easter egg on doc emoji creation #2155
+- ✅ E2E - Any instance friendly #2142
 
 ### Changed
 

src/frontend/apps/e2e/.env

@@ -0,0 +1,22 @@
+PORT=3000
+BASE_URL=http://localhost:3000
+BASE_API_URL=http://localhost:8071/api/v1.0
+COLLABORATION_WS_URL=ws://localhost:4444/collaboration/ws/
+COLLABORATION_WS_NOT_CONNECTED_READY_ONLY=true
+MEDIA_BASE_URL=http://localhost:8083
+CUSTOM_SIGN_IN=false
+IS_INSTANCE=false
+SIGN_IN_EL_LOGIN_PAGE='.login-pf #kc-header-wrapper'
+SIGN_IN_EL_TRIGGER=Start Writing
+FIRST_NAME=E2E
+SIGN_IN_USERNAME_CHROMIUM=user.test@chromium.test
+USERNAME_CHROMIUM=E2E Chromium
+SIGN_IN_USERNAME_WEBKIT=user.test@webkit.test
+USERNAME_WEBKIT=E2E Webkit
+SIGN_IN_USERNAME_FIREFOX=user.test@firefox.test
+USERNAME_FIREFOX=E2E Firefox
+# To test server to server API calls
+SERVER_TO_SERVER_API_TOKENS='server-api-token'
+SUB_CHROMIUM=user.test@chromium.test
+SUB_WEBKIT=user.test@webkit.test
+SUB_FIREFOX=user.test@firefox.test

src/frontend/apps/e2e/.env.example

@@ -0,0 +1,29 @@
+PORT=3000
+BASE_URL=http://localhost:3000
+BASE_API_URL=http://localhost:8071/api/v1.0
+COLLABORATION_WS_URL=ws://localhost:4444/collaboration/ws/
+COLLABORATION_WS_NOT_CONNECTED_READY_ONLY=true
+MEDIA_BASE_URL=http://localhost:8083
+IS_INSTANCE=false
+CUSTOM_SIGN_IN=false
+SIGN_IN_EL_LOGIN_PAGE='.login-pf #kc-header-wrapper'
+SIGN_IN_EL_TRIGGER=Start Writing
+FIRST_NAME=E2E
+SIGN_IN_USERNAME_CHROMIUM=user.test@chromium.test
+USERNAME_CHROMIUM=E2E Chromium
+SIGN_IN_USERNAME_WEBKIT=user.test@webkit.test
+USERNAME_WEBKIT=E2E Webkit
+SIGN_IN_USERNAME_FIREFOX=user.test@firefox.test
+USERNAME_FIREFOX=E2E Firefox
+# Used only on instance with custom sign in
+SIGN_IN_EL_USERNAME_INPUT=
+SIGN_IN_EL_USERNAME_VALIDATION=
+SIGN_IN_EL_PASSWORD_INPUT=
+SIGN_IN_PASSWORD_CHROMIUM=
+SIGN_IN_PASSWORD_WEBKIT=
+SIGN_IN_PASSWORD_FIREFOX=
+# To test server to server API calls
+SERVER_TO_SERVER_API_TOKENS='server-api-token'
+SUB_CHROMIUM=user.test@chromium.test
+SUB_WEBKIT=user.test@webkit.test
+SUB_FIREFOX=user.test@firefox.test

src/frontend/apps/e2e/.gitignore

@@ -5,3 +5,4 @@ blob-report/
 playwright/.auth/
 playwright/.cache/
 screenshots/
+.env.local

src/frontend/apps/e2e/__tests__/app-impress/auth.setup.ts

@@ -1,6 +1,6 @@
 import { FullConfig, FullProject, chromium, expect } from '@playwright/test';
 
-import { keyCloakSignIn } from './utils-common';
+import { SignIn } from './utils-signin';
 
 const saveStorageState = async (
   browserConfig: FullProject<unknown, unknown>,
@@ -22,7 +22,7 @@ const saveStorageState = async (
     await page.content();
     await expect(page.getByText('Docs').first()).toBeVisible();
 
-    await keyCloakSignIn(page, browserName);
+    await SignIn(page, browserName);
 
     await expect(
       page.locator('header').first().getByRole('button', {

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -5,23 +5,25 @@ import { expect, test } from '@playwright/test';
 import { CONFIG, createDoc, overrideConfig } from './utils-common';
 
 test.describe('Config', () => {
-  test('it checks that sentry is trying to init from config endpoint', async ({
-    page,
-  }) => {
-    await overrideConfig(page, {
-      SENTRY_DSN: 'https://sentry.io/123',
+  if (process.env.IS_INSTANCE !== 'true') {
+    test('it checks that sentry is trying to init from config endpoint', async ({
+      page,
+    }) => {
+      await overrideConfig(page, {
+        SENTRY_DSN: 'https://sentry.io/123',
+      });
+
+      const invalidMsg = 'Invalid Sentry Dsn: https://sentry.io/123';
+      const consoleMessage = page.waitForEvent('console', {
+        timeout: 5000,
+        predicate: (msg) => msg.text().includes(invalidMsg),
+      });
+
+      await page.goto('/');
+
+      expect((await consoleMessage).text()).toContain(invalidMsg);
     });
-
-    const invalidMsg = 'Invalid Sentry Dsn: https://sentry.io/123';
-    const consoleMessage = page.waitForEvent('console', {
-      timeout: 5000,
-      predicate: (msg) => msg.text().includes(invalidMsg),
-    });
-
-    await page.goto('/');
-
-    expect((await consoleMessage).text()).toContain(invalidMsg);
-  });
+  }
 
   test('it checks that media server is configured from config endpoint', async ({
     page,
@@ -55,7 +57,7 @@ test.describe('Config', () => {
 
     // Check src of image
     expect(await image.getAttribute('src')).toMatch(
-      /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/,
+      new RegExp(`${process.env.MEDIA_BASE_URL}/media/.*?/attachments/.*?.png`),
     );
   });
 
@@ -71,9 +73,9 @@ test.describe('Config', () => {
       .click();
 
     const webSocket = await page.waitForEvent('websocket', (webSocket) => {
-      return webSocket.url().includes('ws://localhost:4444/collaboration/ws/');
+      return webSocket.url().includes(`${process.env.COLLABORATION_WS_URL}`);
     });
-    expect(webSocket.url()).toContain('ws://localhost:4444/collaboration/ws/');
+    expect(webSocket.url()).toContain(`${process.env.COLLABORATION_WS_URL}`);
   });
 
   test('it checks that Crisp is trying to init from config endpoint', async ({
@@ -85,9 +87,8 @@ test.describe('Config', () => {
 
     await page.goto('/');
 
-    await expect(
-      page.locator('#crisp-chatbox').getByText('Invalid website'),
-    ).toBeVisible();
+    const crispElement = page.locator('#crisp-chatbox');
+    await expect(crispElement).toBeAttached();
   });
 
   test('it checks FRONTEND_CSS_URL config', async ({ page }) => {
@@ -118,20 +119,22 @@ test.describe('Config', () => {
     ).toBeAttached();
   });
 
-  test('it checks the config api is called', async ({ page }) => {
-    const responsePromise = page.waitForResponse(
-      (response) =>
-        response.url().includes('/config/') && response.status() === 200,
-    );
+  if (process.env.IS_INSTANCE !== 'true') {
+    test('it checks the config api is called', async ({ page }) => {
+      const responsePromise = page.waitForResponse(
+        (response) =>
+          response.url().includes('/config/') && response.status() === 200,
+      );
 
-    await page.goto('/');
+      await page.goto('/');
 
-    const response = await responsePromise;
-    expect(response.ok()).toBeTruthy();
+      const response = await responsePromise;
+      expect(response.ok()).toBeTruthy();
 
-    const json = (await response.json()) as typeof CONFIG;
-    expect(json).toStrictEqual(CONFIG);
-  });
+      const json = (await response.json()) as typeof CONFIG;
+      expect(json).toStrictEqual(CONFIG);
+    });
+  }
 });
 
 test.describe('Config: Not logged', () => {