@lullabot/playwright-testing 1.0.0 → 1.1.0

package/lib/hover.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.clearHover = clearHover;
-const HOVER_SHIELD_ATTRIBUTE = 'data-playwright-testing-hover-shield';
+const HOVER_SHIELD_ATTRIBUTE = "data-playwright-testing-hover-shield";
 /**
  * Move the pointer away from page content for a deterministic screenshot.
  *
@@ -16,23 +16,23 @@ const HOVER_SHIELD_ATTRIBUTE = 'data-playwright-testing-hover-shield';
 async function clearHover(page) {
     await page.evaluate((attribute) => {
         document.querySelector(`[${attribute}]`)?.remove();
-        const shield = document.createElement('playwright-testing-hover-shield');
-        shield.setAttribute(attribute, '');
-        shield.setAttribute('aria-hidden', 'true');
+        const shield = document.createElement("playwright-testing-hover-shield");
+        shield.setAttribute(attribute, "");
+        shield.setAttribute("aria-hidden", "true");
         shield.style.cssText = [
-            'all: initial !important',
-            'position: fixed !important',
-            'inset: 0 !important',
-            'display: block !important',
-            'width: 100vw !important',
-            'height: 100vh !important',
-            'margin: 0 !important',
-            'padding: 0 !important',
-            'border: 0 !important',
-            'opacity: 0 !important',
-            'pointer-events: auto !important',
-            'z-index: 2147483647 !important',
-        ].join(';');
+            "all: initial !important",
+            "position: fixed !important",
+            "inset: 0 !important",
+            "display: block !important",
+            "width: 100vw !important",
+            "height: 100vh !important",
+            "margin: 0 !important",
+            "padding: 0 !important",
+            "border: 0 !important",
+            "opacity: 0 !important",
+            "pointer-events: auto !important",
+            "z-index: 2147483647 !important",
+        ].join(";");
         document.documentElement.appendChild(shield);
     }, HOVER_SHIELD_ATTRIBUTE);
     try {

package/lib/images.js

@@ -24,12 +24,12 @@ async function waitForImages(page, selector, options = {}) {
         for (const l of await locators.all()) {
             // Ensure images are connected to the DOM before trying to scroll to them.
             // https://github.com/microsoft/playwright/issues/23758
-            if (await l.evaluate(image => image.isConnected)) {
+            if (await l.evaluate((image) => image.isConnected)) {
                 await l.scrollIntoViewIfNeeded();
             }
         }
         // Make sure all images have loaded.
-        const promises = (await locators.all()).map(locator => locator.evaluate(settleImage));
+        const promises = (await locators.all()).map((locator) => locator.evaluate(settleImage));
         await Promise.all(promises);
         // The wait above treats an errored image as "loaded". Decode each visible
         // image as well; source rewriting is available only when explicitly enabled.
@@ -41,14 +41,14 @@ async function waitForImages(page, selector, options = {}) {
         await page.evaluate(() => window.scroll({
             top: 0,
             left: 0,
-            behavior: 'instant',
+            behavior: "instant",
         }));
         // window.scroll is async and doesn't return a promise, so wait until the
         // browser confirms we are at the top again.
         const scrollState = { forced: false };
-        await page.waitForFunction(state => {
+        await page.waitForFunction((state) => {
             if (window.scrollY !== 0 && !state.forced) {
-                window.scroll({ top: 0, left: 0, behavior: 'instant' });
+                window.scroll({ top: 0, left: 0, behavior: "instant" });
                 state.forced = true;
             }
             return window.scrollY === 0;
@@ -89,7 +89,7 @@ function settleImage(image) {
     if ((image.width <= 1 && image.height <= 1) || image.complete) {
         return;
     }
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         const settled = () => {
             image.removeEventListener("load", settled);
             image.removeEventListener("error", settled);
@@ -105,7 +105,7 @@ function settleImage(image) {
  * @param page
  */
 async function waitForAllImages(page, options = {}) {
-    await waitForImages(page, 'img:visible', options);
+    await waitForImages(page, "img:visible", options);
 }
 /**
  * Poll every visible image until it decodes, optionally re-requesting failures.
@@ -170,7 +170,7 @@ async function decodeVisibleImages(options) {
             // one fetched, instead of re-running srcset selection.
             const picture = img.closest("picture");
             if (picture) {
-                picture.querySelectorAll("source").forEach(source => source.remove());
+                picture.querySelectorAll("source").forEach((source) => source.remove());
             }
             img.removeAttribute("srcset");
             img.src = url.href;
@@ -211,7 +211,7 @@ async function decodeVisibleImages(options) {
             return [];
         }
         if (Date.now() >= deadline) {
-            return pending.map(img => {
+            return pending.map((img) => {
                 const src = img.currentSrc || img.src;
                 try {
                     // Report the URL as the page authored it, without the cache-busting
@@ -230,7 +230,7 @@ async function decodeVisibleImages(options) {
             lastReload = Date.now();
             errored.forEach(reload);
         }
-        await new Promise(resolve => setTimeout(resolve, pollMs));
+        await new Promise((resolve) => setTimeout(resolve, pollMs));
     }
 }
 /**
@@ -252,9 +252,12 @@ async function decodeVisibleImages(options) {
  * @returns The URLs of the images that never decoded. Empty when they all did.
  */
 async function waitForImagesToDecode(page, timeoutMs = 15000, recoverErroredImages = false) {
-    const undecoded = await page.evaluate(decodeVisibleImages, { timeoutMs, recoverErroredImages });
+    const undecoded = await page.evaluate(decodeVisibleImages, {
+        timeoutMs,
+        recoverErroredImages,
+    });
     if (undecoded.length > 0) {
-        console.warn(`waitForImagesToDecode: ${undecoded.length} image(s) did not finish loading within ${timeoutMs}ms and may be captured as broken: ${undecoded.join(', ')}`);
+        console.warn(`waitForImagesToDecode: ${undecoded.length} image(s) did not finish loading within ${timeoutMs}ms and may be captured as broken: ${undecoded.join(", ")}`);
     }
     return undecoded;
 }

