chore: improve playwright test performance slightly by avoiding base6…

…4 conversion (#2064) improve playwright test performance slightly by avoiding base64 conversion
SchwarzIT · Dec 4, 2024 · 23cc217 · 23cc217
1 parent a2cffa8
commit 23cc217
Showing 1 changed file with 30 additions and 13 deletions.
diff --git a/packages/sit-onyx/src/playwright/screenshots.tsx b/packages/sit-onyx/src/playwright/screenshots.tsx
@@ -58,7 +58,7 @@ type TestArgs = Parameters<Parameters<typeof test>[2]>[0];
 export const executeMatrixScreenshotTest = async <TColumn extends string, TRow extends string>(
   options: MatrixScreenshotTestOptions<TColumn, TRow>,
 ) => {
-  test(`${options.name}`, async ({ mount, page, browserName, makeAxeBuilder }) => {
+  test(`${options.name}`, async ({ mount, page, browserName, makeAxeBuilder, context }) => {
     // limit the max timeout per permutation
     const timeoutPerScreenshot = 25 * 1000;
     test.setTimeout(options.columns.length * options.rows.length * timeoutPerScreenshot);
@@ -93,18 +93,14 @@ export const executeMatrixScreenshotTest = async <TColumn extends string, TRow e
 
       const id = `${row}-${column}`;
 
-      return (
-        <img
-          width={box?.width}
-          height={box?.height}
-          style={{ gridArea: id }}
-          src={`data:image/png;base64,${Buffer.from(screenshot).toString("base64")}`}
-          alt={id}
-        />
-      );
+      return {
+        box,
+        id,
+        screenshot,
+      };
     };
 
-    const screenshots: JSX.Element[] = [];
+    const screenshotMap = new Map<string, Awaited<ReturnType<typeof getScreenshot>>>();
 
     for (const row of options.rows) {
       for (const column of options.columns) {
@@ -122,11 +118,32 @@ export const executeMatrixScreenshotTest = async <TColumn extends string, TRow e
           </div>
         );
 
-        const screenshot = await getScreenshot(wrappedElement, column, row);
-        screenshots.push(screenshot);
+        const data = await getScreenshot(wrappedElement, column, row);
+        screenshotMap.set(data.id, data);
       }
     }
 
+    await context.route("/_playwright-matrix-screenshot*", (route, request) => {
+      const url = new URL(request.url());
+      const wantedId = url.searchParams.get("id") ?? "";
+
+      return route.fulfill({
+        status: 200,
+        contentType: "image/png",
+        body: screenshotMap.get(wantedId)?.screenshot,
+      });
+    });
+
+    const screenshots = Array.from(screenshotMap.values()).map(({ box, id }) => (
+      <img
+        width={box?.width}
+        height={box?.height}
+        style={{ gridArea: id }}
+        src={`/_playwright-matrix-screenshot?id=${id}`}
+        alt={id}
+      />
+    ));
+
     const component = await mount(
       <ScreenshotMatrix
         columns={options.columns}