✅(e2e) add threshold in regression test

When comparing PDF screenshots, we can have some
minor differences due to the different environments
(OS, fonts, etc.).
To avoid false positives in our regression
tests, we can set a threshold for the number of
different pixels allowed before considering the
test as failed.
If the test fails we will now report the PDF
and the differences to identify quickly
what are the regressions.

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -1,4 +1,7 @@
-import { Locator, Page, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+import { Locator, Page, TestInfo, expect } from '@playwright/test';
 
 export type BrowserName = 'chromium' | 'firefox' | 'webkit';
 export const BROWSERS: BrowserName[] = ['chromium', 'webkit', 'firefox'];
@@ -388,3 +391,30 @@ export const clickInGridMenu = async (
     .click();
   await page.getByRole('menuitem', { name: textButton }).click();
 };
+
+export const writeReport = async (
+  testInfo: TestInfo,
+  filename: string,
+  attachName: string,
+  buffer: Buffer,
+  contentType: string,
+) => {
+  const REPORT_DIRNAME = 'extra-report';
+  const REPORT_NAME = 'test-results';
+  const outDir = testInfo
+    ? path.join(testInfo.outputDir, REPORT_DIRNAME, path.parse(filename).name)
+    : path.join(
+        process.cwd(),
+        REPORT_NAME,
+        REPORT_DIRNAME,
+        path.parse(filename).name,
+      );
+
+  fs.mkdirSync(outDir, { recursive: true });
+  const pathToFile = path.join(outDir, filename);
+  fs.writeFileSync(pathToFile, buffer);
+  await testInfo.attach(attachName, {
+    path: pathToFile,
+    contentType: contentType,
+  });
+};