build: stabilize image loading for visual regression tests (#3023)

src/elements/core/testing/wait-for-image-ready.ts

@@ -1,20 +1,41 @@
 import type { SbbImageElement } from '../../image.js';
+import { isSafari } from '../dom.js';
 
 export async function waitForImageReady(
   element: HTMLImageElement | SbbImageElement,
   timeoutInMilliseconds = 2 * 1000,
 ): Promise<void> {
+  const imgElement =
+    element.localName === 'sbb-image'
+      ? (element.shadowRoot?.querySelector<HTMLImageElement>('.sbb-image__img') ?? null)
+      : (element as HTMLImageElement);
+
+  if (!imgElement) {
+    throw new Error('img tag not found');
+  }
+
   if (!element.complete) {
     await new Promise<void>((resolve, reject) => {
       const timeout = setTimeout(() => reject('image loading timeout'), timeoutInMilliseconds);
       element.addEventListener('load', () => {
         clearTimeout(timeout);
-        resolve();
+
+        imgElement.decode().then(() => {
+          if (isSafari && element.localName === 'sbb-image') {
+            // On a test page this is only happening once (first time an image is loaded). Therefore, the impact is very small.
+            setTimeout(resolve, 100);
+          } else {
+            resolve();
+          }
+        });
       });
+
       element.addEventListener('error', () => {
         clearTimeout(timeout);
         reject('image error');
       });
     });
+  } else {
+    await imgElement.decode();
   }
 }

src/elements/flip-card/flip-card-summary/flip-card-summary.visual.spec.ts

@@ -14,9 +14,7 @@ import '../../title.js';
 import '../../image.js';
 
 const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png');
-const imageBase64 = await loadAssetAsBase64(
-  import.meta.resolve('../../core/testing/assets/lucerne.png'),
-);
+const imageBase64 = await loadAssetAsBase64(imageUrl);
 
 const images = [
   {

src/elements/lead-container/lead-container.visual.spec.ts

@@ -17,9 +17,7 @@ import '../title.js';
 import './lead-container.js';
 
 const leadImageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
-const leadImageBase64 = await loadAssetAsBase64(
-  import.meta.resolve('../core/testing/assets/lucerne.png'),
-);
+const leadImageBase64 = await loadAssetAsBase64(leadImageUrl);
 
 describe(`sbb-lead-container`, () => {
   const wrapperStyles = { backgroundColor: `var(--sbb-color-milk)`, padding: '0' };

src/elements/teaser-product/teaser-product/teaser-product.visual.spec.ts

@@ -56,7 +56,7 @@ const template = ({
   <sbb-teaser-product ?negative=${negative} image-alignment=${imageAlignment || nothing} href="#">
     ${slottedImg
       ? html`<img slot="image" src=${imageBase64} alt="" />`
-      : html`<sbb-image slot="image" image-src=${imageUrl}></sbb-image>`}
+      : html`<sbb-image slot="image" image-src=${imageUrl} skip-lqip></sbb-image>`}
     ${content(longContent)} ${showFooter ? footer() : nothing}
   </sbb-teaser-product>
 `;
@@ -82,21 +82,17 @@ describe('sbb-teaser-product', () => {
             }
           });
         }
-
-        it(
-          `imageAlignment=before`,
-          visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              template({ imageAlignment: 'before', showFooter: true, slottedImg }),
-            );
-            await waitForImageReady(
-              setup.snapshotElement.querySelector(slottedImg ? 'img' : 'sbb-image')!,
-            );
-          }),
-        );
       });
     }
 
+    it(
+      `imageAlignment=before`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(template({ imageAlignment: 'before', showFooter: true }));
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
+
     it(
       'no footer',
       visualDiffDefault.with(async (setup) => {

tools/web-test-runner/container-playwright-browser-plugin.ts

@@ -29,13 +29,13 @@ export const startPlaywrightServerCommand = [
   `${port}:${port}`,
   '--rm',
   '--init',
-  '--add-host=host.containers.internal=host-gateway',
+  containerRuntime === 'docker' ? '--add-host=host.containers.internal=host-gateway' : undefined,
   '--workdir=/home/pwuser',
   '--entrypoint=/bin/sh',
   containerImage,
   `-c`,
   `npx -y playwright@${playwrightVersion} run-server --port ${port} --host 0.0.0.0`,
-];
+].filter(Boolean);
 
 // Reference: https://github.com/remcovaes/web-test-runner-vite-plugin
 export function containerPlaywrightBrowserPlugin(): TestRunnerPlugin {