@ralphralphai/playwright 1.6.0 → 1.8.0

package/README.md

@@ -108,6 +108,9 @@ test('cart', { tag: '@ralph' }, async ({ page, ralph }) => {
 });
 ```
 
+Pass a `name` to label the node in the graph, e.g.
+`ralph.recordNode(page, { name: 'Cart' })`. A later call without one keeps it.
+
 Each call replaces the screenshot, so the last one wins. A dialog at the same
 URL is the same node, so recording it would replace the page's screenshot: give
 it its own node by declaring a page tag for it (below), since that is what
@@ -173,6 +176,22 @@ await ralph.waitForCapture();
 await context.close();
 ```
 
+### What happened between two nodes
+
+The Playwright actions a test takes on the way from one node to the next are
+recorded on the edge between them: clicks, hovers, fills, key presses,
+selects, uploads, drags, and `goto` / back / forward / reload. Each one keeps
+the element it landed on (its role, name, and `data-track-id`) and where that
+element was on the earlier node's screenshot, which Ralph shows as, e.g.,
+`Click button "Checkout"`.
+
+What was typed into a password or one-time-code field is never recorded.
+Actions taken while recording is paused are left out.
+
+Pass an `edgeLabel` to describe the step in your own words, e.g.
+`ralph.recordNode(page, { name: 'Done', edgeLabel: 'Sign in' })`. A later call
+without one keeps it.
+
 ### When recording fails
 
 - A failed `recordNode` call rejects.

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_upload = require("./upload-Cs6oMofL.cjs");
+const require_upload = require("./upload-BvAi7mMY.cjs");
 let node_path = require("node:path");
 node_path = require_upload.__toESM(node_path, 1);
 let _playwright_test = require("@playwright/test");
@@ -63,7 +63,7 @@ const test = _playwright_test.test.extend({
 		applyScreenSelection(testInfo);
 		await use();
 	}, { auto: true }],
