creevey 0.9.1 → 0.10.0-beta.0

package/src/server/selenium/selenoid.ts

@@ -1,16 +1,17 @@
 import path from 'path';
 import assert from 'assert';
-import cluster from 'cluster';
 import { lstatSync, existsSync } from 'fs';
 import { mkdir, writeFile, copyFile } from 'fs/promises';
 import sh from 'shelljs';
-import { Octokit } from '@octokit/core';
-import { Config, BrowserConfig } from '../../types.js';
+import { Config, BrowserConfigObject } from '../../types.js';
 import { downloadBinary, getCreeveyCache } from '../utils.js';
 import { pullImages, runImage } from '../docker.js';
 import { subscribeOn } from '../messages.js';
 
-async function createSelenoidConfig(browsers: BrowserConfig[], { useDocker }: { useDocker: boolean }): Promise<string> {
+async function createSelenoidConfig(
+  browsers: BrowserConfigObject[],
+  { useDocker }: { useDocker: boolean },
+): Promise<string> {
   const selenoidConfig: Partial<
     Record<
       string,
@@ -20,7 +21,7 @@ async function createSelenoidConfig(browsers: BrowserConfig[], { useDocker }: {
       }
     >
   > = {};
-  const cacheDir = getCreeveyCache();
+  const cacheDir = await getCreeveyCache();
 
   assert(cacheDir, "Couldn't get cache directory");
 
@@ -29,9 +30,7 @@ async function createSelenoidConfig(browsers: BrowserConfig[], { useDocker }: {
   browsers.forEach(
     ({
       browserName,
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
-      version = 'latest',
-      browserVersion = version,
+      browserVersion = 'latest',
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
       webdriverCommand = [],
     }) => {
@@ -58,6 +57,8 @@ async function downloadSelenoidBinary(destination: string): Promise<void> {
     linux: 'selenoid_linux_amd64',
     win32: 'selenoid_windows_amd64.exe',
   };
+  // TODO Replace with `import from`
+  const { Octokit } = await import('@octokit/core');
   const octokit = new Octokit();
   const response = await octokit.request('GET /repos/{owner}/{repo}/releases/latest', {
     owner: 'aerokube',
@@ -79,11 +80,7 @@ async function downloadSelenoidBinary(destination: string): Promise<void> {
 }
 
 export async function startSelenoidStandalone(config: Config, debug: boolean): Promise<void> {
-  config.gridUrl = 'http://localhost:4444/wd/hub';
-
-  if (cluster.isWorker) return;
-
-  const browsers = (Object.values(config.browsers) as BrowserConfig[]).filter((browser) => !browser.gridUrl);
+  const browsers = (Object.values(config.browsers) as BrowserConfigObject[]).filter((browser) => !browser.gridUrl);
   const selenoidConfigDir = await createSelenoidConfig(browsers, { useDocker: false });
   const binaryPath = path.join(selenoidConfigDir, process.platform == 'win32' ? 'selenoid.exe' : 'selenoid');
   if (config.selenoidPath) {
@@ -113,16 +110,14 @@ export async function startSelenoidStandalone(config: Config, debug: boolean): P
 }
 
 export async function startSelenoidContainer(config: Config, debug: boolean): Promise<string> {
-  const browsers = (Object.values(config.browsers) as BrowserConfig[]).filter((browser) => !browser.gridUrl);
+  const browsers = (Object.values(config.browsers) as BrowserConfigObject[]).filter((browser) => !browser.gridUrl);
   const images: string[] = [];
   let limit = 0;
 
   browsers.forEach(
     ({
       browserName,
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
-      version = 'latest',
-      browserVersion = version,
+      browserVersion = 'latest',
       limit: browserLimit = 1,
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
     }) => {

package/src/server/selenium/webdriver.ts

@@ -0,0 +1,136 @@
+import { Args } from '@storybook/csf';
+import { Config, StorybookGlobals, StoryInput, StoriesRaw, Options } from '../../types.js';
+import { subscribeOn } from '../messages.js';
+import { CreeveyWebdriverBase } from '../webdriver.js';
+import type { InternalBrowser } from './internal.js';
+import { logger } from '../logger.js';
+
+declare global {
+  interface Window {
+    __CREEVEY_RESTORE_SCROLL__?: () => void;
+    __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
+    __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
+    __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
+  }
+}
+
+// TODO Update context interface through references
+export class SeleniumWebdriver extends CreeveyWebdriverBase {
+  #browser: InternalBrowser | null = null;
+  #browserName: string;
+  #gridUrl: string;
+  #config: Config;
+  #options: Options;
+  constructor(browser: string, gridUrl: string, config: Config, options: Options) {
+    super();
+
+    this.#browserName = browser;
+    this.#gridUrl = gridUrl;
+    this.#config = config;
+    this.#options = options;
+
+    subscribeOn('shutdown', () => {
+      void this.#browser?.closeBrowser().finally(() => process.exit());
+      this.#browser = null;
+    });
+  }
+
+  get browser() {
+    return this.#browser?.browser;
+  }
+
+  getSessionId(): Promise<string> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.browser.getSession().then((session) => session.getId());
+  }
+
+  async openBrowser(fresh = false): Promise<SeleniumWebdriver | null> {
+    if (this.#browser) {
+      if (fresh) {
+        await this.#browser.closeBrowser();
+        this.#browser = null;
+      } else {
+        return this;
+      }
+    }
+
+    const internalModule = await (async () => {
+      try {
+        return await import('./internal.js');
+      } catch (error) {
+        logger.error(error);
+        return null;
+      }
+    })();
+
+    if (!internalModule) return null;
+
+    const { InternalBrowser } = internalModule;
+    const browser = await InternalBrowser.getBrowser(this.#browserName, this.#gridUrl, this.#config, this.#options);
+
+    if (!browser) return null;
+
+    this.#browser = browser;
+
+    return this;
+  }
+
+  async closeBrowser(): Promise<void> {
+    if (this.#browser) {
+      await this.#browser.closeBrowser();
+      this.#browser = null;
+    }
+  }
+
+  async loadStoriesFromBrowser(): Promise<StoriesRaw> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.loadStoriesFromBrowser();
+  }
+
+  protected async takeScreenshot(
+    captureElement: string | null,
+    ignoreElements?: string | string[] | null,
+  ): Promise<Buffer> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.takeScreenshot(captureElement, ignoreElements);
+  }
+
+  protected waitForComplete(callback: (isCompleted: boolean) => void): void {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    this.#browser.waitForComplete(callback);
+  }
+
+  protected async selectStory(id: string, waitForReady?: boolean): Promise<boolean> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.selectStory(id, waitForReady);
+  }
+
+  protected async updateStoryArgs(story: StoryInput, updatedArgs: Args): Promise<void> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.updateStoryArgs(story, updatedArgs);
+  }
+}

package/src/server/stories.ts

@@ -2,7 +2,6 @@ import path from 'path';
 import { mkdirSync, writeFileSync } from 'fs';
 import { createHash } from 'crypto';
 import _ from 'lodash';
-import type { Context } from 'mocha';
 import type {
   TestData,
   CreeveyStoryParams,
@@ -11,26 +10,27 @@ import type {
   ServerTest,
   StoryInput,
   CreeveyTestFunction,
+  CreeveyTestContext,
 } from '../types.js';
 import { isDefined, isFunction } from '../types.js';
 import { shouldSkip } from './utils.js';
 
 function storyTestFabric(delay?: number, testFn?: CreeveyTestFunction) {
-  return async function storyTest(this: Context) {
+  return async function storyTest(context: CreeveyTestContext) {
     if (delay) await new Promise((resolve) => setTimeout(resolve, delay));
     await (testFn
-      ? testFn.call(this)
-      : this.screenshots.length > 0
-        ? this.expect(
-            this.screenshots.reduce(
+      ? testFn(context)
+      : context.screenshots.length > 0
+        ? context.matchImages(
+            context.screenshots.reduce(
               (screenshots, { imageName, screenshot }, index) => ({
                 ...screenshots,
                 [imageName ?? `screenshot_${index}`]: screenshot,
               }),
               {},
             ),
-          ).to.matchImages()
-        : this.expect(await this.takeScreenshot()).to.matchImage());
+          )
+        : context.matchImage(await context.takeScreenshot()));
   };
 }
 
@@ -41,10 +41,17 @@ function createCreeveyTest(
   testName?: string,
 ): TestData {
   const { title, name, id: storyId } = storyMeta;
-  const path = [title, name, testName, browser].filter(isDefined);
+  const testPath = [title, name, testName, browser].filter(isDefined);
   const skip = skipOptions ? shouldSkip(browser, { title, name }, skipOptions, testName) : false;
-  const id = createHash('sha1').update(path.join('/')).digest('hex');
-  return { id, skip, browser, testName, storyPath: [...title.split('/').map((x) => x.trim()), name], storyId };
+  const id = createHash('sha1').update(testPath.join('/')).digest('hex');
+  return {
+    id,
+    skip,
+    browser,
+    testName,
+    storyPath: [...title.split('/').map((x) => x.trim()), name],
+    storyId,
+  };
 }
 
 function convertStories(browserName: string, stories: StoriesRaw | StoryInput[]): Partial<Record<string, ServerTest>> {

package/src/server/telemetry.ts

@@ -6,7 +6,7 @@ import { set } from 'lodash';
 import { v4 } from 'uuid';
 import { pathToFileURL } from 'url';
 import { createRequire } from 'module';
-import { Config, CreeveyStatus, isDefined, Options } from '../types';
+import { Config, CreeveyStatus, isDefined, Options } from '../types.js';
 
 const konturGitHost = 'git.skbkontur.ru';
 
@@ -151,7 +151,7 @@ export async function sendScreenshotsCount(
         name,
         typeof browser === 'object'
           ? {
-              name: browser.name,
+              name: name,
               gridUrl: browser.gridUrl ? sanitizeGridUrl(browser.gridUrl) : undefined,
               browserName: browser.browserName,
               browserVersion: browser.browserVersion,

package/src/server/utils.ts

@@ -4,7 +4,6 @@ import cluster from 'cluster';
 import { dirname } from 'path';
 import { fileURLToPath, pathToFileURL } from 'url';
 import { createRequire } from 'module';
-import findCacheDir from 'find-cache-dir';
 import { register as esmRegister } from 'tsx/esm/api';
 import { register as cjsRegister } from 'tsx/cjs/api';
 import { SkipOptions, SkipOption, isDefined, TestData, noop, ServerTest } from '../types.js';
@@ -14,8 +13,6 @@ const importMetaUrl = pathToFileURL(__filename).href;
 
 export const isShuttingDown = { current: false };
 
-export const LOCALHOST_REGEXP = /(localhost|127\.0\.0\.1)/i;
-
 export const configExt = ['.js', '.mjs', '.ts', '.cjs', '.mts', '.cts'];
 
 export const skipOptionKeys = ['in', 'kinds', 'stories', 'tests', 'reason'];
@@ -99,18 +96,20 @@ export async function shutdownWorkers(): Promise<void> {
   emitShutdownMessage();
 }
 
-export function shutdown(): void {
-  process.exit();
-}
-
-export function getCreeveyCache(): string | undefined {
+export async function getCreeveyCache(): Promise<string | undefined> {
+  const { default: findCacheDir } = await import('find-cache-dir');
   return findCacheDir({ name: 'creevey', cwd: dirname(fileURLToPath(importMetaUrl)) });
 }
 
-export async function runSequence(seq: (() => unknown)[], predicate: () => boolean): Promise<void> {
+export async function runSequence(seq: (() => unknown)[], predicate: () => boolean): Promise<boolean> {
   for (const fn of seq) {
     if (predicate()) await fn();
   }
+  return predicate();
+}
+
+export function getTestPath(test: ServerTest): string[] {
+  return [...test.storyPath, test.testName, test.browser].filter(isDefined);
 }
 
 export function testsToImages(tests: (TestData | undefined)[]): Set<string> {
@@ -189,6 +188,7 @@ const [nodeVersion] = process.versions.node.split('.').map(Number);
 export async function loadThroughTSX<T>(
   callback: (load: (modulePath: string) => Promise<T>) => Promise<T>,
 ): Promise<T> {
+  // TODO Check if it work in node18 and type: 'module'
   const unregister = nodeVersion > 18 ? esmRegister() : cjsRegister();
 
   const result = await callback((modulePath) =>

package/src/server/webdriver.ts

@@ -0,0 +1,127 @@
+import Logger from 'loglevel';
+import chalk from 'chalk';
+import { networkInterfaces } from 'os';
+import { logger as defaultLogger } from './logger.js';
+import { Args } from '@storybook/csf';
+import {
+  isDefined,
+  StoryInput,
+  BaseCreeveyTestContext,
+  CreeveyTestContext,
+  CreeveyStoryParams,
+  StoriesRaw,
+  CreeveyWebdriver,
+} from '../types.js';
+import { emitStoriesMessage, subscribeOn } from './messages.js';
+
+export const storybookRootID = 'storybook-root';
+export const LOCALHOST_REGEXP = /(localhost|127\.0\.0\.1)/i;
+const DOCKER_INTERNAL = 'host.docker.internal';
+
+export async function resolveStorybookUrl(
+  storybookUrl: string,
+  checkUrl: (url: string) => Promise<boolean>,
+  logger: Logger.Logger = defaultLogger,
+): Promise<string> {
+  logger.debug('Resolving storybook url');
+  const addresses = getAddresses();
+  for (const ip of addresses) {
+    const resolvedUrl = storybookUrl.replace(LOCALHOST_REGEXP, ip);
+    logger.debug(`Checking storybook availability on ${chalk.magenta(resolvedUrl)}`);
+    if (await checkUrl(resolvedUrl)) {
+      logger.debug(`Resolved storybook url ${chalk.magenta(resolvedUrl)}`);
+      return resolvedUrl;
+    }
+  }
+  const error = new Error('Please specify `storybookUrl` with IP address that accessible from remote browser');
+  error.name = 'ResolveUrlError';
+  throw error;
+}
+
+export function appendIframePath(url: string): string {
+  return `${url.replace(/\/$/, '')}/iframe.html`;
+}
+
+export function getAddresses(): string[] {
+  // TODO Check if docker is used
+  return [DOCKER_INTERNAL].concat(
+    ...Object.values(networkInterfaces())
+      .filter(isDefined)
+      .map((network) => network.filter((info) => info.family == 'IPv4').map((info) => info.address)),
+  );
+}
+
+export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
+  protected abstract takeScreenshot(
+    captureElement: string | null,
+    ignoreElements?: string | string[] | null,
+  ): Promise<Buffer>;
+
+  protected abstract waitForComplete(callback: (isCompleted: boolean) => void): void;
+
+  protected abstract selectStory(id: string, waitForReady?: boolean): Promise<boolean>;
+
+  protected abstract updateStoryArgs(story: StoryInput, updatedArgs: Args): Promise<void>;
+
+  abstract getSessionId(): Promise<string>;
+
+  abstract openBrowser(fresh?: boolean): Promise<CreeveyWebdriver | null>;
+
+  abstract closeBrowser(): Promise<void>;
+
+  abstract loadStoriesFromBrowser(): Promise<StoriesRaw>;
+
+  async switchStory(
+    story: StoryInput,
+    context: BaseCreeveyTestContext,
+    logger: Logger.Logger,
+  ): Promise<CreeveyTestContext> {
+    const { id, title, name, parameters } = story;
+    const {
+      captureElement = `#${storybookRootID}`,
+      waitForReady,
+      ignoreElements,
+    } = (parameters.creevey ?? {}) as CreeveyStoryParams;
+
+    logger.debug(`Switching to story ${chalk.cyan(title)}/${chalk.cyan(name)} by id ${chalk.magenta(id)}`);
+
+    let storyPlayResolver: (isCompleted: boolean) => void;
+    let waitForComplete = new Promise<boolean>((resolve) => (storyPlayResolver = resolve));
+    const unsubscribe = subscribeOn('stories', (message) => {
+      if (message.type != 'capture') return;
+      const { payload = {}, payload: { imageName } = {} } = message;
+      void this.takeScreenshot(payload.captureElement ?? captureElement, payload.ignoreElements ?? ignoreElements).then(
+        (screenshot) => {
+          context.screenshots.push({ imageName, screenshot });
+
+          this.waitForComplete(storyPlayResolver);
+
+          emitStoriesMessage({ type: 'capture' });
+        },
+      );
+    });
+
+    const isCaptureCalled = await this.selectStory(id, waitForReady);
+
+    if (isCaptureCalled) {
+      logger.debug(`Capturing screenshots from ${chalk.magenta(id)} story's \`play()\` function`);
+      while (!(await waitForComplete)) {
+        waitForComplete = new Promise<boolean>((resolve) => (storyPlayResolver = resolve));
+      }
+    }
+
+    unsubscribe();
+
+    if (isCaptureCalled) logger.debug(`Story ${chalk.magenta(id)} completed capturing`);
+    else logger.debug(`Story ${chalk.magenta(id)} ready for capturing`);
+
+    return Object.assign(
+      {
+        takeScreenshot: () => this.takeScreenshot(captureElement, ignoreElements),
+        updateStoryArgs: (updatedArgs: Args) => this.updateStoryArgs(story, updatedArgs),
+        captureElement,
+      },
+      context,
+    );
+  }
+}

package/src/server/worker/chai-image.ts

@@ -1,147 +1,35 @@
-import { PNG } from 'pngjs';
-import pixelmatch from 'pixelmatch';
-
-import { DiffOptions, ImagesError } from '../../types.js';
-
-function normalizeImageSize(image: PNG, width: number, height: number): Buffer {
-  const normalizedImage = Buffer.alloc(4 * width * height);
-
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const i = (y * width + x) * 4;
-      if (x < image.width && y < image.height) {
-        const j = (y * image.width + x) * 4;
-        normalizedImage[i + 0] = image.data[j + 0];
-        normalizedImage[i + 1] = image.data[j + 1];
-        normalizedImage[i + 2] = image.data[j + 2];
-        normalizedImage[i + 3] = image.data[j + 3];
-      } else {
-        normalizedImage[i + 0] = 0;
-        normalizedImage[i + 1] = 0;
-        normalizedImage[i + 2] = 0;
-        normalizedImage[i + 3] = 0;
-      }
-    }
-  }
-  return normalizedImage;
-}
-
-function hasDiffPixels(diff: Buffer): boolean {
-  for (let i = 0; i < diff.length; i += 4) {
-    if (diff[i + 0] == 255 && diff[i + 1] == 0 && diff[i + 2] == 0 && diff[i + 3] == 255) return true;
-  }
-  return false;
-}
-
-function compareImages(expect: Buffer, actual: Buffer, diffOptions: DiffOptions): { isEqual: boolean; diff: Buffer } {
-  const expectImage = PNG.sync.read(expect);
-  const actualImage = PNG.sync.read(actual);
-
-  const width = Math.max(actualImage.width, expectImage.width);
-  const height = Math.max(actualImage.height, expectImage.height);
-
-  const diffImage = new PNG({ width, height });
-
-  let actualImageData = actualImage.data;
-  if (actualImage.width < width || actualImage.height < height) {
-    actualImageData = normalizeImageSize(actualImage, width, height);
-  }
-
-  let expectImageData = expectImage.data;
-  if (expectImage.width < width || expectImage.height < height) {
-    expectImageData = normalizeImageSize(expectImage, width, height);
-  }
-
-  pixelmatch(expectImageData, actualImageData, diffImage.data, width, height, diffOptions);
-
-  return {
-    isEqual: !hasDiffPixels(diffImage.data),
-    diff: PNG.sync.write(diffImage),
-  };
-}
-
+import Logger from 'loglevel';
 export default function (
-  getExpected: (
-    imageName?: string,
-  ) => Promise<
-    | { expected: Buffer | null; onCompare: (actual: Buffer, expect?: Buffer, diff?: Buffer) => Promise<void> }
-    | Buffer
-    | null
-  >,
-  diffOptions: DiffOptions,
+  matchImage: (image: Buffer, imageName?: string) => Promise<void>,
+  matchImages: (images: Record<string, Buffer>) => Promise<void>,
+  logger: Logger.Logger,
 ) {
+  let isWarningShown = false;
   return function chaiImage({ Assertion }: Chai.ChaiStatic, utils: Chai.ChaiUtils): void {
-    async function assertImage(actual: Buffer, imageName?: string): Promise<string | undefined> {
-      let onCompare: (actual: Buffer, expect?: Buffer, diff?: Buffer) => Promise<void> = () => Promise.resolve();
-      let expected = await getExpected(imageName);
-      if (!(expected instanceof Buffer) && expected != null) ({ expected, onCompare } = expected);
-
-      if (expected == null) {
-        await onCompare(actual);
-        return imageName ? `Expected image '${imageName}' does not exists` : 'Expected image does not exists';
-      }
-
-      if (actual.equals(expected)) {
-        await onCompare(actual);
-        return;
-      }
-
-      const { isEqual, diff } = compareImages(expected, actual, diffOptions);
-
-      if (isEqual) {
-        await onCompare(actual);
-        return;
-      }
-
-      await onCompare(actual, expected, diff);
-
-      return imageName ? `Expected image '${imageName}' to match` : 'Expected image to match';
-    }
-
     utils.addMethod(
       Assertion.prototype,
       'matchImage',
-      async function matchImage(this: Record<string, unknown>, imageName?: string) {
-        const actual = utils.flag(this, 'object') as string | Buffer;
-        const errorMessage = await assertImage(
-          typeof actual == 'string' ? Buffer.from(actual, 'base64') : actual,
-          imageName,
-        );
-        if (errorMessage) {
-          throw createImageError(imageName ? { [imageName]: errorMessage } : errorMessage);
+      async function (this: Record<string, unknown>, imageName?: string) {
+        if (!isWarningShown) {
+          logger.warn(
+            '`expect(...).to.matchImage()` is deprecated and will be removed in the next major release. Please use `context.matchImage()` instead.',
+          );
+          isWarningShown = true;
         }
+        const image = utils.flag(this, 'object') as Buffer;
+        await matchImage(image, imageName);
       },
     );
 
-    utils.addMethod(Assertion.prototype, 'matchImages', async function matchImages(this: Record<string, unknown>) {
-      const errors: Record<string, string> = {};
-      await Promise.all(
-        Object.entries<string | Buffer>(utils.flag(this, 'object') as Record<string, string | Buffer>).map(
-          async ([imageName, imageOrBase64]) => {
-            let errorMessage: string | undefined;
-            try {
-              errorMessage = await assertImage(
-                typeof imageOrBase64 == 'string' ? Buffer.from(imageOrBase64, 'base64') : imageOrBase64,
-                imageName,
-              );
-            } catch (error) {
-              errorMessage = (error as Error).stack;
-            }
-            if (errorMessage) {
-              errors[imageName] = errorMessage;
-            }
-          },
-        ),
-      );
-      if (Object.keys(errors).length > 0) {
-        throw createImageError(errors);
+    utils.addMethod(Assertion.prototype, 'matchImages', async function (this: Record<string, unknown>) {
+      if (!isWarningShown) {
+        logger.warn(
+          '`expect(...).to.matchImages()` is deprecated and will be removed in the next major release. Please use `context.matchImages()` instead.',
+        );
+        isWarningShown = true;
       }
+      const images = utils.flag(this, 'object') as Record<string, Buffer>;
+      await matchImages(images);
     });
   };
 }
-
-function createImageError(imageErrors: string | Partial<Record<string, string>>): ImagesError {
-  const error = new Error('Expected image to match') as ImagesError;
-  error.images = imageErrors;
-  return error;
-}