[Tech] Corrige les utilitaires des tests E2E Puppeteer (#3529)

## Linked issues None ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Aug 13, 2024 · 5355867 · 5355867
2 parents 27ce760 + 3e7d349
commit 5355867
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 32 deletions.
diff --git a/frontend/puppeteer/e2e/missions.spec.ts b/frontend/puppeteer/e2e/missions.spec.ts
@@ -1,8 +1,8 @@
-import { beforeEach, describe, expect, it } from '@jest/globals'
+import { afterEach, beforeEach, describe, expect, it } from '@jest/globals'
 import { platform } from 'os'
 import { Page } from 'puppeteer'
 
-import { getFirstTab, getInputContent, listenToConsole, wait, waitForSelectorWithText } from './utils'
+import { consoleListener, getFirstTab, getInputContent, wait, waitForSelectorWithText } from './utils'
 // /!\ Do not shorten imports, it will fail the run
 import { SeafrontGroup } from '../../src/constants/seafront'
 
@@ -21,10 +21,10 @@ let pageB: Page
 describe('Missions Form', () => {
   beforeEach(async () => {
     pageA = await getFirstTab(browsers[0])
-    listenToConsole(pageA, 1)
+    consoleListener.start(pageA, 1)
 
     pageB = await getFirstTab(browsers[1])
-    listenToConsole(pageB, 2)
+    consoleListener.start(pageB, 2)
 
     /* eslint-disable no-restricted-syntax */
     for (const page of [pageA, pageB]) {
@@ -49,6 +49,10 @@ describe('Missions Form', () => {
     }
   }, 50000)
 
+  afterEach(async () => {
+    consoleListener.stop()
+  })
+
   it(
     'Two windows must be synchronized on form update',
     async () => {

diff --git a/frontend/puppeteer/e2e/utils.ts b/frontend/puppeteer/e2e/utils.ts
@@ -1,34 +1,51 @@
 import assert from 'assert'
 import { Page, Browser, type FrameWaitForFunctionOptions } from 'puppeteer'
 
-export function listenToConsole(page: Page, index: number) {
-  page
-    .on('console', async message => {
-      // Ignore SmallChat
-      if (message.text().includes('static.small.chat')) {
-        return
-      }
-
-      const messageType = message.type().substr(0, 3).toUpperCase()
-      console.log(`[Page ${index}] ${messageType}: ${message.text()}`)
-
-      if (messageType === 'ERR') {
-        console.log(message.args(), message.stackTrace())
-        if (message.text().includes('/sse')) {
-          // If the SSE connection fails, the browser will restart it, it is not an application error
-          return
-        }
-
-        throw new Error(message.text())
-      }
-    })
-    .on('response', async response => {
-      if (response.url().includes('/bff/') || response.url().includes('/api/')) {
-        console.log(`[Page ${index}] HTTP ${response.request().method()} ${response.status()}: ${response.url()}`)
-      }
-    })
+class ConsoleListener {
+  #isStopped = false
+
+  start(page: Page, index: number) {
+    page
+      .on('console', message => {
+        setImmediate(async () => {
+          if (this.#isStopped) {
+            return
+          }
+
+          const messageType = message.type().substr(0, 3).toUpperCase()
+          console.log(`[Page ${index}] ${messageType}: ${message.text()}`)
+
+          if (messageType === 'ERR') {
+            console.log(message.args(), message.stackTrace())
+            if (message.text().includes('/sse')) {
+              // If the SSE connection fails, the browser will restart it, it is not an application error
+              return
+            }
+
+            throw new Error(message.text())
+          }
+        })
+      })
+      .on('response', async response => {
+        setImmediate(async () => {
+          if (this.#isStopped) {
+            return
+          }
+
+          if (response.url().includes('/bff/') || response.url().includes('/api/')) {
+            console.log(`[Page ${index}] HTTP ${response.request().method()} ${response.status()}: ${response.url()}`)
+          }
+        })
+      })
+  }
+
+  stop() {
+    this.#isStopped = true
+  }
 }
 
+export const consoleListener = new ConsoleListener()
+
 export async function assertContains(page: Page, selector: string, text: string) {
   // TODO Remove ts-ignore when TS version is 4.9.3:
   // @ts-ignore: https://github.com/puppeteer/puppeteer/issues/9369

diff --git a/frontend/puppeteer/setup.ts b/frontend/puppeteer/setup.ts
@@ -3,12 +3,13 @@ import os from 'os'
 import path from 'path'
 import puppeteer from 'puppeteer'
 
+const IS_HEADLESS = process.env.IS_HEADLESS === 'true'
 const TEMP_DIRECTORY = path.join(os.tmpdir(), 'jest_puppeteer_global_setup')
 const NUMBER_OF_BROWSERS = 2
 const WIDTH = 1020
 const HEIGHT = 880
 
-console.log(`Running in ${process.env.CI ? 'headless' : 'browser'} mode.`)
+console.log(`Running in ${IS_HEADLESS ? 'headless' : 'browser'} mode.`)
 
 export default async () => {
   const browsers = []
@@ -24,7 +25,8 @@ export default async () => {
         '--enable-features=ExperimentalJavaScript'
       ],
       defaultViewport: null,
-      headless: process.env.IS_HEADLESS === 'true',
+      devtools: !IS_HEADLESS,
+      headless: IS_HEADLESS,
       product: 'firefox'
     })