-	_ralphRecorder: [async ({ ralphOptions, _ralphConfigs, _ralphScreen }, use, testInfo) => {
+	_ralphRecorder: [async ({ ralphOptions, _ralphConfigs, _ralphScreen, playwright }, use, testInfo) => {
 		const mode = require_upload.resolveMode(ralphOptions);
 		if (!testInfo.tags.includes("@ralph") || mode === "off") {
 			await use(null);
@@ -82,7 +82,7 @@ const test = _playwright_test.test.extend({
 			pending = require_upload.loadConfig(ralphOptions, root);
 			_ralphConfigs.set(key, pending);
 		}
-		const recorder = new require_upload.Recorder(ralphOptions, await pending, testInfo, mode);
+		const recorder = new require_upload.Recorder(ralphOptions, await pending, testInfo, mode, playwright);
 		try {
 			await use(recorder);
 		} finally {

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["loadConfigSync","base","resolveMode","path","loadConfig","Recorder"],"sources":["../src/screens.ts","../src/index.ts"],"sourcesContent":["import type {\n  PlaywrightTestOptions,\n  PlaywrightWorkerOptions,\n  Project,\n  TestInfo,\n} from '@playwright/test';\nimport type { ScreenSize } from '@ralphralphai/config';\n\nimport { loadConfigSync } from './config';\nimport type { RalphOptions } from './types';\n\ntype RalphProject = Project<\n  PlaywrightTestOptions & { ralphOptions: RalphOptions },\n  PlaywrightWorkerOptions\n>;\n\nexport const SCREEN_TAG_PREFIX = '@ralph-screen:';\n\nexport type RalphProjectOptions = Pick<\n  RalphOptions,\n  'config' | 'configPath'\n> & {\n  /** Resolves a relative `configPath`; defaults to the current directory. */\n  root?: string;\n};\n\ntype ScreenMetadata = { screenSize: ScreenSize; screenSizes: ScreenSize[] };\n\nexport function screenLabel(size: ScreenSize): string {\n  return size.width + 'x' + size.height;\n}\n\n/**\n * Expands `base` into one project per `screenSizes` entry of the Ralph config.\n * Each project's viewport is that screen size.\n */\nexport function ralphProjects(\n  base: RalphProject = {},\n  options: RalphProjectOptions = {},\n): RalphProject[] {\n  const { screenSizes } = loadConfigSync(\n    options,\n    options.root ?? process.cwd(),\n  ).config;\n  if (!screenSizes.length) {\n    throw new Error('The Ralph config declares no screenSizes.');\n  }\n  return screenSizes.map((screenSize) => {\n    const label = screenLabel(screenSize);\n    const ralph: ScreenMetadata = { screenSize, screenSizes };\n    return {\n      ...base,\n      name: base.name ? base.name + ' ' + label : label,\n      use: {\n        ...base.use,\n        viewport: { width: screenSize.width, height: screenSize.height },\n      },\n      metadata: { ...base.metadata, ralph },\n    };\n  });\n}\n\n/**\n * Skips a test whose `@ralph-screen:WxH` tags exclude the current project's\n * screen size. Untagged tests run at every size; other projects are untouched.\n */\nexport function applyScreenSelection(testInfo: TestInfo): void {\n  const selected = testInfo.tags\n    .filter((tag) => tag.startsWith(SCREEN_TAG_PREFIX))\n    .map((tag) => tag.slice(SCREEN_TAG_PREFIX.length));\n  const metadata = (testInfo.project.metadata as { ralph?: ScreenMetadata })\n    .ralph;\n  if (!selected.length || !metadata) {\n    return;\n  }\n  const known = metadata.screenSizes.map(screenLabel);\n  const unknown = selected.filter((label) => !known.includes(label));\n  if (unknown.length) {\n    throw new Error(\n      'Unknown Ralph screen size ' +\n        unknown.join(', ') +\n        '; the config declares ' +\n        known.join(', ') +\n        '.',\n    );\n  }\n  const current = screenLabel(metadata.screenSize);\n  testInfo.skip(\n    !selected.includes(current),\n    'Not selected for Ralph screen size ' + current + '.',\n  );\n}\n","import path from 'node:path';\n\nimport { test as base } from '@playwright/test';\nimport type {\n  PlaywrightTestArgs,\n  PlaywrightTestOptions,\n  PlaywrightWorkerArgs,\n  PlaywrightWorkerOptions,\n  TestType,\n} from '@playwright/test';\n\nimport { loadConfig, resolveMode } from './config';\nimport { Recorder, REPORTER_ENV } from './recorder';\nimport { applyScreenSelection } from './screens';\nimport type { ConfigSnapshot, Ralph, RalphOptions } from './types';\n\nexport { expect, mergeTests } from '@playwright/test';\nexport type { WebRalphConfig } from '@ralphralphai/config';\nexport {\n  createRawGraphBundle,\n  prepareArtifactUpload,\n  uploadRawGraph,\n} from './upload';\nexport type {\n  PreparedUpload,\n  UploadOptions,\n  UploadReceipt,\n  RawGraphScreenshot,\n  RawGraphBundleIndex,\n} from './upload';\nexport { MANIFEST_ATTACHMENT } from './recorder';\nexport { ralphProjects, SCREEN_TAG_PREFIX } from './screens';\nexport type { RalphProjectOptions } from './screens';\nexport type { RalphReporterOptions } from './reporter';\nexport type {\n  RawGraphManifest,\n  RawGraph,\n  RawGraphFile,\n  RawPage,\n  RawNode,\n  ConditionsDeclaration,\n  NodeConditions,\n  RecordedTags,\n  TagConditions,\n  TagDeclaration,\n  TagValue,\n  ConfigSnapshot,\n  PageLayout,\n  Ralph,\n  RalphOptions,\n  TrackedElement,\n} from './types';\n\nexport type RalphFixtures = { ralph: Ralph; ralphOptions: RalphOptions };\n\ntype InternalFixtures = {\n  _ralphScreen: void;\n  _ralphRecorder: Recorder | null;\n};\ntype WorkerFixtures = { _ralphConfigs: Map<string, Promise<ConfigSnapshot>> };\n\nexport const test: TestType<\n  PlaywrightTestArgs & PlaywrightTestOptions & RalphFixtures,\n  PlaywrightWorkerArgs & PlaywrightWorkerOptions\n> = base.extend<RalphFixtures & InternalFixtures, WorkerFixtures>({\n  ralphOptions: [{}, { option: true }],\n  _ralphConfigs: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use) => {\n      await use(new Map());\n    },\n    { scope: 'worker' },\n  ],\n  _ralphScreen: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use, testInfo) => {\n      // Screen selection chooses which flows run, so it applies in every mode.\n      applyScreenSelection(testInfo);\n      await use();\n    },\n    { auto: true },\n  ],\n  _ralphRecorder: [\n    // _ralphScreen is specified here so that the playwright treat that it is\n    // a dependency of this fixture.\n    async ({ ralphOptions, _ralphConfigs, _ralphScreen }, use, testInfo) => {\n      const mode = resolveMode(ralphOptions);\n      if (!testInfo.tags.includes('@ralph') || mode === 'off') {\n        await use(null);\n        return;\n      }\n\n      // A sharded run's blob reports are merged, and uploaded by the Ralph\n      // reporter, in `playwright merge-reports`.\n      const reported =\n        process.env[REPORTER_ENV] ||\n        testInfo.config.reporter.some(([name]) => name === 'blob');\n      if (mode === 'upload' && !reported) {\n        throw new Error(\n          \"Ralph uploads one merged graph per run from its reporter. Add ['@ralphralphai/playwright/reporter'] to `reporter` in playwright.config, or use the blob reporter and merge-reports when sharding.\",\n        );\n      }\n\n      const root = testInfo.config.configFile\n        ? path.dirname(testInfo.config.configFile)\n        : process.cwd();\n\n      const key = JSON.stringify({\n        root,\n        config: ralphOptions.config,\n        configPath: ralphOptions.configPath,\n      });\n\n      let pending = _ralphConfigs.get(key);\n      if (!pending) {\n        pending = loadConfig(ralphOptions, root);\n        _ralphConfigs.set(key, pending);\n      }\n\n      const recorder = new Recorder(\n        ralphOptions,\n        await pending,\n        testInfo,\n        mode,\n      );\n\n      try {\n        await use(recorder);\n      } finally {\n        await recorder.finish();\n      }\n    },\n    { auto: true, timeout: 30_000 },\n  ],\n  ralph: async ({ _ralphRecorder, ralphOptions }, use) => {\n    const checkOptIn = () => {\n      if (\n        resolveMode(ralphOptions) !== 'off' &&\n        !ralphOptions.ignoreUntaggedCalls\n      ) {\n        throw new Error('Opt this test into Ralph with the @ralph tag.');\n      }\n    };\n\n    await use(\n      _ralphRecorder ?? {\n        recordNode: async () => {\n          checkOptIn();\n        },\n        setNodeConditions: async () => {\n          checkOptIn();\n          return async () => {};\n        },\n        waitForCapture: async () => {},\n        pause: () => {},\n        resume: () => {},\n        observe: () => {\n          checkOptIn();\n        },\n      },\n    );\n  },\n  // On the context rather than per page, so popups start out reduced too.\n  contextOptions: async ({ contextOptions, ralphOptions }, use, testInfo) => {\n    const recording =\n      testInfo.tags.includes('@ralph') && resolveMode(ralphOptions) !== 'off';\n    await use(\n      recording && ralphOptions.reduceMotion\n        ? { ...contextOptions, reducedMotion: 'reduce' }\n        : contextOptions,\n    );\n  },\n  context: async ({ context, _ralphRecorder }, use) => {\n    _ralphRecorder?.observe(context);\n    try {\n      await use(context);\n    } finally {\n      // The base context fixture closes its pages next; pending recordings still need them alive.\n      await _ralphRecorder?.stopContext(context);\n    }\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["loadConfigSync","base","resolveMode","path","loadConfig","Recorder"],"sources":["../src/screens.ts","../src/index.ts"],"sourcesContent":["import type {\n  PlaywrightTestOptions,\n  PlaywrightWorkerOptions,\n  Project,\n  TestInfo,\n} from '@playwright/test';\nimport type { ScreenSize } from '@ralphralphai/config';\n\nimport { loadConfigSync } from './config';\nimport type { RalphOptions } from './types';\n\ntype RalphProject = Project<\n  PlaywrightTestOptions & { ralphOptions: RalphOptions },\n  PlaywrightWorkerOptions\n>;\n\nexport const SCREEN_TAG_PREFIX = '@ralph-screen:';\n\nexport type RalphProjectOptions = Pick<\n  RalphOptions,\n  'config' | 'configPath'\n> & {\n  /** Resolves a relative `configPath`; defaults to the current directory. */\n  root?: string;\n};\n\ntype ScreenMetadata = { screenSize: ScreenSize; screenSizes: ScreenSize[] };\n\nexport function screenLabel(size: ScreenSize): string {\n  return size.width + 'x' + size.height;\n}\n\n/**\n * Expands `base` into one project per `screenSizes` entry of the Ralph config.\n * Each project's viewport is that screen size.\n */\nexport function ralphProjects(\n  base: RalphProject = {},\n  options: RalphProjectOptions = {},\n): RalphProject[] {\n  const { screenSizes } = loadConfigSync(\n    options,\n    options.root ?? process.cwd(),\n  ).config;\n  if (!screenSizes.length) {\n    throw new Error('The Ralph config declares no screenSizes.');\n  }\n  return screenSizes.map((screenSize) => {\n    const label = screenLabel(screenSize);\n    const ralph: ScreenMetadata = { screenSize, screenSizes };\n    return {\n      ...base,\n      name: base.name ? base.name + ' ' + label : label,\n      use: {\n        ...base.use,\n        viewport: { width: screenSize.width, height: screenSize.height },\n      },\n      metadata: { ...base.metadata, ralph },\n    };\n  });\n}\n\n/**\n * Skips a test whose `@ralph-screen:WxH` tags exclude the current project's\n * screen size. Untagged tests run at every size; other projects are untouched.\n */\nexport function applyScreenSelection(testInfo: TestInfo): void {\n  const selected = testInfo.tags\n    .filter((tag) => tag.startsWith(SCREEN_TAG_PREFIX))\n    .map((tag) => tag.slice(SCREEN_TAG_PREFIX.length));\n  const metadata = (testInfo.project.metadata as { ralph?: ScreenMetadata })\n    .ralph;\n  if (!selected.length || !metadata) {\n    return;\n  }\n  const known = metadata.screenSizes.map(screenLabel);\n  const unknown = selected.filter((label) => !known.includes(label));\n  if (unknown.length) {\n    throw new Error(\n      'Unknown Ralph screen size ' +\n        unknown.join(', ') +\n        '; the config declares ' +\n        known.join(', ') +\n        '.',\n    );\n  }\n  const current = screenLabel(metadata.screenSize);\n  testInfo.skip(\n    !selected.includes(current),\n    'Not selected for Ralph screen size ' + current + '.',\n  );\n}\n","import path from 'node:path';\n\nimport { test as base } from '@playwright/test';\nimport type {\n  PlaywrightTestArgs,\n  PlaywrightTestOptions,\n  PlaywrightWorkerArgs,\n  PlaywrightWorkerOptions,\n  TestType,\n} from '@playwright/test';\n\nimport { loadConfig, resolveMode } from './config';\nimport { Recorder, REPORTER_ENV } from './recorder';\nimport { applyScreenSelection } from './screens';\nimport type { ConfigSnapshot, Ralph, RalphOptions } from './types';\n\nexport { expect, mergeTests } from '@playwright/test';\nexport type { WebRalphConfig } from '@ralphralphai/config';\nexport {\n  createRawGraphBundle,\n  prepareArtifactUpload,\n  uploadRawGraph,\n} from './upload';\nexport type {\n  PreparedUpload,\n  UploadOptions,\n  UploadReceipt,\n  RawGraphScreenshot,\n  RawGraphBundleIndex,\n} from './upload';\nexport { MANIFEST_ATTACHMENT } from './recorder';\nexport { ralphProjects, SCREEN_TAG_PREFIX } from './screens';\nexport type { RalphProjectOptions } from './screens';\nexport type { RalphReporterOptions } from './reporter';\nexport type {\n  RawGraphManifest,\n  RawGraph,\n  RawGraphFile,\n  RawPage,\n  RawNode,\n  RawAction,\n  ActionKind,\n  ActionTarget,\n  ConditionsDeclaration,\n  NodeConditions,\n  RecordedTags,\n  RecordNodeOptions,\n  TagConditions,\n  TagDeclaration,\n  TagValue,\n  ConfigSnapshot,\n  PageLayout,\n  Ralph,\n  RalphOptions,\n  TrackedElement,\n} from './types';\n\nexport type RalphFixtures = { ralph: Ralph; ralphOptions: RalphOptions };\n\ntype InternalFixtures = {\n  _ralphScreen: void;\n  _ralphRecorder: Recorder | null;\n};\ntype WorkerFixtures = { _ralphConfigs: Map<string, Promise<ConfigSnapshot>> };\n\nexport const test: TestType<\n  PlaywrightTestArgs & PlaywrightTestOptions & RalphFixtures,\n  PlaywrightWorkerArgs & PlaywrightWorkerOptions\n> = base.extend<RalphFixtures & InternalFixtures, WorkerFixtures>({\n  ralphOptions: [{}, { option: true }],\n  _ralphConfigs: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use) => {\n      await use(new Map());\n    },\n    { scope: 'worker' },\n  ],\n  _ralphScreen: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use, testInfo) => {\n      // Screen selection chooses which flows run, so it applies in every mode.\n      applyScreenSelection(testInfo);\n      await use();\n    },\n    { auto: true },\n  ],\n  _ralphRecorder: [\n    // _ralphScreen is specified here so that the playwright treat that it is\n    // a dependency of this fixture.\n    async (\n      { ralphOptions, _ralphConfigs, _ralphScreen, playwright },\n      use,\n      testInfo,\n    ) => {\n      const mode = resolveMode(ralphOptions);\n      if (!testInfo.tags.includes('@ralph') || mode === 'off') {\n        await use(null);\n        return;\n      }\n\n      // A sharded run's blob reports are merged, and uploaded by the Ralph\n      // reporter, in `playwright merge-reports`.\n      const reported =\n        process.env[REPORTER_ENV] ||\n        testInfo.config.reporter.some(([name]) => name === 'blob');\n      if (mode === 'upload' && !reported) {\n        throw new Error(\n          \"Ralph uploads one merged graph per run from its reporter. Add ['@ralphralphai/playwright/reporter'] to `reporter` in playwright.config, or use the blob reporter and merge-reports when sharding.\",\n        );\n      }\n\n      const root = testInfo.config.configFile\n        ? path.dirname(testInfo.config.configFile)\n        : process.cwd();\n\n      const key = JSON.stringify({\n        root,\n        config: ralphOptions.config,\n        configPath: ralphOptions.configPath,\n      });\n\n      let pending = _ralphConfigs.get(key);\n      if (!pending) {\n        pending = loadConfig(ralphOptions, root);\n        _ralphConfigs.set(key, pending);\n      }\n\n      const recorder = new Recorder(\n        ralphOptions,\n        await pending,\n        testInfo,\n        mode,\n        playwright,\n      );\n\n      try {\n        await use(recorder);\n      } finally {\n        await recorder.finish();\n      }\n    },\n    { auto: true, timeout: 30_000 },\n  ],\n  ralph: async ({ _ralphRecorder, ralphOptions }, use) => {\n    const checkOptIn = () => {\n      if (\n        resolveMode(ralphOptions) !== 'off' &&\n        !ralphOptions.ignoreUntaggedCalls\n      ) {\n        throw new Error('Opt this test into Ralph with the @ralph tag.');\n      }\n    };\n\n    await use(\n      _ralphRecorder ?? {\n        recordNode: async () => {\n          checkOptIn();\n        },\n        setNodeConditions: async () => {\n          checkOptIn();\n          return async () => {};\n        },\n        waitForCapture: async () => {},\n        pause: () => {},\n        resume: () => {},\n        observe: () => {\n          checkOptIn();\n        },\n      },\n    );\n  },\n  // On the context rather than per page, so popups start out reduced too.\n  contextOptions: async ({ contextOptions, ralphOptions }, use, testInfo) => {\n    const recording =\n      testInfo.tags.includes('@ralph') && resolveMode(ralphOptions) !== 'off';\n    await use(\n      recording && ralphOptions.reduceMotion\n        ? { ...contextOptions, reducedMotion: 'reduce' }\n        : contextOptions,\n    );\n  },\n  context: async ({ context, _ralphRecorder }, use) => {\n    _ralphRecorder?.observe(context);\n    try {\n      await use(context);\n    } finally {\n      // The base context fixture closes its pages next; pending recordings still need them alive.\n      await _ralphRecorder?.stopContext(context);\n    }\n  },\n});\n"],"mappings":"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"}

package/dist/index.d.mts

@@ -43,13 +43,26 @@ type RecordedTags = {
   visitorTags: Record<string, TagValue>;
   pageTags: Record<string, TagValue>;
 };
+type RecordNodeOptions = {
+  /**
+   * What the node stands for, such as `Checkout`, shown on the node in the
+   * graph. A retake without one keeps the name already given.
+   */
+  name?: string;
+  /**
+   * How the test got here from the node before, such as `Add to cart`, shown
+   * on the edge into this node beside the actions recorded on it. A retake
+   * without one keeps the label already given.
+   */
+  edgeLabel?: string;
+};
 type Ralph = {
   /**
    * Takes the node's screenshot now, replacing the one taken automatically
    * when the URL or the declared conditions changed, which can catch the page
    * mid-transition. Call it once the page shows what the node stands for.
    */
-  recordNode(page: Page): Promise<void>;
+  recordNode(page: Page, options?: RecordNodeOptions): Promise<void>;
   /**
    * Declares which visitor and page tags the node on screen stands for,
    * merged over earlier declarations until the URL changes, and records the
@@ -69,6 +82,39 @@ type TrackedElement = {
   width: number;
   height: number;
 };
+type ActionKind = 'click' | 'dblclick' | 'tap' | 'hover' | 'check' | 'uncheck' | 'fill' | 'type' | 'press' | 'selectOption' | 'setInputFiles' | 'dragTo' | 'goto' | 'goBack' | 'goForward' | 'reload';
+/** The element an action landed on, as the page showed it at that moment. */
+type ActionTarget = {
+  tag: string;
+  role?: string;
+  /** What a reader would call it: its label, its text, or its alt text. */
+  name?: string;
+  trackId?: string;
+  /** In CSS pixels from the document's top-left, the space of the screenshot of the node the action was taken on. */
+  box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+};
+type RawAction = {
+  kind: ActionKind;
+  startedAt: string;
+  /** The tab it happened in, known when it reached an element. */
+  pageId?: string;
+  /** What the test acted on, in Playwright's selector syntax. */
+  selector?: string;
+  /**
+   * The text, key, URL, option, or file names, or for `dragTo`, the
+   * selector it was dropped on. Left out for what was typed
+   * into a password or one-time-code field, or into a field the page did not
+   * report.
+   */
+  value?: string;
+  /** Absent when the page reported no element for it, e.g. `goto`. */
+  target?: ActionTarget;
+};
 type PageLayout = {
   viewport: {
     width: number;
@@ -93,6 +139,7 @@ type RawNode = {
   actualUrl: string;
   url: string;
   trigger: 'url-change' | 'condition-change' | 'explicit';
+  name?: string;
   /** What the node stands for, as the test declared it. */
   conditions?: NodeConditions;
   /** What the app's tracker had in effect, absent when the page runs none. */
@@ -105,6 +152,13 @@ type RawNode = {
    * failed nodes are included; the server walks past the ones it doesn't show.
    */
   previousNodeId?: string;
+  /** The test's words for how it got here from `previousNodeId`. */
+  edgeLabel?: string;
+  /**
+   * What the test did between requesting `previousNodeId` and this node, in
+   * order. Actions taken while recording was paused are left out.
+   */
+  actions?: RawAction[];
 } & ({
   status: 'recorded';
   recordedAt: string;
@@ -279,5 +333,5 @@ type RalphFixtures = {
 };
 declare const test: TestType<PlaywrightTestArgs & PlaywrightTestOptions & RalphFixtures, PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
 //#endregion
-export { type ConditionsDeclaration, type ConfigSnapshot, MANIFEST_ATTACHMENT, type NodeConditions, type PageLayout, type PreparedUpload, type Ralph, RalphFixtures, type RalphOptions, type RalphProjectOptions, type RalphReporterOptions, type RawGraph, type RawGraphBundleIndex, type RawGraphFile, type RawGraphManifest, type RawGraphScreenshot, type RawNode, type RawPage, type RecordedTags, SCREEN_TAG_PREFIX, type TagConditions, type TagDeclaration, type TagValue, type TrackedElement, type UploadOptions, type UploadReceipt, type WebRalphConfig, createRawGraphBundle, expect, mergeTests, prepareArtifactUpload, ralphProjects, test, uploadRawGraph };
+export { type ActionKind, type ActionTarget, type ConditionsDeclaration, type ConfigSnapshot, MANIFEST_ATTACHMENT, type NodeConditions, type PageLayout, type PreparedUpload, type Ralph, RalphFixtures, type RalphOptions, type RalphProjectOptions, type RalphReporterOptions, type RawAction, type RawGraph, type RawGraphBundleIndex, type RawGraphFile, type RawGraphManifest, type RawGraphScreenshot, type RawNode, type RawPage, type RecordNodeOptions, type RecordedTags, SCREEN_TAG_PREFIX, type TagConditions, type TagDeclaration, type TagValue, type TrackedElement, type UploadOptions, type UploadReceipt, type WebRalphConfig, createRawGraphBundle, expect, mergeTests, prepareArtifactUpload, ralphProjects, test, uploadRawGraph };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { c as MANIFEST_ATTACHMENT, f as loadConfig, i as prepareArtifactUpload, m as resolveMode, p as loadConfigSync, r as createRawGraphBundle, s as uploadRawGraph, u as Recorder } from "./upload-BENmMj46.mjs";
+import { c as MANIFEST_ATTACHMENT, f as loadConfig, i as prepareArtifactUpload, m as resolveMode, p as loadConfigSync, r as createRawGraphBundle, s as uploadRawGraph, u as Recorder } from "./upload-D5hePvmA.mjs";
 import path from "node:path";
 import { expect, mergeTests, test as test$1 } from "@playwright/test";
 //#region src/screens.ts
@@ -61,7 +61,7 @@ const test = test$1.extend({
 		applyScreenSelection(testInfo);
 		await use();
 	}, { auto: true }],
-	_ralphRecorder: [async ({ ralphOptions, _ralphConfigs, _ralphScreen }, use, testInfo) => {
+	_ralphRecorder: [async ({ ralphOptions, _ralphConfigs, _ralphScreen, playwright }, use, testInfo) => {
 		const mode = resolveMode(ralphOptions);
 		if (!testInfo.tags.includes("@ralph") || mode === "off") {
 			await use(null);
@@ -80,7 +80,7 @@ const test = test$1.extend({
 			pending = loadConfig(ralphOptions, root);
 			_ralphConfigs.set(key, pending);
 		}
-		const recorder = new Recorder(ralphOptions, await pending, testInfo, mode);
+		const recorder = new Recorder(ralphOptions, await pending, testInfo, mode, playwright);
 		try {
 			await use(recorder);
 		} finally {

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["base"],"sources":["../src/screens.ts","../src/index.ts"],"sourcesContent":["import type {\n  PlaywrightTestOptions,\n  PlaywrightWorkerOptions,\n  Project,\n  TestInfo,\n} from '@playwright/test';\nimport type { ScreenSize } from '@ralphralphai/config';\n\nimport { loadConfigSync } from './config';\nimport type { RalphOptions } from './types';\n\ntype RalphProject = Project<\n  PlaywrightTestOptions & { ralphOptions: RalphOptions },\n  PlaywrightWorkerOptions\n>;\n\nexport const SCREEN_TAG_PREFIX = '@ralph-screen:';\n\nexport type RalphProjectOptions = Pick<\n  RalphOptions,\n  'config' | 'configPath'\n> & {\n  /** Resolves a relative `configPath`; defaults to the current directory. */\n  root?: string;\n};\n\ntype ScreenMetadata = { screenSize: ScreenSize; screenSizes: ScreenSize[] };\n\nexport function screenLabel(size: ScreenSize): string {\n  return size.width + 'x' + size.height;\n}\n\n/**\n * Expands `base` into one project per `screenSizes` entry of the Ralph config.\n * Each project's viewport is that screen size.\n */\nexport function ralphProjects(\n  base: RalphProject = {},\n  options: RalphProjectOptions = {},\n): RalphProject[] {\n  const { screenSizes } = loadConfigSync(\n    options,\n    options.root ?? process.cwd(),\n  ).config;\n  if (!screenSizes.length) {\n    throw new Error('The Ralph config declares no screenSizes.');\n  }\n  return screenSizes.map((screenSize) => {\n    const label = screenLabel(screenSize);\n    const ralph: ScreenMetadata = { screenSize, screenSizes };\n    return {\n      ...base,\n      name: base.name ? base.name + ' ' + label : label,\n      use: {\n        ...base.use,\n        viewport: { width: screenSize.width, height: screenSize.height },\n      },\n      metadata: { ...base.metadata, ralph },\n    };\n  });\n}\n\n/**\n * Skips a test whose `@ralph-screen:WxH` tags exclude the current project's\n * screen size. Untagged tests run at every size; other projects are untouched.\n */\nexport function applyScreenSelection(testInfo: TestInfo): void {\n  const selected = testInfo.tags\n    .filter((tag) => tag.startsWith(SCREEN_TAG_PREFIX))\n    .map((tag) => tag.slice(SCREEN_TAG_PREFIX.length));\n  const metadata = (testInfo.project.metadata as { ralph?: ScreenMetadata })\n    .ralph;\n  if (!selected.length || !metadata) {\n    return;\n  }\n  const known = metadata.screenSizes.map(screenLabel);\n  const unknown = selected.filter((label) => !known.includes(label));\n  if (unknown.length) {\n    throw new Error(\n      'Unknown Ralph screen size ' +\n        unknown.join(', ') +\n        '; the config declares ' +\n        known.join(', ') +\n        '.',\n    );\n  }\n  const current = screenLabel(metadata.screenSize);\n  testInfo.skip(\n    !selected.includes(current),\n    'Not selected for Ralph screen size ' + current + '.',\n  );\n}\n","import path from 'node:path';\n\nimport { test as base } from '@playwright/test';\nimport type {\n  PlaywrightTestArgs,\n  PlaywrightTestOptions,\n  PlaywrightWorkerArgs,\n  PlaywrightWorkerOptions,\n  TestType,\n} from '@playwright/test';\n\nimport { loadConfig, resolveMode } from './config';\nimport { Recorder, REPORTER_ENV } from './recorder';\nimport { applyScreenSelection } from './screens';\nimport type { ConfigSnapshot, Ralph, RalphOptions } from './types';\n\nexport { expect, mergeTests } from '@playwright/test';\nexport type { WebRalphConfig } from '@ralphralphai/config';\nexport {\n  createRawGraphBundle,\n  prepareArtifactUpload,\n  uploadRawGraph,\n} from './upload';\nexport type {\n  PreparedUpload,\n  UploadOptions,\n  UploadReceipt,\n  RawGraphScreenshot,\n  RawGraphBundleIndex,\n} from './upload';\nexport { MANIFEST_ATTACHMENT } from './recorder';\nexport { ralphProjects, SCREEN_TAG_PREFIX } from './screens';\nexport type { RalphProjectOptions } from './screens';\nexport type { RalphReporterOptions } from './reporter';\nexport type {\n  RawGraphManifest,\n  RawGraph,\n  RawGraphFile,\n  RawPage,\n  RawNode,\n  ConditionsDeclaration,\n  NodeConditions,\n  RecordedTags,\n  TagConditions,\n  TagDeclaration,\n  TagValue,\n  ConfigSnapshot,\n  PageLayout,\n  Ralph,\n  RalphOptions,\n  TrackedElement,\n} from './types';\n\nexport type RalphFixtures = { ralph: Ralph; ralphOptions: RalphOptions };\n\ntype InternalFixtures = {\n  _ralphScreen: void;\n  _ralphRecorder: Recorder | null;\n};\ntype WorkerFixtures = { _ralphConfigs: Map<string, Promise<ConfigSnapshot>> };\n\nexport const test: TestType<\n  PlaywrightTestArgs & PlaywrightTestOptions & RalphFixtures,\n  PlaywrightWorkerArgs & PlaywrightWorkerOptions\n> = base.extend<RalphFixtures & InternalFixtures, WorkerFixtures>({\n  ralphOptions: [{}, { option: true }],\n  _ralphConfigs: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use) => {\n      await use(new Map());\n    },\n    { scope: 'worker' },\n  ],\n  _ralphScreen: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use, testInfo) => {\n      // Screen selection chooses which flows run, so it applies in every mode.\n      applyScreenSelection(testInfo);\n      await use();\n    },\n    { auto: true },\n  ],\n  _ralphRecorder: [\n    // _ralphScreen is specified here so that the playwright treat that it is\n    // a dependency of this fixture.\n    async ({ ralphOptions, _ralphConfigs, _ralphScreen }, use, testInfo) => {\n      const mode = resolveMode(ralphOptions);\n      if (!testInfo.tags.includes('@ralph') || mode === 'off') {\n        await use(null);\n        return;\n      }\n\n      // A sharded run's blob reports are merged, and uploaded by the Ralph\n      // reporter, in `playwright merge-reports`.\n      const reported =\n        process.env[REPORTER_ENV] ||\n        testInfo.config.reporter.some(([name]) => name === 'blob');\n      if (mode === 'upload' && !reported) {\n        throw new Error(\n          \"Ralph uploads one merged graph per run from its reporter. Add ['@ralphralphai/playwright/reporter'] to `reporter` in playwright.config, or use the blob reporter and merge-reports when sharding.\",\n        );\n      }\n\n      const root = testInfo.config.configFile\n        ? path.dirname(testInfo.config.configFile)\n        : process.cwd();\n\n      const key = JSON.stringify({\n        root,\n        config: ralphOptions.config,\n        configPath: ralphOptions.configPath,\n      });\n\n      let pending = _ralphConfigs.get(key);\n      if (!pending) {\n        pending = loadConfig(ralphOptions, root);\n        _ralphConfigs.set(key, pending);\n      }\n\n      const recorder = new Recorder(\n        ralphOptions,\n        await pending,\n        testInfo,\n        mode,\n      );\n\n      try {\n        await use(recorder);\n      } finally {\n        await recorder.finish();\n      }\n    },\n    { auto: true, timeout: 30_000 },\n  ],\n  ralph: async ({ _ralphRecorder, ralphOptions }, use) => {\n    const checkOptIn = () => {\n      if (\n        resolveMode(ralphOptions) !== 'off' &&\n        !ralphOptions.ignoreUntaggedCalls\n      ) {\n        throw new Error('Opt this test into Ralph with the @ralph tag.');\n      }\n    };\n\n    await use(\n      _ralphRecorder ?? {\n        recordNode: async () => {\n          checkOptIn();\n        },\n        setNodeConditions: async () => {\n          checkOptIn();\n          return async () => {};\n        },\n        waitForCapture: async () => {},\n        pause: () => {},\n        resume: () => {},\n        observe: () => {\n          checkOptIn();\n        },\n      },\n    );\n  },\n  // On the context rather than per page, so popups start out reduced too.\n  contextOptions: async ({ contextOptions, ralphOptions }, use, testInfo) => {\n    const recording =\n      testInfo.tags.includes('@ralph') && resolveMode(ralphOptions) !== 'off';\n    await use(\n      recording && ralphOptions.reduceMotion\n        ? { ...contextOptions, reducedMotion: 'reduce' }\n        : contextOptions,\n    );\n  },\n  context: async ({ context, _ralphRecorder }, use) => {\n    _ralphRecorder?.observe(context);\n    try {\n      await use(context);\n    } finally {\n      // The base context fixture closes its pages next; pending recordings still need them alive.\n      await _ralphRecorder?.stopContext(context);\n    }\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["base"],"sources":["../src/screens.ts","../src/index.ts"],"sourcesContent":["import type {\n  PlaywrightTestOptions,\n  PlaywrightWorkerOptions,\n  Project,\n  TestInfo,\n} from '@playwright/test';\nimport type { ScreenSize } from '@ralphralphai/config';\n\nimport { loadConfigSync } from './config';\nimport type { RalphOptions } from './types';\n\ntype RalphProject = Project<\n  PlaywrightTestOptions & { ralphOptions: RalphOptions },\n  PlaywrightWorkerOptions\n>;\n\nexport const SCREEN_TAG_PREFIX = '@ralph-screen:';\n\nexport type RalphProjectOptions = Pick<\n  RalphOptions,\n  'config' | 'configPath'\n> & {\n  /** Resolves a relative `configPath`; defaults to the current directory. */\n  root?: string;\n};\n\ntype ScreenMetadata = { screenSize: ScreenSize; screenSizes: ScreenSize[] };\n\nexport function screenLabel(size: ScreenSize): string {\n  return size.width + 'x' + size.height;\n}\n\n/**\n * Expands `base` into one project per `screenSizes` entry of the Ralph config.\n * Each project's viewport is that screen size.\n */\nexport function ralphProjects(\n  base: RalphProject = {},\n  options: RalphProjectOptions = {},\n): RalphProject[] {\n  const { screenSizes } = loadConfigSync(\n    options,\n    options.root ?? process.cwd(),\n  ).config;\n  if (!screenSizes.length) {\n    throw new Error('The Ralph config declares no screenSizes.');\n  }\n  return screenSizes.map((screenSize) => {\n    const label = screenLabel(screenSize);\n    const ralph: ScreenMetadata = { screenSize, screenSizes };\n    return {\n      ...base,\n      name: base.name ? base.name + ' ' + label : label,\n      use: {\n        ...base.use,\n        viewport: { width: screenSize.width, height: screenSize.height },\n      },\n      metadata: { ...base.metadata, ralph },\n    };\n  });\n}\n\n/**\n * Skips a test whose `@ralph-screen:WxH` tags exclude the current project's\n * screen size. Untagged tests run at every size; other projects are untouched.\n */\nexport function applyScreenSelection(testInfo: TestInfo): void {\n  const selected = testInfo.tags\n    .filter((tag) => tag.startsWith(SCREEN_TAG_PREFIX))\n    .map((tag) => tag.slice(SCREEN_TAG_PREFIX.length));\n  const metadata = (testInfo.project.metadata as { ralph?: ScreenMetadata })\n    .ralph;\n  if (!selected.length || !metadata) {\n    return;\n  }\n  const known = metadata.screenSizes.map(screenLabel);\n  const unknown = selected.filter((label) => !known.includes(label));\n  if (unknown.length) {\n    throw new Error(\n      'Unknown Ralph screen size ' +\n        unknown.join(', ') +\n        '; the config declares ' +\n        known.join(', ') +\n        '.',\n    );\n  }\n  const current = screenLabel(metadata.screenSize);\n  testInfo.skip(\n    !selected.includes(current),\n    'Not selected for Ralph screen size ' + current + '.',\n  );\n}\n","import path from 'node:path';\n\nimport { test as base } from '@playwright/test';\nimport type {\n  PlaywrightTestArgs,\n  PlaywrightTestOptions,\n  PlaywrightWorkerArgs,\n  PlaywrightWorkerOptions,\n  TestType,\n} from '@playwright/test';\n\nimport { loadConfig, resolveMode } from './config';\nimport { Recorder, REPORTER_ENV } from './recorder';\nimport { applyScreenSelection } from './screens';\nimport type { ConfigSnapshot, Ralph, RalphOptions } from './types';\n\nexport { expect, mergeTests } from '@playwright/test';\nexport type { WebRalphConfig } from '@ralphralphai/config';\nexport {\n  createRawGraphBundle,\n  prepareArtifactUpload,\n  uploadRawGraph,\n} from './upload';\nexport type {\n  PreparedUpload,\n  UploadOptions,\n  UploadReceipt,\n  RawGraphScreenshot,\n  RawGraphBundleIndex,\n} from './upload';\nexport { MANIFEST_ATTACHMENT } from './recorder';\nexport { ralphProjects, SCREEN_TAG_PREFIX } from './screens';\nexport type { RalphProjectOptions } from './screens';\nexport type { RalphReporterOptions } from './reporter';\nexport type {\n  RawGraphManifest,\n  RawGraph,\n  RawGraphFile,\n  RawPage,\n  RawNode,\n  RawAction,\n  ActionKind,\n  ActionTarget,\n  ConditionsDeclaration,\n  NodeConditions,\n  RecordedTags,\n  RecordNodeOptions,\n  TagConditions,\n  TagDeclaration,\n  TagValue,\n  ConfigSnapshot,\n  PageLayout,\n  Ralph,\n  RalphOptions,\n  TrackedElement,\n} from './types';\n\nexport type RalphFixtures = { ralph: Ralph; ralphOptions: RalphOptions };\n\ntype InternalFixtures = {\n  _ralphScreen: void;\n  _ralphRecorder: Recorder | null;\n};\ntype WorkerFixtures = { _ralphConfigs: Map<string, Promise<ConfigSnapshot>> };\n\nexport const test: TestType<\n  PlaywrightTestArgs & PlaywrightTestOptions & RalphFixtures,\n  PlaywrightWorkerArgs & PlaywrightWorkerOptions\n> = base.extend<RalphFixtures & InternalFixtures, WorkerFixtures>({\n  ralphOptions: [{}, { option: true }],\n  _ralphConfigs: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use) => {\n      await use(new Map());\n    },\n    { scope: 'worker' },\n  ],\n  _ralphScreen: [\n    // Playwright requires destructuring here to discover fixture dependencies.\n    // oxlint-disable-next-line no-empty-pattern\n    async ({}, use, testInfo) => {\n      // Screen selection chooses which flows run, so it applies in every mode.\n      applyScreenSelection(testInfo);\n      await use();\n    },\n    { auto: true },\n  ],\n  _ralphRecorder: [\n    // _ralphScreen is specified here so that the playwright treat that it is\n    // a dependency of this fixture.\n    async (\n      { ralphOptions, _ralphConfigs, _ralphScreen, playwright },\n      use,\n      testInfo,\n    ) => {\n      const mode = resolveMode(ralphOptions);\n      if (!testInfo.tags.includes('@ralph') || mode === 'off') {\n        await use(null);\n        return;\n      }\n\n      // A sharded run's blob reports are merged, and uploaded by the Ralph\n      // reporter, in `playwright merge-reports`.\n      const reported =\n        process.env[REPORTER_ENV] ||\n        testInfo.config.reporter.some(([name]) => name === 'blob');\n      if (mode === 'upload' && !reported) {\n        throw new Error(\n          \"Ralph uploads one merged graph per run from its reporter. Add ['@ralphralphai/playwright/reporter'] to `reporter` in playwright.config, or use the blob reporter and merge-reports when sharding.\",\n        );\n      }\n\n      const root = testInfo.config.configFile\n        ? path.dirname(testInfo.config.configFile)\n        : process.cwd();\n\n      const key = JSON.stringify({\n        root,\n        config: ralphOptions.config,\n        configPath: ralphOptions.configPath,\n      });\n\n      let pending = _ralphConfigs.get(key);\n      if (!pending) {\n        pending = loadConfig(ralphOptions, root);\n        _ralphConfigs.set(key, pending);\n      }\n\n      const recorder = new Recorder(\n        ralphOptions,\n        await pending,\n        testInfo,\n        mode,\n        playwright,\n      );\n\n      try {\n        await use(recorder);\n      } finally {\n        await recorder.finish();\n      }\n    },\n    { auto: true, timeout: 30_000 },\n  ],\n  ralph: async ({ _ralphRecorder, ralphOptions }, use) => {\n    const checkOptIn = () => {\n      if (\n        resolveMode(ralphOptions) !== 'off' &&\n        !ralphOptions.ignoreUntaggedCalls\n      ) {\n        throw new Error('Opt this test into Ralph with the @ralph tag.');\n      }\n    };\n\n    await use(\n      _ralphRecorder ?? {\n        recordNode: async () => {\n          checkOptIn();\n        },\n        setNodeConditions: async () => {\n          checkOptIn();\n          return async () => {};\n        },\n        waitForCapture: async () => {},\n        pause: () => {},\n        resume: () => {},\n        observe: () => {\n          checkOptIn();\n        },\n      },\n    );\n  },\n  // On the context rather than per page, so popups start out reduced too.\n  contextOptions: async ({ contextOptions, ralphOptions }, use, testInfo) => {\n    const recording =\n      testInfo.tags.includes('@ralph') && resolveMode(ralphOptions) !== 'off';\n    await use(\n      recording && ralphOptions.reduceMotion\n        ? { ...contextOptions, reducedMotion: 'reduce' }\n        : contextOptions,\n    );\n  },\n  context: async ({ context, _ralphRecorder }, use) => {\n    _ralphRecorder?.observe(context);\n    try {\n      await use(context);\n    } finally {\n      // The base context fixture closes its pages next; pending recordings still need them alive.\n      await _ralphRecorder?.stopContext(context);\n    }\n  },\n});\n"],"mappings":"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"}

package/dist/reporter.cjs

@@ -1,4 +1,4 @@
-const require_upload = require("./upload-Cs6oMofL.cjs");
+const require_upload = require("./upload-BvAi7mMY.cjs");
 let node_path = require("node:path");
 node_path = require_upload.__toESM(node_path, 1);
 let node_fs_promises = require("node:fs/promises");

package/dist/reporter.mjs

@@ -1,4 +1,4 @@
-import { a as resolveUploadOptions, c as MANIFEST_ATTACHMENT, d as version, i as prepareArtifactUpload, l as REPORTER_ENV, m as resolveMode, n as bundleImagePath, o as resultLink, s as uploadRawGraph, t as RAW_GRAPH_BUNDLE_INDEX } from "./upload-BENmMj46.mjs";
+import { a as resolveUploadOptions, c as MANIFEST_ATTACHMENT, d as version, i as prepareArtifactUpload, l as REPORTER_ENV, m as resolveMode, n as bundleImagePath, o as resultLink, s as uploadRawGraph, t as RAW_GRAPH_BUNDLE_INDEX } from "./upload-D5hePvmA.mjs";
 import path from "node:path";
 import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { randomUUID } from "node:crypto";