Merge branch 'main' of https://github.com/sbb-design-systems/lyne-com…

…ponents into fix(overlay)-padding-top * 'main' of https://github.com/sbb-design-systems/lyne-components: chore(deps): update dependency playwright to v1.46.1 (#2972)
sbb-design-systems · Aug 26, 2024 · a0db8c5 · a0db8c5
2 parents 3982446 + a0d1c46
commit a0db8c5
Show file tree

Hide file tree

Showing 16 changed files with 55 additions and 49 deletions.
diff --git a/.github/workflows/continuous-integration.yml b/.github/workflows/continuous-integration.yml
@@ -50,7 +50,6 @@ jobs:
           node-version-file: .nvmrc
           cache: yarn
       - run: yarn install --frozen-lockfile --non-interactive
-
       - name: Install browser dependencies
         run: yarn playwright install-deps
       - name: Run tests

diff --git a/package.json b/package.json
@@ -130,7 +130,7 @@
     "lit-analyzer": "2.0.3",
     "madge": "8.0.0",
     "npm-run-all2": "6.2.2",
-    "playwright": "1.44.1",
+    "playwright": "1.46.1",
     "postcss": "8.4.41",
     "prettier": "3.3.3",
     "react": "18.3.1",
@@ -156,7 +156,7 @@
     "@web/dev-server-core": "0.7.1",
     "jackspeak": "2.1.1",
     "lit": "3.2.0",
