@element-hq/element-web-playwright-common 2.2.6 → 2.3.0

package/Dockerfile

@@ -6,6 +6,13 @@ WORKDIR /work
 # fonts-dejavu is needed for the same RTL rendering as on CI
 RUN apt-get update && apt-get -y install docker.io fonts-dejavu
 
+# Set up corepack
+RUN corepack enable
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+# Add environment variable so consumers can skip developer-centric scripts
+ENV PLAYWRIGHT_COMMON_DOCKER=1
+
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 
 ENTRYPOINT ["/docker-entrypoint.sh"]

package/lib/expect/axe.d.ts

@@ -1,5 +1,5 @@
 import { type ExpectMatcherState, type MatcherReturnType } from "@playwright/test";
-import type AxeBuilder from "@axe-core/playwright";
+import type { AxeBuilder } from "@axe-core/playwright";
 export type Expectations = {
     /**
      * Assert that the given AxeBuilder instance has no violations.

package/lib/expect/axe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axe.d.ts","sourceRoot":"","sources":["../../src/expect/axe.ts"],"names":[],"mappings":"AAQA,OAAO,EAA8B,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE/G,OAAO,KAAK,UAAU,MAAM,sBAAsB,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG;IACvB;;;OAGG;IACH,kBAAkB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,QAAQ,EAAE,UAAU,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACtG,CAAC;AAEF,eAAO,MAAM,MAAM,iDAgBjB,CAAC"}
+{"version":3,"file":"axe.d.ts","sourceRoot":"","sources":["../../src/expect/axe.ts"],"names":[],"mappings":"AAQA,OAAO,EAA8B,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE/G,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACvB;;;OAGG;IACH,kBAAkB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,QAAQ,EAAE,UAAU,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACtG,CAAC;AAEF,eAAO,MAAM,MAAM,iDAgBjB,CAAC"}

package/lib/fixtures/axe.d.ts

@@ -1,4 +1,4 @@
-import AxeBuilder from "@axe-core/playwright";
+import { AxeBuilder } from "@axe-core/playwright";
 export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
     /**
      * AxeBuilder instance for the current page

package/lib/fixtures/axe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axe.d.ts","sourceRoot":"","sources":["../../src/fixtures/axe.ts"],"names":[],"mappings":"AASA,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAI9C,eAAO,MAAM,IAAI;IACb;;OAEG;SACE,UAAU;wGAMjB,CAAC"}
+{"version":3,"file":"axe.d.ts","sourceRoot":"","sources":["../../src/fixtures/axe.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIlD,eAAO,MAAM,IAAI;IACb;;OAEG;SACE,UAAU;wGAMjB,CAAC"}

package/lib/fixtures/axe.js

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 import { test as base } from "@playwright/test";
-import AxeBuilder from "@axe-core/playwright";
+import { AxeBuilder } from "@axe-core/playwright";
 // This fixture is useful for simple component library tests that won't want any extra services like a homeserver, so we
 // explicitly avoid pulling anything more than playwright's base fixtures in.
 export const test = base.extend({

package/lib/index.d.ts

@@ -27,6 +27,16 @@ export interface TestFixtures {
     config: Partial<typeof CONFIG_JSON>;
     labsFlags: string[];
     disablePresence: boolean;
+    /**
+     * Whether the left panel should have its width fixed.
+     * This is done because the library that we use for rendering collapsible
+     * panels uses math to calculate the width which can sometimes leads to +/-1px
+     * difference. While this does not matter to the user, it can lead to screenshot
+     * tests failing.
+     * Defaults to true, should be set to false via {@link base.use} when you want to test the collapse
+     * behaviour.
+     */
+    lockLeftPanelWidth: boolean;
 }
 export declare const test: import("playwright/test").TestType<import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & {
     axe: import("@axe-core/playwright").AxeBuilder;

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,MAAM,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAK/E,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,mCAAmC,EAAE,MAAM,oBAAoB,CAAC;AAQzE,MAAM,WAAW,MAAO,SAAQ,UAAU;IACtC,qBAAqB,EAAE;QACnB,cAAc,CAAC,EAAE;YACb,QAAQ,EAAE,MAAM,CAAC;YACjB,WAAW,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,mBAAmB,CAAC,EAAE;YAClB,QAAQ,EAAE,MAAM,CAAC;YACjB,WAAW,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;KACL,CAAC;IACF,yBAAyB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpD,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAGD,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,MAAM,CAevC,CAAC;AAEF,MAAM,WAAW,YAAY;IACzB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC;IAEpC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI;;;;;;;kNASf,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,MAAM,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAK/E,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,mCAAmC,EAAE,MAAM,oBAAoB,CAAC;AAQzE,MAAM,WAAW,MAAO,SAAQ,UAAU;IACtC,qBAAqB,EAAE;QACnB,cAAc,CAAC,EAAE;YACb,QAAQ,EAAE,MAAM,CAAC;YACjB,WAAW,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,mBAAmB,CAAC,EAAE;YAClB,QAAQ,EAAE,MAAM,CAAC;YACjB,WAAW,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;KACL,CAAC;IACF,yBAAyB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpD,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAGD,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,MAAM,CAevC,CAAC;AAEF,MAAM,WAAW,YAAY;IACzB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC;IAEpC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,IAAI;;;;;;;kNAmBf,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/index.js

@@ -32,8 +32,18 @@ export const test = base.extend({
     config: async ({}, use) => use({}),
     labsFlags: async ({}, use) => use([]),
     disablePresence: async ({}, use) => use(false),
-    page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => {
+    lockLeftPanelWidth: true,
+    page: async ({ homeserver, context, page, config, labsFlags, disablePresence, lockLeftPanelWidth }, use) => {
         await routeConfigJson(context, homeserver.baseUrl, config, labsFlags, disablePresence);
+        if (lockLeftPanelWidth) {
+            await page.addStyleTag({
+                content: `
+                        #left-panel {
+                            flex: 0 0 369.6875px !important;
+                        }
+                `,
+            });
+        }
         await use(page);
     },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@element-hq/element-web-playwright-common",
     "type": "module",
-    "version": "2.2.6",
+    "version": "2.3.0",
     "license": "SEE LICENSE IN README.md",
     "repository": {
         "type": "git",
@@ -31,7 +31,7 @@
     "dependencies": {
         "@axe-core/playwright": "^4.10.1",
         "@testcontainers/postgresql": "^11.0.0",
-        "glob": "^13.0.1",
+        "glob": "^13.0.5",
         "lodash-es": "^4.17.23",
         "mailpit-api": "^1.2.0",
         "strip-ansi": "^7.1.0",

package/playwright-screenshots.sh

@@ -56,6 +56,7 @@ RUN_ARGS=(
 )
 
 DEFAULT_ARGS=(--grep @screenshot)
+LINK_MODULES=true
 
 # Some arguments to customise behaviour so the same script / image can be
 # re-used for other screenshot generation.
@@ -72,6 +73,11 @@ while [[ $# -gt 0 ]]; do
       RUN_ARGS+=(--mount "${mount_param}" -e YARN_INSTALL=true)
       shift
       ;;
+    # Disables the automatic detection & linking of node_modules which can clash with developer tooling e.g. pnpm-link
+    --no-link-modules)
+      LINK_MODULES=false
+      shift
+      ;;
     # Sets a different entrypoint (in which case the default arguments to the script will be ignored)
     --entrypoint)
       shift
@@ -87,16 +93,17 @@ done
 
 build_image
 
-# Ensure we pass all symlinked node_modules to the container
-pushd node_modules > /dev/null
-SYMLINKS=$(find . -maxdepth 2 -type l -not -path "./.bin/*")
-popd > /dev/null
-for LINK in $SYMLINKS; do
-  TARGET=$(readlink -f "node_modules/$LINK") || true
-  if [ -d "$TARGET" ]; then
-     if [ -n "$docker_is_podman" ]; then
-        echo -e "\033[31m" >&2
-        cat <<'EOF' >&2
+if [[ $LINK_MODULES == true ]]; then
+  # Ensure we pass all symlinked node_modules to the container
+  pushd node_modules > /dev/null
+  SYMLINKS=$(find . -maxdepth 2 -type l -not -path "./.bin/*")
+  popd > /dev/null
+  for LINK in $SYMLINKS; do
+    TARGET=$(readlink -f "node_modules/$LINK") || true
+    if [ -d "$TARGET" ]; then
+       if [ -n "$docker_is_podman" ]; then
+          echo -e "\033[31m" >&2
+          cat <<'EOF' >&2
 WARNING: `node_modules` contains symlinks, and the support for this in
 `playwright-screenshots.sh` is broken under podman due to
 https://github.com/containers/podman/issues/25947.
@@ -104,12 +111,13 @@ https://github.com/containers/podman/issues/25947.
 If you get errors such as 'Error: crun: creating `<path>`', then retry this
 having `yarn unlink`ed the relevant node modules.
 EOF
-      echo -e "\033[0m" >&2
+        echo -e "\033[0m" >&2
+      fi
+      echo "mounting linked package ${LINK:2} in container"
+      RUN_ARGS+=( "-v" "$TARGET:/work/node_modules/${LINK:2}" )
     fi
-    echo "mounting linked package ${LINK:2} in container"
-    RUN_ARGS+=( "-v" "$TARGET:/work/node_modules/${LINK:2}" )
-  fi
-done
+  done
+fi
 
 # Our Playwright fixtures use Testcontainers [1], which uses a docker image
 # called Ryuk [2], which will clean up any dangling containers/networks/etc

package/src/expect/axe.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { test, expect as baseExpect, type ExpectMatcherState, type MatcherReturnType } from "@playwright/test";
 
-import type AxeBuilder from "@axe-core/playwright";
+import type { AxeBuilder } from "@axe-core/playwright";
 
 export type Expectations = {
     /**

package/src/fixtures/axe.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { test as base } from "@playwright/test";
-import AxeBuilder from "@axe-core/playwright";
+import { AxeBuilder } from "@axe-core/playwright";
 
 // This fixture is useful for simple component library tests that won't want any extra services like a homeserver, so we
 // explicitly avoid pulling anything more than playwright's base fixtures in.

package/src/index.ts

@@ -66,6 +66,16 @@ export interface TestFixtures {
 
     labsFlags: string[];
     disablePresence: boolean;
+    /**
+     * Whether the left panel should have its width fixed.
+     * This is done because the library that we use for rendering collapsible
+     * panels uses math to calculate the width which can sometimes leads to +/-1px
+     * difference. While this does not matter to the user, it can lead to screenshot
+     * tests failing.
+     * Defaults to true, should be set to false via {@link base.use} when you want to test the collapse
+     * behaviour.
+     */
+    lockLeftPanelWidth: boolean;
 }
 
 export const test = base.extend<TestFixtures>({
@@ -73,8 +83,18 @@ export const test = base.extend<TestFixtures>({
     config: async ({}, use) => use({}),
     labsFlags: async ({}, use) => use([]),
     disablePresence: async ({}, use) => use(false),
-    page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => {
+    lockLeftPanelWidth: true,
+    page: async ({ homeserver, context, page, config, labsFlags, disablePresence, lockLeftPanelWidth }, use) => {
         await routeConfigJson(context, homeserver.baseUrl, config, labsFlags, disablePresence);
+        if (lockLeftPanelWidth) {
+            await page.addStyleTag({
+                content: `
+                        #left-panel {
+                            flex: 0 0 369.6875px !important;
+                        }
+                `,
+            });
+        }
         await use(page);
     },
 });