@empiricalrun/playwright-utils 0.29.0 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @empiricalrun/playwright-utils
 
+## 0.30.0
+
+### Minor Changes
+
+- 7cbf29a: feat: add setVideoLabel for multi-page scenarios to have labels
+
 ## 0.29.0
 
 ### Minor Changes

package/dist/config/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAczD,wBAAgB,gBAAgB,IAAI,MAAM,CAazC;AAwCD,eAAO,MAAM,UAAU,EAAE,oBA0BxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,iBAarB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAczD,wBAAgB,gBAAgB,IAAI,MAAM,CAazC;AAwCD,eAAO,MAAM,UAAU,EAAE,oBAyBxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,iBAarB,CAAC"}

package/dist/config/index.js

@@ -77,20 +77,19 @@ exports.baseConfig = {
     workers: undefined,
     // maxFailures counts retries as individual failures, so this is equivalent to 20 failed tests
     maxFailures: process.env.CI ? 30 : undefined,
+    timeout: 15 * 60 * 1_000,
+    expect: {
+        timeout: 15_000,
+    },
     use: {
-        screenshot: "on",
-        trace: "on",
-        video: {
-            mode: "on",
-            size: { width: 1280, height: 720 },
-        },
         actionTimeout: 15_000,
         navigationTimeout: 30_000,
+        screenshot: "on",
+        trace: "on",
+        // Video recording is handled by the context fixture override
+        // so that we can use video labels
+        video: "off",
     },
-    expect: {
-        timeout: 15_000,
-    },
-    timeout: 15 * 60 * 1_000,
 };
 exports.devices = Object.entries(deviceDescriptorsSource_json_1.default).reduce((acc, [name, device]) => ({
     ...acc,

package/dist/test/index.d.ts

@@ -1,6 +1,7 @@
 import type { BrowserContext, BrowserContextOptions, expect, Page, PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, PlaywrightWorkerOptions, TestType } from "@playwright/test";
 import { injectLocatorHighlightScripts } from "./scripts";
 import { HighlighterOpts } from "./types";
+import { setVideoLabel } from "./video-labels";
 declare global {
     namespace PlaywrightTest {
         interface Matchers<R> {
@@ -18,5 +19,5 @@ type TestOptions = {
     saveVideos: void;
 };
 declare const baseTestFixture: (testFn: TestType<PlaywrightTestArgs & PlaywrightTestOptions, PlaywrightWorkerArgs & PlaywrightWorkerOptions>, options?: HighlighterOpts) => TestType<PlaywrightTestArgs & PlaywrightTestOptions & TestOptions, PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
-export { baseTestFixture, extendExpect, injectLocatorHighlightScripts };
+export { baseTestFixture, extendExpect, injectLocatorHighlightScripts, setVideoLabel, };
 //# sourceMappingURL=index.d.ts.map

package/dist/test/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,qBAAqB,EACrB,MAAM,EACN,IAAI,EACJ,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAM1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,cAAc,CAAC;QACvB,UAAU,QAAQ,CAAC,CAAC;YAClB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;SAC9C;KACF;CACF;AAED,QAAA,MAAM,YAAY,GAAa,gBAAgB,OAAO,MAAM,0CAG3D,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,yBAAyB,EAAE,CACzB,OAAO,CAAC,EAAE,qBAAqB,KAC5B,OAAO,CAAC;QAAE,OAAO,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtD,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAUF,QAAA,MAAM,eAAe,GACnB,QAAQ,QAAQ,CACd,kBAAkB,GAAG,qBAAqB,EAC1C,oBAAoB,GAAG,uBAAuB,CAC/C,EACD,UAAS,eAAgC,uHAuD1C,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,6BAA6B,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,qBAAqB,EACrB,MAAM,EACN,IAAI,EACJ,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAI1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAA8B,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,cAAc,CAAC;QACvB,UAAU,QAAQ,CAAC,CAAC;YAClB,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;SAC9C;KACF;CACF;AAED,QAAA,MAAM,YAAY,GAAa,gBAAgB,OAAO,MAAM,0CAG3D,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,yBAAyB,EAAE,CACzB,OAAO,CAAC,EAAE,qBAAqB,KAC5B,OAAO,CAAC;QAAE,OAAO,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtD,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAYF,QAAA,MAAM,eAAe,GACnB,QAAQ,QAAQ,CACd,kBAAkB,GAAG,qBAAqB,EAC1C,oBAAoB,GAAG,uBAAuB,CAC/C,EACD,UAAS,eAAgC,uHAmG1C,CAAC;AAEF,OAAO,EACL,eAAe,EACf,YAAY,EACZ,6BAA6B,EAC7B,aAAa,GACd,CAAC"}

package/dist/test/index.js

@@ -3,19 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectLocatorHighlightScripts = exports.extendExpect = exports.baseTestFixture = void 0;
-const fs_1 = __importDefault(require("fs"));
+exports.setVideoLabel = exports.injectLocatorHighlightScripts = exports.extendExpect = exports.baseTestFixture = void 0;
 const path_1 = __importDefault(require("path"));
-const rimraf_1 = require("rimraf");
 const expect_1 = require("./expect");
 const scripts_1 = require("./scripts");
 Object.defineProperty(exports, "injectLocatorHighlightScripts", { enumerable: true, get: function () { return scripts_1.injectLocatorHighlightScripts; } });
+const video_labels_1 = require("./video-labels");
+Object.defineProperty(exports, "setVideoLabel", { enumerable: true, get: function () { return video_labels_1.setVideoLabel; } });
 const extendExpect = function (expectInstance) {
     expectInstance.extend({ toLookRight: expect_1.toLookRight });
     return expectInstance;
 };
 exports.extendExpect = extendExpect;
-const videoStore = "videos-store";
+// Track pages per test to save videos with labels
+const testPages = new Map();
 const defaultOptions = {
     mousePointerHighlighter: true,
     locatorHighlighter: true,
@@ -24,6 +25,22 @@ const defaultOptions = {
 };
 const baseTestFixture = function (testFn, options = defaultOptions) {
     const extendedTestFn = testFn.extend({
+        context: async ({ browser }, use, testInfo) => {
+            const context = await browser.newContext({
+                recordVideo: {
+                    dir: testInfo.outputDir,
+                    size: { width: 1280, height: 720 },
+                },
+            });
+            const pages = [];
+            context.on("page", (page) => pages.push(page));
+            await use(context);
+            if (!testPages.has(testInfo.testId)) {
+                testPages.set(testInfo.testId, []);
+            }
+            testPages.get(testInfo.testId).push(...pages);
+            await context.close();
+        },
         page: async ({ page }, use) => {
             (0, scripts_1.injectLocatorHighlightScripts)(page, extendedTestFn, {
                 ...defaultOptions,
@@ -37,32 +54,60 @@ const baseTestFixture = function (testFn, options = defaultOptions) {
                 const pageContext = await browser.newContext({
                     ...contextOptions,
                     recordVideo: {
-                        dir: path_1.default.join(testInfo.project.outputDir, videoStore, testInfo.testId),
+                        dir: testInfo.outputDir,
+                        size: { width: 1280, height: 720 },
                     },
                 });
-                contexts.push(pageContext);
+                const pages = [];
+                pageContext.on("page", (page) => pages.push(page));
                 const customPage = await pageContext.newPage();
+                contexts.push({ context: pageContext, pages });
                 (0, scripts_1.injectLocatorHighlightScripts)(customPage, extendedTestFn, options);
                 return { context: pageContext, page: customPage };
             }
             await use(createContext);
-            for (const context of contexts) {
+            // Store pages for video renaming
+            if (!testPages.has(testInfo.testId)) {
+                testPages.set(testInfo.testId, []);
+            }
+            for (const { pages } of contexts) {
+                testPages.get(testInfo.testId).push(...pages);
+            }
+            for (const { context } of contexts) {
                 await context.close();
             }
         },
         saveVideos: [
             async ({}, use, testInfo) => {
                 await use();
-                const pathToTestVideos = path_1.default.join(testInfo.project.outputDir, "videos-store", testInfo.testId);
-                if (fs_1.default.existsSync(pathToTestVideos)) {
-                    for (let name of fs_1.default.readdirSync(pathToTestVideos)) {
-                        await testInfo.attach("video", {
-                            path: path_1.default.join(pathToTestVideos, name),
+                const pages = testPages.get(testInfo.testId) || [];
+                const usedLabels = new Set();
+                // Save videos with custom labels using saveAs
+                for (let i = 0; i < pages.length; i++) {
+                    const page = pages[i];
+                    if (!page)
+                        continue;
+                    const video = page.video();
+                    if (!video)
+                        continue;
+                    try {
+                        const srcPath = await video.path();
+                        const ext = path_1.default.extname(srcPath) || ".webm";
+                        const rawLabel = (0, video_labels_1.getVideoLabel)(page) || `video-${i}`;
+                        const label = (0, video_labels_1.dedupeLabel)(rawLabel, usedLabels);
+                        const outPath = testInfo.outputPath(`${label}${ext}`);
+                        await video.saveAs(outPath);
+                        await testInfo.attach(`video: ${label}`, {
+                            path: outPath,
                             contentType: "video/webm",
                         });
+                        await video.delete();
+                    }
+                    catch (e) {
+                        // Skip if video not available
                     }
-                    (0, rimraf_1.rimrafSync)(pathToTestVideos);
                 }
+                testPages.delete(testInfo.testId);
             },
             { auto: true },
         ],

package/dist/test/video-labels.d.ts

@@ -0,0 +1,5 @@
+import type { Page } from "@playwright/test";
+export declare function setVideoLabel(page: Page, label: string): void;
+export declare function getVideoLabel(page: Page): string | undefined;
+export declare function dedupeLabel(baseLabel: string, usedLabels: Set<string>): string;
+//# sourceMappingURL=video-labels.d.ts.map

package/dist/test/video-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-labels.d.ts","sourceRoot":"","sources":["../../src/test/video-labels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,QAGtD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAE5D;AAED,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,GACtB,MAAM,CAQR"}

package/dist/test/video-labels.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setVideoLabel = setVideoLabel;
+exports.getVideoLabel = getVideoLabel;
+exports.dedupeLabel = dedupeLabel;
+const videoLabels = new WeakMap();
+function sanitizeLabel(label) {
+    return label.replace(/[^a-z0-9._-]/gi, "_").slice(0, 80) || "video";
+}
+function setVideoLabel(page, label) {
+    // Sanitize immediately when setting
+    videoLabels.set(page, sanitizeLabel(label));
+}
+function getVideoLabel(page) {
+    return videoLabels.get(page);
+}
+function dedupeLabel(baseLabel, usedLabels) {
+    let label = baseLabel;
+    let counter = 1;
+    while (usedLabels.has(label)) {
+        label = `${baseLabel}-${counter++}`;
+    }
+    usedLabels.add(label);
+    return label;
+}

package/docs/video-labels.md

@@ -0,0 +1,42 @@
+# Video Labels
+
+Pages generate video recordings after test execution, with 1 page generating 1 video file (webm). 
+
+If your test case relies on multiple pages (e.g. for multi-user or multi-app flows), it can get difficult to
+know which page does "video-1.webm" belong to.
+
+To solve this, you should set video labels for pages. This will enable you to identify videos faster.
+
+## Usage
+
+```typescript
+import { setVideoLabel } from 'playwright-utils/test';
+
+test('my test', async ({ page }) => {
+  setVideoLabel(page, 'checkout-flow');
+  // Video will be saved as 'checkout-flow.webm'
+});
+```
+
+## Multiple Contexts
+
+```typescript
+test('multi-user scenario', async ({ page, customContextPageProvider }) => {
+  setVideoLabel(page, 'host-page');
+
+  const { page: guestPage } = await customContextPageProvider({ storageState: undefined });
+  setVideoLabel(guestPage, 'guest-page');
+  // Videos saved as 'guest-page.webm' and 'host-page.webm'
+});
+```
+
+## Default Behavior
+
+If no label is set:
+- Default `page` fixture: `video.webm`
+- `customContextPageProvider`: `video-0.webm`, `video-1.webm`, etc.
+
+## Note
+
+If setVideoLabel is called twice for the same page:
+- The last label will be set

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empiricalrun/playwright-utils",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/email.ts","./src/index.ts","./src/logger.ts","./src/playwright-extensions.ts","./src/auth/google.ts","./src/auth/index.ts","./src/auth/types.ts","./src/captcha/index.ts","./src/captcha/vision.ts","./src/config/index.ts","./src/config/devices/types.ts","./src/overlay-tests/cache.spec.ts","./src/overlay-tests/click.spec.ts","./src/overlay-tests/fixtures.ts","./src/overlay-tests/patch.spec.ts","./src/reporter/empirical-reporter.ts","./src/reporter/uploader.ts","./src/reporter/util.ts","./src/test/constants.ts","./src/test/expect.ts","./src/test/index.ts","./src/test/types.ts","./src/test/scripts/agent-capabilities.ts","./src/test/scripts/index.ts","./src/test/scripts/locator-highlights.ts","./src/test/scripts/locator-vision.ts","./src/test/scripts/mouse-pointer.ts","./src/test/scripts/types.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/cache.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/index.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/prompt.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/types.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/utils.ts","./src/test/scripts/pw-locator-patch/highlight/click.ts","./src/test/scripts/pw-locator-patch/highlight/expect.ts","./src/test/scripts/pw-locator-patch/highlight/hover.ts","./src/test/scripts/pw-locator-patch/highlight/inner-text.ts","./src/test/scripts/pw-locator-patch/highlight/input-value.ts","./src/test/scripts/pw-locator-patch/highlight/is-checked.ts","./src/test/scripts/pw-locator-patch/highlight/is-disabled.ts","./src/test/scripts/pw-locator-patch/highlight/is-editable.ts","./src/test/scripts/pw-locator-patch/highlight/text-content.ts","./src/test/scripts/pw-locator-patch/utils/index.ts","./src/test/scripts/pw-locator-patch/vision/query.ts"],"version":"5.8.3"}
+{"root":["./src/email.ts","./src/index.ts","./src/logger.ts","./src/playwright-extensions.ts","./src/auth/google.ts","./src/auth/index.ts","./src/auth/types.ts","./src/captcha/index.ts","./src/captcha/vision.ts","./src/config/index.ts","./src/config/devices/types.ts","./src/overlay-tests/cache.spec.ts","./src/overlay-tests/click.spec.ts","./src/overlay-tests/fixtures.ts","./src/overlay-tests/patch.spec.ts","./src/reporter/empirical-reporter.ts","./src/reporter/uploader.ts","./src/reporter/util.ts","./src/test/constants.ts","./src/test/expect.ts","./src/test/index.ts","./src/test/types.ts","./src/test/video-labels.ts","./src/test/scripts/agent-capabilities.ts","./src/test/scripts/index.ts","./src/test/scripts/locator-highlights.ts","./src/test/scripts/locator-vision.ts","./src/test/scripts/mouse-pointer.ts","./src/test/scripts/types.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/cache.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/index.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/prompt.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/types.ts","./src/test/scripts/pw-locator-patch/dismiss-overlays/utils.ts","./src/test/scripts/pw-locator-patch/highlight/click.ts","./src/test/scripts/pw-locator-patch/highlight/expect.ts","./src/test/scripts/pw-locator-patch/highlight/hover.ts","./src/test/scripts/pw-locator-patch/highlight/inner-text.ts","./src/test/scripts/pw-locator-patch/highlight/input-value.ts","./src/test/scripts/pw-locator-patch/highlight/is-checked.ts","./src/test/scripts/pw-locator-patch/highlight/is-disabled.ts","./src/test/scripts/pw-locator-patch/highlight/is-editable.ts","./src/test/scripts/pw-locator-patch/highlight/text-content.ts","./src/test/scripts/pw-locator-patch/utils/index.ts","./src/test/scripts/pw-locator-patch/vision/query.ts"],"version":"5.8.3"}