package/lib/index.d.ts

@@ -1,13 +1,13 @@
-export * from './focus.js';
-export * from './accessibility-baseline.js';
-export * from './accessibility-baseline-file.js';
-export * from './accessible-screenshot.js';
-export * from './fonts.js';
-export * from './frames.js';
-export * from './hover.js';
-export * from './images.js';
-export * from './interaction-states.js';
-export * from './pseudo-state.js';
-export * from './videos.js';
-export * from './visualdiff.js';
-export * from './mock/index.js';
+export * from "./focus.js";
+export * from "./accessibility-baseline.js";
+export * from "./accessibility-baseline-file.js";
+export * from "./accessible-screenshot.js";
+export * from "./fonts.js";
+export * from "./frames.js";
+export * from "./hover.js";
+export * from "./images.js";
+export * from "./interaction-states.js";
+export * from "./pseudo-state.js";
+export * from "./videos.js";
+export * from "./visualdiff.js";
+export * from "./mock/index.js";

package/lib/interaction-states.d.ts

@@ -1,6 +1,6 @@
-import type { Locator } from '@playwright/test';
+import type { Locator } from "@playwright/test";
 /** Real browser interaction states supported consistently by Playwright. */
-export type InteractionState = 'hover' | 'focus';
+export type InteractionState = "hover" | "focus";
 /** A locator and the real browser interaction states to apply to it. */
 export interface ScreenshotInteractionState {
     locator: Locator;

package/lib/interaction-states.js

@@ -4,17 +4,17 @@ exports.validateInteractionStates = validateInteractionStates;
 exports.applyInteractionStates = applyInteractionStates;
 /** Validate that the requested states are possible with real browser input. */
 function validateInteractionStates(interactionStates) {
-    const hoverTargets = interactionStates.filter(({ states }) => states.includes('hover'));
-    const focusTargets = interactionStates.filter(({ states }) => states.includes('focus'));
+    const hoverTargets = interactionStates.filter(({ states }) => states.includes("hover"));
+    const focusTargets = interactionStates.filter(({ states }) => states.includes("focus"));
     if (hoverTargets.length > 1) {
-        throw new Error('interactionStates can hover at most one locator at a time.');
+        throw new Error("interactionStates can hover at most one locator at a time.");
     }
     if (focusTargets.length > 1) {
-        throw new Error('interactionStates can focus at most one locator at a time.');
+        throw new Error("interactionStates can focus at most one locator at a time.");
     }
     for (const { states } of interactionStates) {
         if (new Set(states).size !== states.length) {
-            throw new Error('interactionStates cannot repeat a state for the same locator.');
+            throw new Error("interactionStates cannot repeat a state for the same locator.");
         }
     }
 }
@@ -27,8 +27,8 @@ function validateInteractionStates(interactionStates) {
  */
 async function applyInteractionStates(interactionStates, cleanupOptions = {}) {
     validateInteractionStates(interactionStates);
-    const hoverTarget = interactionStates.find(({ states }) => states.includes('hover'))?.locator;
-    const focusTarget = interactionStates.find(({ states }) => states.includes('focus'))?.locator;
+    const hoverTarget = interactionStates.find(({ states }) => states.includes("hover"))?.locator;
+    const focusTarget = interactionStates.find(({ states }) => states.includes("focus"))?.locator;
     let hoverApplied = false;
     let focusApplied = false;
     let cleaned = false;

package/lib/mock/index.d.ts

@@ -1 +1 @@
-export { YoutubeMock } from './youtube.js';
+export { YoutubeMock } from "./youtube.js";

package/lib/mock/youtube.d.ts

@@ -1,4 +1,4 @@
-import type { Page } from '@playwright/test';
+import type { Page } from "@playwright/test";
 import type { Mockable } from "../visualdiff.js";
 export declare class YoutubeMock implements Mockable {
     mock(page: Page): Promise<void>;

package/lib/mock/youtube.js

@@ -5,7 +5,7 @@ class YoutubeMock {
     async mock(page) {
         await page.route(/www\.youtube\.com/i, async (route) => {
             await route.fulfill({
-                contentType: 'text/html',
+                contentType: "text/html",
                 body: `
 <html>
 <head>

package/lib/pseudo-state.d.ts

@@ -1,6 +1,6 @@
-import { Page } from '@playwright/test';
+import { Page } from "@playwright/test";
 /** Pseudo-classes supported by Chromium's CSS.forcePseudoState command. */
-export type ForcedPseudoClass = 'active' | 'focus' | 'focus-visible' | 'focus-within' | 'hover' | 'target';
+export type ForcedPseudoClass = "active" | "focus" | "focus-visible" | "focus-within" | "hover" | "target";
 /** A CSS selector and the pseudo-classes to force on its first match. */
 export interface ForcedPseudoState {
     selector: string;

package/lib/pseudo-state.js

@@ -15,20 +15,25 @@ async function forcePseudoState(page, selector, pseudoClasses) {
         session = await page.context().newCDPSession(page);
     }
     catch (error) {
-        throw new Error('forcePseudoState() requires a Chromium browser project.', { cause: error });
+        throw new Error("forcePseudoState() requires a Chromium browser project.", {
+            cause: error,
+        });
     }
     try {
-        await session.send('DOM.enable');
-        await session.send('CSS.enable');
-        const { root } = await session.send('DOM.getDocument');
-        const { nodeId } = await session.send('DOM.querySelector', {
+        await session.send("DOM.enable");
+        await session.send("CSS.enable");
+        const { root } = await session.send("DOM.getDocument");
+        const { nodeId } = await session.send("DOM.querySelector", {
             nodeId: root.nodeId,
             selector,
         });
         if (!nodeId) {
             throw new Error(`forcePseudoState() could not find an element matching "${selector}".`);
         }
-        await session.send('CSS.forcePseudoState', { nodeId, forcedPseudoClasses: pseudoClasses });
+        await session.send("CSS.forcePseudoState", {
+            nodeId,
+            forcedPseudoClasses: pseudoClasses,
+        });
         let cleared = false;
         return async () => {
             if (cleared) {
@@ -36,7 +41,10 @@ async function forcePseudoState(page, selector, pseudoClasses) {
             }
             cleared = true;
             try {
-                await session.send('CSS.forcePseudoState', { nodeId, forcedPseudoClasses: [] });
+                await session.send("CSS.forcePseudoState", {
+                    nodeId,
+                    forcedPseudoClasses: [],
+                });
             }
             finally {
                 await session.detach();

package/lib/videos.js

@@ -128,7 +128,7 @@ async function settleVideos(options) {
     // running animation frames for a page it is not rendering -- one behind
     // another tab of the same context, say -- and page.evaluate() has no timeout
     // of its own, so an unguarded wait here hangs the whole capture.
-    const nextPaint = () => new Promise(resolve => {
+    const nextPaint = () => new Promise((resolve) => {
         const timer = setTimeout(resolve, paintTimeoutMs);
         requestAnimationFrame(() => requestAnimationFrame(() => {
             clearTimeout(timer);
@@ -139,7 +139,7 @@ async function settleVideos(options) {
     // decode the frame at the new position and present it, which lands several
     // frames later when the position is not a keyframe. Waiting for `seeked` is
     // what makes the rewind visible in the capture rather than a race.
-    const seeked = (video) => new Promise(resolve => {
+    const seeked = (video) => new Promise((resolve) => {
         const done = () => {
             clearTimeout(timer);
             video.removeEventListener("seeked", done);
@@ -155,15 +155,22 @@ async function settleVideos(options) {
     const ancestorScrolls = (video) => {
         const saved = [];
         for (let node = video.parentElement; node; node = node.parentElement) {
-            if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
-                saved.push({ element: node, top: node.scrollTop, left: node.scrollLeft });
+            if (node.scrollHeight > node.clientHeight ||
+                node.scrollWidth > node.clientWidth) {
+                saved.push({
+                    element: node,
+                    top: node.scrollTop,
+                    left: node.scrollLeft,
+                });
             }
         }
         return saved;
     };
     const sourceOf = (video) => {
-        const src = video.currentSrc || video.src
-            || video.querySelector("source")?.getAttribute("src") || "";
+        const src = video.currentSrc ||
+            video.src ||
+            video.querySelector("source")?.getAttribute("src") ||
+            "";
         try {
             return new URL(src, location.href).href;
         }
@@ -198,7 +205,11 @@ async function settleVideos(options) {
             // paint.
             const ancestors = ancestorScrolls(video);
             try {
-                video.scrollIntoView({ block: "center", inline: "nearest", behavior: "instant" });
+                video.scrollIntoView({
+                    block: "center",
+                    inline: "nearest",
+                    behavior: "instant",
+                });
                 await nextPaint();
                 // `preload="none"` means the browser fetches nothing until playback is
                 // asked for, and nothing here ever asks. Scrolling alone does not override
@@ -218,7 +229,7 @@ async function settleVideos(options) {
                 const deadline = Date.now() + timeoutMs;
                 const readyBeforeWait = video.readyState >= HAVE_CURRENT_DATA;
                 while (video.readyState < HAVE_CURRENT_DATA && Date.now() < deadline) {
-                    await new Promise(resolve => setTimeout(resolve, pollMs));
+                    await new Promise((resolve) => setTimeout(resolve, pollMs));
                 }
                 if (video.readyState < HAVE_CURRENT_DATA) {
                     // Reported below, but still settled: a video that becomes ready between
@@ -298,7 +309,7 @@ function restorePlayback() {
     }
 }
 async function waitForVideos(page, options = {}) {
-    const timeoutMs = typeof options === "number" ? options : options.timeoutMs ?? 5000;
+    const timeoutMs = typeof options === "number" ? options : (options.timeoutMs ?? 5000);
     const afterScroll = typeof options === "number" ? undefined : options.afterScroll;
     const notReady = [];
     let scrolled = false;
@@ -323,7 +334,7 @@ async function waitForVideos(page, options = {}) {
         }
     }
     if (notReady.length > 0) {
-        console.warn(`waitForVideos: ${notReady.length} video(s) had no frame available within ${timeoutMs}ms and may be captured as an empty box: ${notReady.join(', ')}`);
+        console.warn(`waitForVideos: ${notReady.length} video(s) had no frame available within ${timeoutMs}ms and may be captured as an empty box: ${notReady.join(", ")}`);
     }
     return notReady;
 }

package/lib/visualdiff.d.ts

@@ -1,8 +1,8 @@
-import { type BrowserContext, type Page, type TestInfo } from '@playwright/test';
+import { type BrowserContext, type Page, type TestInfo } from "@playwright/test";
 import { type ScreenshotOptions } from "./accessible-screenshot.js";
-import type { AccessibilityBaseline } from './accessibility-baseline.js';
-import { type ForcedPseudoState } from './pseudo-state.js';
-import type { InteractionState } from './interaction-states.js';
+import type { AccessibilityBaseline } from "./accessibility-baseline.js";
+import { type ForcedPseudoState } from "./pseudo-state.js";
+import type { InteractionState } from "./interaction-states.js";
 export interface VisualDiffExecutionContext {
     page: Page;
     testInfo: TestInfo;

package/lib/visualdiff.js

@@ -17,25 +17,31 @@ function defaultTestFunction(testCase, group, config, preset) {
             await mock.mock(page);
         }
         // Log any errors to the Playwright console too.
-        context.on('weberror', (webError) => console.log(webError.error()));
+        context.on("weberror", (webError) => console.log(webError.error()));
         testInfo.annotations.push({
-            type: 'Description',
+            type: "Description",
             description: testCase.description,
         });
-        const representativeUrl = testCase.representativeUrl
-            ?? group.representativeUrl
-            ?? config?.representativeUrl;
+        const representativeUrl = testCase.representativeUrl ??
+            group.representativeUrl ??
+            config?.representativeUrl;
         if (representativeUrl) {
             testInfo.annotations.push({
-                type: 'Representative URL',
+                type: "Representative URL",
                 description: representativeUrl,
             });
         }
-        const path = `${config?.pathPrefix ?? ''}${group.pathPrefix ?? ''}${testCase.path}`;
+        const path = `${config?.pathPrefix ?? ""}${group.pathPrefix ?? ""}${testCase.path}`;
         await page.goto(path);
-        const configuredScreenshotOptions = typeof preset?.screenshotOptions === 'function'
-            ? await preset.screenshotOptions({ page, testInfo, testCase, group, config })
-            : preset?.screenshotOptions ?? {};
+        const configuredScreenshotOptions = typeof preset?.screenshotOptions === "function"
+            ? await preset.screenshotOptions({
+                page,
+                testInfo,
+                testCase,
+                group,
+                config,
+            })
+            : (preset?.screenshotOptions ?? {});
         // Merge masks from all three levels: config, group, and testCase.
         const maskSelectors = [
             ...(config?.mask ?? []),
@@ -44,13 +50,13 @@ function defaultTestFunction(testCase, group, config, preset) {
         ];
         const maskLocators = [
             ...(configuredScreenshotOptions.mask ?? []),
-            ...maskSelectors.map(selector => page.locator(selector)),
+            ...maskSelectors.map((selector) => page.locator(selector)),
         ];
         // Most-specific-wins for maskColor: testCase > group > config.
-        const maskColor = testCase.maskColor
-            ?? group.maskColor
-            ?? config?.maskColor
-            ?? configuredScreenshotOptions.maskColor;
+        const maskColor = testCase.maskColor ??
+            group.maskColor ??
+            config?.maskColor ??
+            configuredScreenshotOptions.maskColor;
         const screenshotOptions = {
             ...configuredScreenshotOptions,
             fullPage: true,
@@ -61,10 +67,10 @@ function defaultTestFunction(testCase, group, config, preset) {
         if (maskColor) {
             screenshotOptions.maskColor = maskColor;
         }
-        const a11yBaseline = testCase.a11yBaseline
-            ?? group.a11yBaseline
-            ?? config?.a11yBaseline
-            ?? configuredScreenshotOptions.accessibility?.baseline;
+        const a11yBaseline = testCase.a11yBaseline ??
+            group.a11yBaseline ??
+            config?.a11yBaseline ??
+            configuredScreenshotOptions.accessibility?.baseline;
         if (a11yBaseline || configuredScreenshotOptions.accessibility) {
             screenshotOptions.accessibility = {
                 ...configuredScreenshotOptions.accessibility,
@@ -76,7 +82,8 @@ function defaultTestFunction(testCase, group, config, preset) {
             ...(group.interactionStates ?? []),
             ...(testCase.interactionStates ?? []),
         ];
-        if (interactionStates.length > 0 || configuredScreenshotOptions.interactionStates) {
+        if (interactionStates.length > 0 ||
+            configuredScreenshotOptions.interactionStates) {
             screenshotOptions.interactionStates = [
                 ...(configuredScreenshotOptions.interactionStates ?? []),
                 ...interactionStates.map(({ selector, states }) => ({
@@ -118,7 +125,7 @@ function defaultTestFunction(testCase, group, config, preset) {
         }
         if (operationFailed) {
             if (cleanupErrors.length > 0) {
-                throw new AggregateError([operationError, ...cleanupErrors], 'Visual diff capture and pseudo-state cleanup failed.');
+                throw new AggregateError([operationError, ...cleanupErrors], "Visual diff capture and pseudo-state cleanup failed.");
             }
             throw operationError;
         }
@@ -126,7 +133,7 @@ function defaultTestFunction(testCase, group, config, preset) {
             throw cleanupErrors[0];
         }
         if (cleanupErrors.length > 1) {
-            throw new AggregateError(cleanupErrors, 'Multiple pseudo-state cleanup operations failed.');
+            throw new AggregateError(cleanupErrors, "Multiple pseudo-state cleanup operations failed.");
         }
     };
 }
@@ -159,8 +166,9 @@ class VisualDiffTestCases {
     describe(overriddenTestFunction) {
         // Handle skipping of test cases, either based on a simple boolean or a callback.
         function shouldSkip(testCase) {
-            return testCase.skip !== undefined
-                && (testCase.skip.callback === undefined || testCase.skip.callback(testCase));
+            return (testCase.skip !== undefined &&
+                (testCase.skip.callback === undefined ||
+                    testCase.skip.callback(testCase)));
         }
         function registerSkip(testCase) {
             const skip = testCase.skip;
@@ -174,7 +182,7 @@ class VisualDiffTestCases {
             }
             // Actually describe the group.
             test_1.test.describe(group.name, () => {
-                group.testCases.forEach((testCase => {
+                group.testCases.forEach((testCase) => {
                     // Allow skipping of individual test cases.
                     if (shouldSkip(testCase)) {
                         registerSkip(testCase);
@@ -182,14 +190,14 @@ class VisualDiffTestCases {
                     }
                     // Define a default function for test cases.
                     let testFunction;
-                    if (typeof overriddenTestFunction != 'function') {
+                    if (typeof overriddenTestFunction != "function") {
                         testFunction = defaultTestFunction(testCase, group, this.config, this.preset);
                     }
                     else {
                         testFunction = overriddenTestFunction(testCase, group);
                     }
                     (0, test_1.test)(`${testCase.name}: ${testCase.path}`, testFunction);
-                }));
+                });
             });
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lullabot/playwright-testing",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Framework-neutral Playwright testing utilities",
   "license": "Apache-2.0",
   "repository": {
@@ -17,8 +17,8 @@
     "README.md"
   ],
   "bin": {
-    "playwright-testing-a11y-summary": "./bin/github-a11y-summary",
-    "playwright-testing-failure-summary": "./bin/github-failure-summary"
+    "playwright-testing-a11y-summary": "bin/github-a11y-summary",
+    "playwright-testing-failure-summary": "bin/github-failure-summary"
   },
   "exports": {
     ".": {