@element-hq/element-web-playwright-common 2.2.7 → 2.4.0

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/lib/stale-screenshot-reporter.d.ts

@@ -8,7 +8,7 @@ export declare const ANNOTATION = "_screenshot";
 declare class StaleScreenshotReporter implements Reporter {
     private readonly snapshotRoots;
     private readonly screenshots;
-    private failing;
+    private readonly failing;
     private success;
     onBegin(config: FullConfig): void;
     onTestEnd(test: TestCase): void;

package/lib/stale-screenshot-reporter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stale-screenshot-reporter.d.ts","sourceRoot":"","sources":["../src/stale-screenshot-reporter.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;GAGG;AACH,eAAO,MAAM,UAAU,gBAAgB,CAAC;AAExC,cAAM,uBAAwB,YAAW,QAAQ;IAC7C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IACnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAqB;IACjD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAQ;IAEhB,OAAO,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAMjC,SAAS,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAWtC,OAAO,CAAC,KAAK;IAQA,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;CAoCvC;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"stale-screenshot-reporter.d.ts","sourceRoot":"","sources":["../src/stale-screenshot-reporter.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;GAGG;AACH,eAAO,MAAM,UAAU,gBAAgB,CAAC;AAExC,cAAM,uBAAwB,YAAW,QAAQ;IAC7C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IACnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAqB;IACjD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAqB;IAC7C,OAAO,CAAC,OAAO,CAAQ;IAEhB,OAAO,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAMjC,SAAS,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IActC,OAAO,CAAC,KAAK;IAQA,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;CAuCvC;AAED,eAAe,uBAAuB,CAAC"}

package/lib/stale-screenshot-reporter.js

@@ -19,7 +19,7 @@ export const ANNOTATION = "_screenshot";
 class StaleScreenshotReporter {
     snapshotRoots = new Set();
     screenshots = new Set();
-    failing = false;
+    failing = new Set();
     success = true;
     onBegin(config) {
         for (const project of config.projects) {
@@ -28,8 +28,10 @@ class StaleScreenshotReporter {
     }
     onTestEnd(test) {
         if (!test.ok()) {
-            this.failing = true;
+            this.failing.add(test.id);
+            return;
         }
+        this.failing.delete(test.id); // delete if passed on re-run
         for (const annotation of test.annotations) {
             if (annotation.type === ANNOTATION && annotation.description) {
                 this.screenshots.add(annotation.description);
@@ -44,8 +46,9 @@ class StaleScreenshotReporter {
         this.success = false;
     }
     async onExit() {
-        if (this.failing)
-            return;
+        if (this.failing.size) {
+            console.error(`${this.failing.size} tests failed, skipping stale screenshot reporter.`);
+        }
         if (!this.snapshotRoots.size) {
             this.error("No snapshot directories found, did you set the snapshotDir in your Playwright config?", "");
             return;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@element-hq/element-web-playwright-common",
     "type": "module",
-    "version": "2.2.7",
+    "version": "2.4.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/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);
     },
 });

package/src/stale-screenshot-reporter.ts

@@ -25,7 +25,7 @@ export const ANNOTATION = "_screenshot";
 class StaleScreenshotReporter implements Reporter {
     private readonly snapshotRoots = new Set<string>();
     private readonly screenshots = new Set<string>();
-    private failing = false;
+    private readonly failing = new Set<string>();
     private success = true;
 
     public onBegin(config: FullConfig): void {
@@ -36,8 +36,11 @@ class StaleScreenshotReporter implements Reporter {
 
     public onTestEnd(test: TestCase): void {
         if (!test.ok()) {
-            this.failing = true;
+            this.failing.add(test.id);
+            return;
         }
+        this.failing.delete(test.id); // delete if passed on re-run
+
         for (const annotation of test.annotations) {
             if (annotation.type === ANNOTATION && annotation.description) {
                 this.screenshots.add(annotation.description);
@@ -54,7 +57,10 @@ class StaleScreenshotReporter implements Reporter {
     }
 
     public async onExit(): Promise<void> {
-        if (this.failing) return;
+        if (this.failing.size) {
+            console.error(`${this.failing.size} tests failed, skipping stale screenshot reporter.`);
+        }
+
         if (!this.snapshotRoots.size) {
             this.error("No snapshot directories found, did you set the snapshotDir in your Playwright config?", "");
             return;