Merge pull request #109 from joomcode/fix/screenshot-metadata

fix: add more fields to screenshot metadata

Author: uid11

autotests/configurator/matchScreenshot.ts

@@ -23,7 +23,7 @@ export const matchScreenshot: MatchScreenshot = {
 
     return `https://joomcode.github.io/e2ed/${path.slice(-2).join('/')}` as Url;
   },
-  readScreenshot: (screenshotId) => {
+  readScreenshot: (screenshotId, _meta) => {
     const path = getPath(screenshotId);
     const screenshotPath = join(...path) as FilePathFromRoot;
 

package-lock.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@playwright/browser-chromium": "1.50.1",
-    "@types/node": "22.13.4",
+    "@types/node": "22.13.5",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "assert-modules-support-case-insensitive-fs": "1.0.1",
@@ -44,7 +44,7 @@
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-typescript-sort-keys": "3.3.0",
     "husky": "9.1.7",
-    "prettier": "3.5.1",
+    "prettier": "3.5.2",
     "typescript": "5.7.3"
   },
   "peerDependencies": {

package.json

@@ -16,7 +16,11 @@ export type MatchScreenshotConfig<TestMeta = TestMetaPlaceholder> = Readonly<{
   /**
    * Reads screenshot by `screenshotId`.
    */
-  readScreenshot: (this: void, screenshotId: string) => Promise<Uint8Array | undefined>;
+  readScreenshot: (
+    this: void,
+    screenshotId: string,
+    meta: ScreenshotMeta<TestMeta>,
+  ) => Promise<Uint8Array | undefined>;
 
   /**
    * Writes screenshot by `screenshotId` and optional context info.
@@ -32,14 +36,16 @@ export type MatchScreenshotConfig<TestMeta = TestMetaPlaceholder> = Readonly<{
  * General screenshot metadata (like test name, assert description, etc.).
  */
 export type ScreenshotMeta<TestMeta = TestMetaPlaceholder> = Readonly<{
+  actual: string | undefined;
   description: string;
-  isDiff: boolean;
+  expected: string | undefined;
   options: ToMatchScreenshotOptions;
+  pageUrl: Url;
   pathToPack: string;
   runLabel: RunLabel;
   selector: string;
   testStaticOptions: TestStaticOptions<TestMeta>;
-  writeTimeInMs: number;
+  timeInMs: number;
 }>;
 
 /**

src/types/matchScreenshot.ts

@@ -0,0 +1,35 @@
+import {getTestStaticOptions} from '../../context/testStaticOptions';
+import {getPlaywrightPage} from '../../useContext';
+
+import {getPathToPack, getRunLabel} from '../environment';
+
+import type {ScreenshotMeta, Selector, ToMatchScreenshotOptions, Url} from '../../types/internal';
+
+type Options = Readonly<{
+  actualValue: Selector;
+  description: string;
+  expectedScreenshotId: string;
+  options: ToMatchScreenshotOptions;
+}>;
+
+/**
+ * Get screenshot metadata.
+ * @internal
+ */
+export const getScreenshotMeta = ({
+  actualValue,
+  description,
+  expectedScreenshotId,
+  options,
+}: Options): ScreenshotMeta => ({
+  actual: undefined,
+  description,
+  expected: expectedScreenshotId !== '' ? expectedScreenshotId : undefined,
+  options,
+  pageUrl: getPlaywrightPage().url() as Url,
+  pathToPack: getPathToPack(),
+  runLabel: getRunLabel(),
+  selector: actualValue.description,
+  testStaticOptions: getTestStaticOptions(),
+  timeInMs: Date.now(),
+});

src/utils/expect/getScreenshotMeta.ts

@@ -8,21 +8,15 @@ import {
   INTERNAL_REPORTS_DIRECTORY_PATH,
 } from '../../constants/internal';
 import {getOutputDirectoryName} from '../../context/outputDirectoryName';
-import {getTestStaticOptions} from '../../context/testStaticOptions';
 
 import {getFullPackConfig} from '../config';
-import {getPathToPack, getRunLabel} from '../environment';
 import {E2edError} from '../error';
 import {writeFile} from '../fs';
 import {setReadonlyProperty} from '../setReadonlyProperty';
 
-import type {
-  FilePathFromRoot,
-  ScreenshotMeta,
-  Selector,
-  ToMatchScreenshotOptions,
-  Url,
-} from '../../types/internal';
+import {getScreenshotMeta} from './getScreenshotMeta';
+
+import type {FilePathFromRoot, Selector, ToMatchScreenshotOptions, Url} from '../../types/internal';
 
 import type {Expect} from './Expect';
 
@@ -70,12 +64,14 @@ export const toMatchScreenshot = async (
 
   setReadonlyProperty(context, 'additionalLogFields', additionalLogFields);
 
+  const meta = getScreenshotMeta({actualValue, description, expectedScreenshotId, options});
+
   let expectedScreenshotFound = false;
 
   if (expectedScreenshotId) {
     additionalLogFields.expectedScreenshotUrl = getScreenshotUrlById(expectedScreenshotId);
 
-    const expectedScreenshot = await readScreenshot(expectedScreenshotId);
+    const expectedScreenshot = await readScreenshot(expectedScreenshotId, meta);
 
     if (expectedScreenshot !== undefined) {
       expectedScreenshotFound = true;
@@ -99,16 +95,6 @@ export const toMatchScreenshot = async (
   }
 
   const {mask = [], ...restOptions} = options;
-  const meta: ScreenshotMeta = {
-    description,
-    isDiff: false,
-    options,
-    pathToPack: getPathToPack(),
-    runLabel: getRunLabel(),
-    selector: actualValue.description,
-    testStaticOptions: getTestStaticOptions(),
-    writeTimeInMs: Date.now(),
-  };
 
   try {
     const playwrightLocator = actualValue.getPlaywrightLocator();
@@ -131,7 +117,10 @@ export const toMatchScreenshot = async (
     additionalLogFields.actualScreenshotUrl = getScreenshotUrlById(actualScreenshotId);
 
     const diffScreenshot = await readFile(diffScreenshotPath);
-    const diffScreenshotId = await writeScreenshot(diffScreenshot, {...meta, isDiff: true});
+    const diffScreenshotId = await writeScreenshot(diffScreenshot, {
+      ...meta,
+      actual: actualScreenshotId,
+    });
 
     additionalLogFields.diffScreenshotId = diffScreenshotId;
     additionalLogFields.diffScreenshotUrl = getScreenshotUrlById(diffScreenshotId);

src/utils/expect/toMatchScreenshot.ts

@@ -25,7 +25,7 @@ const frozenCompilerOptions: CompilerOptions = {
   resolveJsonModule: true,
   rootDir: '.',
   skipLibCheck: true,
-  target: ScriptTarget.ES2023,
+  target: ScriptTarget.ES2024,
   types: ['node'],
 };
 

src/utils/packCompiler/getCompilerOptions.ts

@@ -15,7 +15,7 @@ export function renderTestRunError(runError: RunError): SafeHtml {
   }
 
   // eslint-disable-next-line no-control-regex
-  const stylesRegexp = /(\\x1B\[)|(\x1B\[)[\d;]+m/gi;
+  const stylesRegexp = /(\\x1B\[)|(\x1B\[)|(\\u001b\[)[\d;]+m/gi;
 
   const runErrorWithoutStyle = String(runError).replace(stylesRegexp, '');
 

src/utils/report/client/render/renderTestRunError.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-control-regex
-const stylesRegexp = /\x1B\[[\d;]+m/gi;
+const stylesRegexp = /(\\x1B\[)|(\x1B\[)|(\\u001b\[)[\d;]+m/gi;
 
 /**
  * Removes console (terminal) styles from a string (like `\x1B[3m...`).

src/utils/valueToString/removeStyleFromString.ts

@@ -27,7 +27,7 @@
     "skipLibCheck": false,
     "strict": true,
     "stripInternal": true,
-    "target": "ES2023",
+    "target": "ES2024",
     "types": ["node"],
     "useDefineForClassFields": true
   },