-    "playwright": "1.44.1",
+    "playwright": "1.46.1",
     "prettier": "3.3.3"
   },
   "prettier": {

diff --git a/src/elements/core/dom/platform.ts b/src/elements/core/dom/platform.ts
@@ -60,12 +60,9 @@ export const isAndroid = !isServer && /android/i.test(navigator.userAgent) && !i
 export const isSafari = !isServer && /safari/i.test(navigator.userAgent) && isWebkit;
 
 /**
- * Note: `userAgentData` is still experimental. If possible, avoid to use it.
- * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
+ * We just check for the blink engine.
  */
-export const isChromium =
-  !isServer &&
-  (navigator as any).userAgentData?.brands?.some((data: any) => data.brand == 'Chromium');
+export const isChromium = isBlink;
 
 /** Whether the application is being rendered in a Next.js environment. */
 export const isNextjs = (): boolean => !!(globalThis as { next?: object }).next;
diff --git a/...lements/flip-card/flip-card-summary/__snapshots__/flip-card-summary.snapshot.spec.snap.js b/...lements/flip-card/flip-card-summary/__snapshots__/flip-card-summary.snapshot.spec.snap.js
@@ -33,7 +33,6 @@ snapshots["sbb-flip-card-summary DOM"] =
   <sbb-image
     aspect-ratio="16-9"
     border-radius="default"
-    image-src="http://localhost:8000/src/elements/core/testing/assets/placeholder-image.png"
     slot="image"
   >
   </sbb-image>

diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.snapshot.spec.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.snapshot.spec.ts
@@ -24,7 +24,7 @@ describe(`sbb-flip-card-summary`, () => {
   });
 
   it('DOM', async () => {
-    await expect(element).dom.to.be.equalSnapshot();
+    await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['image-src'] });
   });
 
   it('Shadow DOM', async () => {

diff --git a/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js b/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js
@@ -42,7 +42,6 @@ snapshots["sbb-flip-card DOM"] =
     <sbb-image
       aspect-ratio="16-9"
       border-radius="default"
-      image-src="http://localhost:8000/src/elements/core/testing/assets/placeholder-image.png"
       slot="image"
     >
     </sbb-image>

diff --git a/src/elements/flip-card/flip-card/flip-card.snapshot.spec.ts b/src/elements/flip-card/flip-card/flip-card.snapshot.spec.ts
@@ -35,7 +35,7 @@ describe(`sbb-flip-card`, () => {
   });
 
   it('DOM', async () => {
-    await expect(element).dom.to.be.equalSnapshot();
+    await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['image-src'] });
   });
 
   it('Shadow DOM', async () => {

diff --git a/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js b/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js
@@ -91,14 +91,7 @@ snapshots["sbb-option selected active Firefox"] =
 `<p>
   {
   "role": "document",
-  "name": "",
-  "children": [
-    {
-      "role": "option",
-      "name": "",
-      "selected": true
-    }
-  ]
+  "name": ""
 }
 </p>
 `;
@@ -108,14 +101,7 @@ snapshots["sbb-option disabled Firefox"] =
 `<p>
   {
   "role": "document",
-  "name": "",
-  "children": [
-    {
-      "role": "option",
-      "name": "",
-      "disabled": true
-    }
-  ]
+  "name": ""
 }
 </p>
 `;

diff --git a/src/elements/stepper/step-label/__snapshots__/step-label.snapshot.spec.snap.js b/src/elements/stepper/step-label/__snapshots__/step-label.snapshot.spec.snap.js
@@ -121,8 +121,8 @@ snapshots["sbb-step-label A11y tree Firefox"] =
   "name": "",
   "children": [
     {
-      "role": "tab",
-      "name": "Label"
+      "role": "text",
+      "name": ""
     }
   ]
 }

diff --git a/...r-product/teaser-product-static/__snapshots__/teaser-product-static.snapshot.spec.snap.js b/...r-product/teaser-product-static/__snapshots__/teaser-product-static.snapshot.spec.snap.js
@@ -11,7 +11,6 @@ snapshots["sbb-teaser-product-static renders DOM"] =
   <sbb-image
     aspect-ratio="16-9"
     border-radius="default"
-    image-src="http://localhost:8000/src/elements/core/testing/assets/placeholder-image.png"
     slot="image"
   >
   </sbb-image>

diff --git a/src/elements/teaser-product/teaser-product-static/teaser-product-static.snapshot.spec.ts b/src/elements/teaser-product/teaser-product-static/teaser-product-static.snapshot.spec.ts
@@ -24,7 +24,7 @@ describe(`sbb-teaser-product-static`, () => {
     });
 
     it('DOM', async () => {
-      await expect(element).dom.to.be.equalSnapshot();
+      await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['image-src'] });
     });
 
     it('Shadow DOM', async () => {

diff --git a/...elements/teaser-product/teaser-product/__snapshots__/teaser-product.snapshot.spec.snap.js b/...elements/teaser-product/teaser-product/__snapshots__/teaser-product.snapshot.spec.snap.js
@@ -13,7 +13,6 @@ snapshots["sbb-teaser-product renders DOM"] =
   <sbb-image
     aspect-ratio="16-9"
     border-radius="default"
-    image-src="http://localhost:8000/src/elements/core/testing/assets/placeholder-image.png"
     slot="image"
   >
   </sbb-image>

diff --git a/src/elements/teaser-product/teaser-product/teaser-product.snapshot.spec.ts b/src/elements/teaser-product/teaser-product/teaser-product.snapshot.spec.ts
@@ -24,7 +24,7 @@ describe(`sbb-teaser-product`, () => {
     });
 
     it('DOM', async () => {
-      await expect(element).dom.to.be.equalSnapshot();
+      await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['image-src'] });
     });
 
     it('Shadow DOM', async () => {

diff --git a/tools/web-test-runner/container-playwright-browser-plugin.ts b/tools/web-test-runner/container-playwright-browser-plugin.ts
@@ -19,17 +19,20 @@ const pkgJson = JSON.parse(readFileSync(new URL('../../package.json', import.met
 const playwrightVersion = pkgJson.devDependencies.playwright;
 const port = 3000;
 export const playwrightWebsocketAddress = `ws://localhost:${port}`;
+const containerRuntime = containerCmd ?? 'docker';
+const containerImage = `mcr.microsoft.com/playwright:v${playwrightVersion}`;
 // See https://github.com/microsoft/playwright/issues/26482
 export const startPlaywrightServerCommand = [
-  containerCmd ?? 'docker',
+  containerRuntime,
   'run',
   '-p',
   `${port}:${port}`,
   '--rm',
   '--init',
+  '--add-host=host.containers.internal=host-gateway',
   '--workdir=/home/pwuser',
   '--entrypoint=/bin/sh',
-  `mcr.microsoft.com/playwright:v${playwrightVersion}-jammy`,
+  containerImage,
   `-c`,
   `npx -y playwright@${playwrightVersion} run-server --port ${port} --host 0.0.0.0`,
 ];
@@ -47,9 +50,19 @@ export function containerPlaywrightBrowserPlugin(): TestRunnerPlugin {
     name: 'remote-playwright-browser-plugin',
 
     async serverStart({ logger }) {
-      logger.log('Starting playwright browsers in a container');
+      logger.log(
+        `Starting playwright browsers in a container (${startPlaywrightServerCommand[0]})`,
+      );
       abortController = new AbortController();
+
+      await new Promise<void>((resolve, reject) => {
+        console.log('Pulling playwright container image if necessary');
+        spawn(containerRuntime, ['pull', containerImage], {
+          signal: abortController.signal,
+        }).on('close', (code) => (code ? reject(code) : resolve()));
+      });
       await new Promise<void>((resolve, reject) => {
+        console.log('Starting playwright container');
         let id: NodeJS.Timeout | undefined = undefined;
         spawn(startPlaywrightServerCommand[0], startPlaywrightServerCommand.slice(1), {
           signal: abortController.signal,
@@ -72,7 +85,7 @@ export function containerPlaywrightBrowserPlugin(): TestRunnerPlugin {
             { signal: timeout },
           );
         }, 1000);
-        AbortSignal.timeout(60000).addEventListener('abort', () => {
+        AbortSignal.timeout(120000).addEventListener('abort', () => {
           clearInterval(id);
           reject('Failed to start container');
         });

diff --git a/web-test-runner.config.ts b/web-test-runner.config.ts
@@ -67,6 +67,21 @@ const browsers =
       (['chromium', 'firefox', 'webkit'] as const).map((product) =>
         playwrightLauncher({
           product,
+          createPage: ({ context }) =>
+            context.newPage().then((page) => {
+              page.on('console', (message) => {
+                if (message.type() === 'error' && !message.location().url.includes('dummy.png')) {
+                  console.error(`CONSOLE: ${product} ${page.url()}`);
+                  console.error(message.location());
+                  console.error(message.text());
+                }
+              });
+              page.on('pageerror', (err) => {
+                console.error(`PAGEERROR: ${product} ${page.url()}`);
+                console.error(err);
+              });
+              return page;
+            }),
           ...concurrency,
           ...launchOptions,
         }),
@@ -105,9 +120,9 @@ const testRunnerHtml = (
     />`,
     )
     .join('')}
-    <link rel="preload" as="script" crossorigin="anonymous" href="/src/elements/core/testing/test-setup.ts">
+    <link rel="modulepreload" href="/src/elements/core/testing/test-setup.ts" />
     <style type="text/css">${renderStyles()}</style>
-    <script>
+    <script type="module">
       globalThis.testEnv = '${cliArgs.debug ? 'debug' : ''}';
       globalThis.testGroup = '${cliArgs.ssr ? 'ssr' : (group?.name ?? 'default')}';
       globalThis.testRunScript = '${testFramework}';

diff --git a/yarn.lock b/yarn.lock
@@ -8514,17 +8514,17 @@ pkg-types@^1.0.3, pkg-types@^1.1.1, pkg-types@^1.2.0:
     mlly "^1.7.1"
     pathe "^1.1.2"
 
-playwright-core@1.44.1:
-  version "1.44.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.44.1.tgz#53ec975503b763af6fc1a7aa995f34bc09ff447c"
-  integrity sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==
+playwright-core@1.46.1:
+  version "1.46.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.46.1.tgz#28f3ab35312135dda75b0c92a3e5c0e7edb9cc8b"
+  integrity sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==
 
-playwright@1.44.1, playwright@^1.22.2:
-  version "1.44.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.44.1.tgz#5634369d777111c1eea9180430b7a184028e7892"
-  integrity sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==
+playwright@1.46.1, playwright@^1.22.2:
+  version "1.46.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.46.1.tgz#ea562bc48373648e10420a10c16842f0b227c218"
+  integrity sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==
   dependencies:
-    playwright-core "1.44.1"
+    playwright-core "1.46.1"
   optionalDependencies:
     fsevents "2.3.2"