@lullabot/playwright-testing 1.2.0 → 1.3.0

package/README.md

@@ -1,8 +1,8 @@
 # `@lullabot/playwright-testing`
 
 Framework-neutral utilities for stable Playwright screenshots, accessibility
-baselines, URL-driven visual comparisons, WebKit autofocus stabilization, and
-GitHub reporting.
+baselines, URL-driven visual comparisons, CKEditor 5 editing, WebKit autofocus
+stabilization, and GitHub reporting.
 
 This package is developed in the
 [`playwright-drupal` monorepo](https://github.com/Lullabot/playwright-drupal),
@@ -25,8 +25,9 @@ version.
 
 - `@lullabot/playwright-testing` exports screenshot stabilization,
   accessibility checks and baselines, visual-diff definitions, interaction and
-  pseudo-state helpers, reusable mocks, and the `suppressWebKitAutofocus()` init
-  script (installed explicitly in WebKit contexts).
+  pseudo-state helpers, `openAllDetails()`, CKEditor 5 editing, reusable mocks,
+  and the `suppressWebKitAutofocus()` init script (installed explicitly in WebKit
+  contexts).
 - `@lullabot/playwright-testing/github` exports the optional GitHub report,
   attachment-upload, and path-remapping APIs.
 - `playwright-testing-a11y-summary` and
@@ -51,6 +52,8 @@ test('home page', async ({ page }, testInfo) => {
 
 - [Accessibility testing][testing-accessibility]
 - [Stable screenshots and visual comparisons][testing-screenshots]
+- [Page readiness and browser state][testing-page-readiness]
+- [CKEditor 5 editing][testing-ckeditor5]
 - [WebKit native autofocus workaround][testing-webkit-autofocus]
 - [GitHub reporting][testing-github-reporting]
 
@@ -67,3 +70,7 @@ package.
 [testing-screenshots]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/screenshots-and-visual-comparisons.md
 [testing-github-reporting]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/github-reporting.md
 [testing-webkit-autofocus]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/webkit-autofocus.md
+
+[testing-page-readiness]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/page-readiness.md
+
+[testing-ckeditor5]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/ckeditor5.md

package/lib/accessibility-baseline-file.js

@@ -12,6 +12,7 @@ exports.writeBaselineFile = writeBaselineFile;
 exports.buildSeed = buildSeed;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
+const crypto_1 = require("crypto");
 const scanInvocationCounters = new WeakMap();
 /**
  * Increment and return the 1-indexed invocation number for this scan kind
@@ -41,9 +42,7 @@ function resetAccessibilityScanCounts(testInfo) {
     scanInvocationCounters.delete(testInfo);
 }
 /**
- * Slugify a test's fully qualified title the same way we use it as the
- * stem of both on-disk baseline filenames and (for existence checks) the
- * prefix of Playwright's auto-generated snapshot filenames.
+ * Slugify a test's fully qualified title for on-disk JSON baseline filenames.
  *
  * Implemented as a single-pass character scan to avoid regex-based
  * polynomial backtracking on library-supplied input (CodeQL
@@ -78,17 +77,20 @@ function slugifyTitle(testInfo) {
     return out;
 }
 /**
- * Reproduce the stem Playwright uses for auto-named snapshot files: the
- * title path (minus the spec file) joined with spaces, with every run of
- * control/punctuation characters collapsed to a single hyphen. Unlike
- * `slugifyTitle()` this preserves case and does not trim hyphens, so it
- * matches committed snapshot filenames exactly. Mirrors Playwright's
- * `sanitizeForFilePath()`. Very long titles, which Playwright truncates
- * and hashes, are not handled.
+ * Playwright's anonymous snapshot argument: trim the full title INCLUDING
+ * the counter to 100 UTF-16 code units, inserting five SHA-1 hex characters
+ * in the middle, then sanitize it. There is no public API for generating an
+ * arbitrary anonymous counter; snapshotPath() resolves this explicit argument.
+ * Keep this compatibility implementation covered by real runner tests.
  */
-function playwrightSnapshotStem(testInfo) {
+function playwrightSnapshotStem(testInfo, counter) {
     const segments = testInfo.titlePath?.slice(1) ?? [];
-    const raw = segments.length > 0 ? segments.join(" ") : testInfo.title;
+    const title = segments.length > 0 ? segments.join(" ") : testInfo.title;
+    let raw = `${title} ${counter}`;
+    if (raw.length > 100) {
+        const hash = (0, crypto_1.createHash)("sha1").update(raw).digest("hex").slice(0, 5);
+        raw = `${raw.slice(0, 46)}-${hash}-${raw.slice(-47)}`;
+    }
     let out = "";
     let lastWasReplaced = false;
     for (let i = 0; i < raw.length; i++) {
@@ -136,7 +138,7 @@ function baselineFilePath(testInfo, scan, callCount) {
  * defaulting new (snapshotless) tests into on-disk baseline mode.
  */
 async function snapshotExists(testInfo) {
-    const dir = path_1.default.dirname(testInfo.snapshotPath("a11y-baseline-probe"));
+    const dir = path_1.default.dirname(testInfo.snapshotPath("a11y-baseline-probe.txt"));
     let entries;
     try {
         entries = await fs_1.promises.readdir(dir);
@@ -146,20 +148,24 @@ async function snapshotExists(testInfo) {
             return false;
         throw err;
     }
-    // Playwright names snapshots `<stem>-<counter>[-<project>-<platform>].txt`.
-    // Require the counter so a title that merely extends this one (e.g.
-    // "Video" vs "Video Promo") is not mistaken for this test's snapshot.
-    const prefix = `${playwrightSnapshotStem(testInfo)}-`;
-    return entries.some((name) => {
-        if (!name.startsWith(prefix) || !name.endsWith(".txt"))
-            return false;
-        let i = prefix.length;
-        while (i < name.length &&
-            name.charCodeAt(i) >= 48 &&
-            name.charCodeAt(i) <= 57)
-            i++;
-        return i > prefix.length && (name[i] === "-" || name[i] === ".");
-    });
+    // Extract possible counters, then compare the entire resolved path. A
+    // prefix match can accidentally select another test (e.g. "Video 2").
+    // Resolving via the public API honors project, suffix, and path templates.
+    for (const name of entries) {
+        if (!name.endsWith(".txt"))
+            continue;
+        for (const match of name.matchAll(/[0-9]+/g)) {
+            const counter = match[0];
+            if (counter.startsWith("0"))
+                continue;
+            const expected = testInfo.snapshotPath(`${playwrightSnapshotStem(testInfo, counter)}.txt`);
+            if (path_1.default.resolve(expected) === path_1.default.resolve(dir, name)) {
+                if ((await fs_1.promises.stat(expected)).isFile())
+                    return true;
+            }
+        }
+    }
+    return false;
 }
 async function readBaselineFile(filePath) {
     let raw;

package/lib/ckeditor5.d.ts

@@ -0,0 +1,58 @@
+import { FrameLocator, Page } from "@playwright/test";
+/**
+ * Return the select-all modifier key for a given platform.
+ *
+ * Exported so unit tests can cover the platform branch without mocking
+ * `process.platform`. Defaults to the current platform.
+ */
+export declare function selectAllModifier(platform?: NodeJS.Platform): "Meta" | "Control";
+/**
+ * Drive a CKEditor **5** field from a Playwright test.
+ *
+ * This class is specifically for CKEditor 5. It does **not** work with
+ * CKEditor 4.
+ *
+ * CKEditor 5 keeps a virtual-DOM model that it synchronises with the visible
+ * contenteditable element. Setting the DOM directly (e.g. via Playwright's
+ * `locator.fill()`) can be silently dropped because the editor's next
+ * re-render overwrites it; it also bypasses any input handlers CKEditor
+ * plugins register. `fill()` here dispatches real keyboard events through
+ * `page.keyboard`, which CKEditor's event pipeline processes as normal
+ * edits.
+ *
+ * The `selector` targets the widget **wrapper** (e.g.
+ * `#body-editor` or `[data-testid="body-editor"]`),
+ * not the contenteditable itself — the class drills into
+ * `.ck-editor__editable` internally so callers don't have to memorise
+ * CKEditor 5's markup.
+ *
+ * For editors rendered inside an iframe, pass the `FrameLocator` as `root`
+ * while keeping `page` as the owning page so keyboard events still reach the
+ * right window.
+ */
+export declare class Ckeditor5 {
+    page: Page;
+    root: Page | FrameLocator;
+    protected selector: string;
+    /**
+     * @param page
+     *   The page the CKEditor 5 instance lives on. Keyboard events are sent to
+     *   this page.
+     * @param selector
+     *   A selector that resolves to the widget wrapper containing the editor
+     *   (e.g. `#body-editor`). The class finds the
+     *   `.ck-editor__editable` element inside.
+     * @param root
+     *   Optional frame locator if the editor is inside an iframe. Defaults to
+     *   `page`.
+     */
+    constructor(page: Page, selector: string, root?: Page | FrameLocator);
+    /**
+     * Replace the editor's contents with the given text.
+     *
+     * Clears existing content (select-all + Backspace) so the call has
+     * Playwright-style `fill()` semantics: the final value is exactly `text`,
+     * regardless of whether the field was empty.
+     */
+    fill(text: string): Promise<void>;
+}

package/lib/ckeditor5.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ckeditor5 = void 0;
+exports.selectAllModifier = selectAllModifier;
+/**
+ * Return the select-all modifier key for a given platform.
+ *
+ * Exported so unit tests can cover the platform branch without mocking
+ * `process.platform`. Defaults to the current platform.
+ */
+function selectAllModifier(platform = process.platform) {
+    return platform === "darwin" ? "Meta" : "Control";
+}
+/**
+ * Drive a CKEditor **5** field from a Playwright test.
+ *
+ * This class is specifically for CKEditor 5. It does **not** work with
+ * CKEditor 4.
+ *
+ * CKEditor 5 keeps a virtual-DOM model that it synchronises with the visible
+ * contenteditable element. Setting the DOM directly (e.g. via Playwright's
+ * `locator.fill()`) can be silently dropped because the editor's next
+ * re-render overwrites it; it also bypasses any input handlers CKEditor
+ * plugins register. `fill()` here dispatches real keyboard events through
+ * `page.keyboard`, which CKEditor's event pipeline processes as normal
+ * edits.
+ *
+ * The `selector` targets the widget **wrapper** (e.g.
+ * `#body-editor` or `[data-testid="body-editor"]`),
+ * not the contenteditable itself — the class drills into
+ * `.ck-editor__editable` internally so callers don't have to memorise
+ * CKEditor 5's markup.
+ *
+ * For editors rendered inside an iframe, pass the `FrameLocator` as `root`
+ * while keeping `page` as the owning page so keyboard events still reach the
+ * right window.
+ */
+class Ckeditor5 {
+    page;
+    root;
+    selector;
+    /**
+     * @param page
+     *   The page the CKEditor 5 instance lives on. Keyboard events are sent to
+     *   this page.
+     * @param selector
+     *   A selector that resolves to the widget wrapper containing the editor
+     *   (e.g. `#body-editor`). The class finds the
+     *   `.ck-editor__editable` element inside.
+     * @param root
+     *   Optional frame locator if the editor is inside an iframe. Defaults to
+     *   `page`.
+     */
+    constructor(page, selector, root) {
+        this.page = page;
+        this.selector = selector;
+        this.root = root ?? page;
+    }
+    /**
+     * Replace the editor's contents with the given text.
+     *
+     * Clears existing content (select-all + Backspace) so the call has
+     * Playwright-style `fill()` semantics: the final value is exactly `text`,
+     * regardless of whether the field was empty.
+     */
+    async fill(text) {
+        const editable = this.root
+            .locator(this.selector)
+            .locator(".ck-editor__editable");
+        await editable.waitFor({ state: "visible", timeout: 15000 });
+        // Click places the caret inside the editable so the keyboard events
+        // below land in CKEditor rather than the outer document.
+        await editable.click();
+        await this.page.keyboard.press(`${selectAllModifier()}+A`);
+        await this.page.keyboard.press("Backspace");
+        // keyboard.type fires keydown/keypress/input events that CKEditor 5's
+        // event pipeline processes. locator.fill() would set the DOM directly
+        // and can be silently dropped on the next model re-render.
+        await this.page.keyboard.type(text);
+    }
+}
+exports.Ckeditor5 = Ckeditor5;

package/lib/details.d.ts

@@ -0,0 +1,6 @@
+import { Page } from "@playwright/test";
+/**
+ * Expand every collapsed `<details>` element on the page so nested controls
+ * become interactable. Call after navigation and before filling nested fields.
+ */
+export declare function openAllDetails(page: Page): Promise<void>;

package/lib/details.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openAllDetails = openAllDetails;
+/**
+ * Expand every collapsed `<details>` element on the page so nested controls
+ * become interactable. Call after navigation and before filling nested fields.
+ */
+async function openAllDetails(page) {
+    await page.evaluate(() => {
+        document.querySelectorAll("details:not([open])").forEach((d) => {
+            d.open = true;
+        });
+    });
+}

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./details.js";
 export * from "./focus.js";
 export * from "./accessibility-baseline.js";
 export * from "./accessibility-baseline-file.js";
@@ -12,3 +13,4 @@ export * from "./videos.js";
 export * from "./visualdiff.js";
 export * from "./mock/index.js";
 export * from "./webkit-autofocus.js";
+export * from "./ckeditor5.js";

package/lib/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./details.js"), exports);
 __exportStar(require("./focus.js"), exports);
 __exportStar(require("./accessibility-baseline.js"), exports);
 __exportStar(require("./accessibility-baseline-file.js"), exports);
@@ -28,3 +29,4 @@ __exportStar(require("./videos.js"), exports);
 __exportStar(require("./visualdiff.js"), exports);
 __exportStar(require("./mock/index.js"), exports);
 __exportStar(require("./webkit-autofocus.js"), exports);
+__exportStar(require("./ckeditor5.js"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lullabot/playwright-testing",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Framework-neutral Playwright testing utilities",
   "license": "Apache-2.0",
   "repository": {

package/src/accessibility-baseline-file.test.ts

@@ -1,6 +1,8 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { promises as fs } from "fs";
 import os from "os";
+import { execFileSync } from "child_process";
+import { createRequire } from "module";
 import path from "path";
 import {
   baselineFilePath,
@@ -16,6 +18,7 @@ function makeTestInfo(opts: {
   dir: string;
   title?: string;
   titlePath?: string[];
+  suffix?: string;
 }) {
   const title = opts.title ?? "standalone accessibility check works";
   const titlePath = opts.titlePath ?? ["file.spec.ts", title];
@@ -23,7 +26,16 @@ function makeTestInfo(opts: {
     testId: `${title}-${Math.random()}`,
     title,
     titlePath,
-    snapshotPath: (...segs: string[]) => path.join(opts.dir, ...segs),
+    snapshotPath: (...segs: string[]) => {
+      const name = segs.join(path.sep);
+      const ext = path.extname(name);
+      return path.join(
+        opts.dir,
+        name.slice(0, name.length - ext.length) +
+          (ext === ".txt" ? (opts.suffix ?? "-chromium-linux") : "") +
+          ext,
+      );
+    },
   };
 }
 
@@ -115,37 +127,184 @@ describe("accessibility-baseline-file", () => {
       const ti = makeTestInfo({
         dir: tmpDir,
         title: "Test error pages: ID 3303",
+        suffix: "-desktop-chrome-linux",
       });
       expect(await snapshotExists(ti)).toBe(true);
     });
 
     it("matches with different project suffixes", async () => {
       await touch("Login-Works-1-mobile-safari-darwin.txt");
-      const ti = makeTestInfo({ dir: tmpDir, title: "Login Works" });
+      const ti = makeTestInfo({
+        dir: tmpDir,
+        title: "Login Works",
+        suffix: "-mobile-safari-darwin",
+      });
       expect(await snapshotExists(ti)).toBe(true);
     });
 
+    it("does not match a numeric extension of the title or another project", async () => {
+      await touch("Login-Works-2-1-chromium-linux.txt");
+      await touch("Login-Works-1-other-project-linux.txt");
+      expect(
+        await snapshotExists(
+          makeTestInfo({ dir: tmpDir, title: "Login Works" }),
+        ),
+      ).toBe(false);
+    });
+
+    it("matches punctuation adjoining literal hyphens and trailing separators", async () => {
+      await touch(
+        "Landing-Page-Content-of-type-Landing-Page-2-bureau-of-sorcery-tablet-linux.txt",
+      );
+      await touch(
+        "admin-toolbar-hover-expansion-When-I-mouse-over-an-admin-menu-item-it-expands-consistently-3-desktop-chrome-linux.txt",
+      );
+      expect(
+        await snapshotExists(
+          makeTestInfo({
+            dir: tmpDir,
+            titlePath: [
+              "file.spec.ts",
+              "Landing Page",
+              "Content of type Landing Page!",
+            ],
+            suffix: "-bureau-of-sorcery-tablet-linux",
+          }),
+        ),
+      ).toBe(true);
+      expect(
+        await snapshotExists(
+          makeTestInfo({
+            dir: tmpDir,
+            titlePath: [
+              "file.spec.ts",
+              "admin toolbar hover expansion",
+              "When I mouse over an admin menu item it expands consistently!",
+            ],
+            suffix: "-desktop-chrome-linux",
+          }),
+        ),
+      ).toBe(true);
+    });
+
+    it.each([
+      undefined,
+      "{testDir}/snapshots/{projectName}/{arg}-{platform}{ext}",
+    ])(
+      "detects real Playwright snapshots with template %s",
+      async (template) => {
+        const require = createRequire(import.meta.url);
+        const runner = require.resolve("@playwright/test/cli");
+        const api = require.resolve("@playwright/test");
+        const helper = require.resolve("./accessibility-baseline-file.ts");
+        const cases = [
+          [
+            "News",
+            "The new Defense Against the Dark Arts teacher",
+            "4/07/26 new defense against dark arts teacher!",
+          ],
+          ["Landing Page", "Content of type Landing Page!"],
+          [
+            "admin toolbar hover expansion",
+            "When I mouse over an admin menu item it expands consistently!",
+          ],
+          ["Nested: suite-", "Inner / describe", "Punctuation!? - trailing-"],
+          ["Long " + "title!? - ".repeat(20), "Same ending"],
+          ["Long " + "title!? - ".repeat(20) + "different", "Same ending"],
+        ];
+        await fs.writeFile(
+          path.join(tmpDir, "playwright.config.cjs"),
+          `module.exports = {
+        testDir: '.', outputDir: 'output', reporter: 'line',
+        projects: [{name: 'bureau-of-sorcery-chrome'}, {name: 'tablet'}],
+        snapshotPathTemplate: ${JSON.stringify(template)}
+      };`,
+        );
+        await fs.writeFile(
+          path.join(tmpDir, "generated.spec.cjs"),
+          `
+        const {test, expect} = require(${JSON.stringify(api)});
+        const {snapshotExists} = require(${JSON.stringify(helper)});
+        const fs = require('fs');
+        const path = require('path');
+        for (const [outer, inner, title = inner] of ${JSON.stringify(cases)}) {
+          test.describe(outer, () => test.describe(inner, () => {
+            test(title, async ({}, info) => {
+              expect(await snapshotExists(info)).toBe(false);
+              for (let i = 0; i < 12; i++) expect('[]').toMatchSnapshot();
+              const dir = path.dirname(info.snapshotPath('probe.txt'));
+              const files = fs.readdirSync(dir).filter(name => name.endsWith('.txt'));
+              // Leave only the twelfth snapshot for this test: detection cannot
+              // assume that the first accessibility scan has counter one.
+              const own = files.filter(name => name.includes('-12-'));
+              for (const name of files) if (!own.includes(name)) fs.unlinkSync(path.join(dir, name));
+              expect(await snapshotExists(info)).toBe(true);
+              expect('[]').toMatchSnapshot();
+              const next = fs.readdirSync(dir).find(name => name.includes('-13-'));
+              expect(next).toBeTruthy(); // detection did not consume counters
+              fs.unlinkSync(path.join(dir, next));
+              expect(await snapshotExists({...info, titlePath: [...info.titlePath.slice(0, -1), title + ' 2'], snapshotPath: info.snapshotPath.bind(info)})).toBe(false);
+              expect(await snapshotExists({...info, titlePath: [info.titlePath[0], outer + 'different', ...info.titlePath.slice(2)], snapshotPath: info.snapshotPath.bind(info)})).toBe(false);
+              for (const name of own) fs.renameSync(path.join(dir, name), path.join(dir, name.slice(0, -4) + '.png'));
+              expect(await snapshotExists(info)).toBe(false);
+            });
+          }));
+        }
+      `,
+        );
+        execFileSync(
+          process.execPath,
+          [
+            runner,
+            "test",
+            "--config",
+            path.join(tmpDir, "playwright.config.cjs"),
+            "--update-snapshots",
+            "--workers=1",
+          ],
+          { encoding: "utf8", timeout: 30000 },
+        );
+      },
+      40000,
+    );
+
     it("does not match a title that differs only by case", async () => {
       await touch("login-works-1-desktop-chrome-linux.txt");
-      const ti = makeTestInfo({ dir: tmpDir, title: "Login Works" });
+      const ti = makeTestInfo({
+        dir: tmpDir,
+        title: "Login Works",
+        suffix: "-desktop-chrome-linux",
+      });
       expect(await snapshotExists(ti)).toBe(false);
     });
 
     it("returns false when nothing matches", async () => {
       await touch("Other-Test-1-desktop-chrome-linux.txt");
-      const ti = makeTestInfo({ dir: tmpDir, title: "Login Works" });
+      const ti = makeTestInfo({
+        dir: tmpDir,
+        title: "Login Works",
+        suffix: "-desktop-chrome-linux",
+      });
       expect(await snapshotExists(ti)).toBe(false);
     });
 
     it("ignores a matching .png without a .txt", async () => {
       await touch("Login-Works-1-desktop-chrome-linux.png");
-      const ti = makeTestInfo({ dir: tmpDir, title: "Login Works" });
+      const ti = makeTestInfo({
+        dir: tmpDir,
+        title: "Login Works",
+        suffix: "-desktop-chrome-linux",
+      });
       expect(await snapshotExists(ti)).toBe(false);
     });
 
     it("does not match a different test whose title extends this one", async () => {
       await touch("CRUD-tests-Video-Promo-1-desktop-chrome-linux.txt");
-      const ti = makeTestInfo({ dir: tmpDir, title: "CRUD tests - Video" });
+      const ti = makeTestInfo({
+        dir: tmpDir,
+        title: "CRUD tests - Video",
+        suffix: "-desktop-chrome-linux",
+      });
       expect(await snapshotExists(ti)).toBe(false);
     });
   });

package/src/accessibility-baseline-file.ts

@@ -1,5 +1,6 @@
 import { promises as fs } from "fs";
 import path from "path";
+import { createHash } from "crypto";
 import type { TestInfo } from "@playwright/test";
 import type { AccessibilityBaselineEntry } from "./accessibility-baseline.js";
 
@@ -45,9 +46,7 @@ export function resetAccessibilityScanCounts(testInfo: object): void {
 }
 
 /**
- * Slugify a test's fully qualified title the same way we use it as the
- * stem of both on-disk baseline filenames and (for existence checks) the
- * prefix of Playwright's auto-generated snapshot filenames.
+ * Slugify a test's fully qualified title for on-disk JSON baseline filenames.
  *
  * Implemented as a single-pass character scan to avoid regex-based
  * polynomial backtracking on library-supplied input (CodeQL
@@ -80,19 +79,23 @@ function slugifyTitle(testInfo: Pick<TestInfo, "titlePath" | "title">): string {
 }
 
 /**
- * Reproduce the stem Playwright uses for auto-named snapshot files: the
- * title path (minus the spec file) joined with spaces, with every run of
- * control/punctuation characters collapsed to a single hyphen. Unlike
- * `slugifyTitle()` this preserves case and does not trim hyphens, so it
- * matches committed snapshot filenames exactly. Mirrors Playwright's
- * `sanitizeForFilePath()`. Very long titles, which Playwright truncates
- * and hashes, are not handled.
+ * Playwright's anonymous snapshot argument: trim the full title INCLUDING
+ * the counter to 100 UTF-16 code units, inserting five SHA-1 hex characters
+ * in the middle, then sanitize it. There is no public API for generating an
+ * arbitrary anonymous counter; snapshotPath() resolves this explicit argument.
+ * Keep this compatibility implementation covered by real runner tests.
  */
 function playwrightSnapshotStem(
   testInfo: Pick<TestInfo, "titlePath" | "title">,
+  counter: string,
 ): string {
   const segments = testInfo.titlePath?.slice(1) ?? [];
-  const raw = segments.length > 0 ? segments.join(" ") : testInfo.title;
+  const title = segments.length > 0 ? segments.join(" ") : testInfo.title;
+  let raw = `${title} ${counter}`;
+  if (raw.length > 100) {
+    const hash = createHash("sha1").update(raw).digest("hex").slice(0, 5);
+    raw = `${raw.slice(0, 46)}-${hash}-${raw.slice(-47)}`;
+  }
   let out = "";
   let lastWasReplaced = false;
   for (let i = 0; i < raw.length; i++) {
@@ -148,7 +151,7 @@ export function baselineFilePath(
 export async function snapshotExists(
   testInfo: Pick<TestInfo, "snapshotPath" | "titlePath" | "title">,
 ): Promise<boolean> {
-  const dir = path.dirname(testInfo.snapshotPath("a11y-baseline-probe"));
+  const dir = path.dirname(testInfo.snapshotPath("a11y-baseline-probe.txt"));
   let entries: string[];
   try {
     entries = await fs.readdir(dir);
@@ -156,21 +159,23 @@ export async function snapshotExists(
     if (err?.code === "ENOENT") return false;
     throw err;
   }
-  // Playwright names snapshots `<stem>-<counter>[-<project>-<platform>].txt`.
-  // Require the counter so a title that merely extends this one (e.g.
-  // "Video" vs "Video Promo") is not mistaken for this test's snapshot.
-  const prefix = `${playwrightSnapshotStem(testInfo)}-`;
-  return entries.some((name) => {
-    if (!name.startsWith(prefix) || !name.endsWith(".txt")) return false;
-    let i = prefix.length;
-    while (
-      i < name.length &&
-      name.charCodeAt(i) >= 48 &&
-      name.charCodeAt(i) <= 57
-    )
-      i++;
-    return i > prefix.length && (name[i] === "-" || name[i] === ".");
-  });
+  // Extract possible counters, then compare the entire resolved path. A
+  // prefix match can accidentally select another test (e.g. "Video 2").
+  // Resolving via the public API honors project, suffix, and path templates.
+  for (const name of entries) {
+    if (!name.endsWith(".txt")) continue;
+    for (const match of name.matchAll(/[0-9]+/g)) {
+      const counter = match[0];
+      if (counter.startsWith("0")) continue;
+      const expected = testInfo.snapshotPath(
+        `${playwrightSnapshotStem(testInfo, counter)}.txt`,
+      );
+      if (path.resolve(expected) === path.resolve(dir, name)) {
+        if ((await fs.stat(expected)).isFile()) return true;
+      }
+    }
+  }
+  return false;
 }
 
 export async function readBaselineFile(

package/src/accessibility-baseline.test.ts

@@ -959,13 +959,15 @@ describe("accessibility baseline", () => {
     });
 
     it("still uses snapshot mode when a legacy snapshot file exists for the test", async () => {
-      mockAnalyze.mockResolvedValue(makeAxeResults({ violations: [] }));
+      mockAnalyze.mockResolvedValue(
+        makeAxeResults({ violations: [makeViolation("image-alt", [["img"]])] }),
+      );
 
       // Pre-create a Playwright-style snapshot file in the snapshots dir.
       const fs = await import("fs");
       const path = await import("path");
       await fs.promises.writeFile(
-        path.join(tmpDir, "legacy-test-1-chromium-linux.txt"),
+        path.join(tmpDir, "legacy-test-1.txt"),
         "[]\n",
       );
 
@@ -978,6 +980,21 @@ describe("accessibility baseline", () => {
         bestPracticeMode: "off",
       });
 
+      // A retry must stay in snapshot mode without creating TODO metadata.
+      await checkAccessibility(
+        makePage() as any,
+        makeTestInfo({
+          updateSnapshots: "none",
+          snapshotsDir: tmpDir,
+          title: "legacy test",
+        }) as any,
+        { bestPracticeMode: "off" },
+      );
+      expect(
+        (await fs.promises.readdir(tmpDir)).filter((name) =>
+          name.endsWith(".json"),
+        ),
+      ).toEqual([]);
       // Snapshot mode -> toMatchSnapshot was invoked.
       expect(mockToMatchSnapshot).toHaveBeenCalled();
     });

package/src/ckeditor5.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from "vitest";
+import { selectAllModifier } from "./ckeditor5";
+
+describe("selectAllModifier", () => {
+  it("returns Meta on darwin", () => {
+    expect(selectAllModifier("darwin")).toBe("Meta");
+  });
+
+  it("returns Control on linux", () => {
+    expect(selectAllModifier("linux")).toBe("Control");
+  });
+
+  it("returns Control on win32", () => {
+    expect(selectAllModifier("win32")).toBe("Control");
+  });
+
+  it("returns Control on freebsd / other", () => {
+    expect(selectAllModifier("freebsd")).toBe("Control");
+  });
+});

package/src/ckeditor5.ts

@@ -0,0 +1,84 @@
+import { FrameLocator, Page } from "@playwright/test";
+
+/**
+ * Return the select-all modifier key for a given platform.
+ *
+ * Exported so unit tests can cover the platform branch without mocking
+ * `process.platform`. Defaults to the current platform.
+ */
+export function selectAllModifier(
+  platform: NodeJS.Platform = process.platform,
+): "Meta" | "Control" {
+  return platform === "darwin" ? "Meta" : "Control";
+}
+
+/**
+ * Drive a CKEditor **5** field from a Playwright test.
+ *
+ * This class is specifically for CKEditor 5. It does **not** work with
+ * CKEditor 4.
+ *
+ * CKEditor 5 keeps a virtual-DOM model that it synchronises with the visible
+ * contenteditable element. Setting the DOM directly (e.g. via Playwright's
+ * `locator.fill()`) can be silently dropped because the editor's next
+ * re-render overwrites it; it also bypasses any input handlers CKEditor
+ * plugins register. `fill()` here dispatches real keyboard events through
+ * `page.keyboard`, which CKEditor's event pipeline processes as normal
+ * edits.
+ *
+ * The `selector` targets the widget **wrapper** (e.g.
+ * `#body-editor` or `[data-testid="body-editor"]`),
+ * not the contenteditable itself — the class drills into
+ * `.ck-editor__editable` internally so callers don't have to memorise
+ * CKEditor 5's markup.
+ *
+ * For editors rendered inside an iframe, pass the `FrameLocator` as `root`
+ * while keeping `page` as the owning page so keyboard events still reach the
+ * right window.
+ */
+export class Ckeditor5 {
+  public page: Page;
+  public root: Page | FrameLocator;
+  protected selector: string;
+
+  /**
+   * @param page
+   *   The page the CKEditor 5 instance lives on. Keyboard events are sent to
+   *   this page.
+   * @param selector
+   *   A selector that resolves to the widget wrapper containing the editor
+   *   (e.g. `#body-editor`). The class finds the
+   *   `.ck-editor__editable` element inside.
+   * @param root
+   *   Optional frame locator if the editor is inside an iframe. Defaults to
+   *   `page`.
+   */
+  public constructor(page: Page, selector: string, root?: Page | FrameLocator) {
+    this.page = page;
+    this.selector = selector;
+    this.root = root ?? page;
+  }
+
+  /**
+   * Replace the editor's contents with the given text.
+   *
+   * Clears existing content (select-all + Backspace) so the call has
+   * Playwright-style `fill()` semantics: the final value is exactly `text`,
+   * regardless of whether the field was empty.
+   */
+  public async fill(text: string): Promise<void> {
+    const editable = this.root
+      .locator(this.selector)
+      .locator(".ck-editor__editable");
+    await editable.waitFor({ state: "visible", timeout: 15000 });
+    // Click places the caret inside the editable so the keyboard events
+    // below land in CKEditor rather than the outer document.
+    await editable.click();
+    await this.page.keyboard.press(`${selectAllModifier()}+A`);
+    await this.page.keyboard.press("Backspace");
+    // keyboard.type fires keydown/keypress/input events that CKEditor 5's
+    // event pipeline processes. locator.fill() would set the DOM directly
+    // and can be silently dropped on the next model re-render.
+    await this.page.keyboard.type(text);
+  }
+}

package/src/details.ts

@@ -0,0 +1,13 @@
+import { Page } from "@playwright/test";
+
+/**
+ * Expand every collapsed `<details>` element on the page so nested controls
+ * become interactable. Call after navigation and before filling nested fields.
+ */
+export async function openAllDetails(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    document.querySelectorAll("details:not([open])").forEach((d) => {
+      (d as HTMLDetailsElement).open = true;
+    });
+  });
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./details.js";
 export * from "./focus.js";
 export * from "./accessibility-baseline.js";
 export * from "./accessibility-baseline-file.js";
@@ -12,3 +13,4 @@ export * from "./videos.js";
 export * from "./visualdiff.js";
 export * from "./mock/index.js";
 export * from "./webkit-autofocus.js";
+export * from "./ckeditor5.js";