creevey 0.10.0-beta.1 → 0.10.0-beta.11

package/src/server/selenium/internal.ts

@@ -1,5 +1,4 @@
 import { Args } from '@storybook/csf';
-import { SET_GLOBALS, UPDATE_STORY_ARGS, STORY_RENDERED } from '@storybook/core-events';
 import chalk from 'chalk';
 import http from 'http';
 import https from 'https';
@@ -22,6 +21,7 @@ import {
   StoriesRaw,
   Options,
   ServerTest,
+  StorybookEvents,
 } from '../../types.js';
 import { colors, logger } from '../logger.js';
 import { subscribeOn } from '../messages.js';
@@ -94,21 +94,25 @@ async function openUrlAndWaitForPageSource(
 }
 
 async function buildWebdriver(
-  browserName: string,
+  browser: string,
   gridUrl: string,
   config: Config,
   options: Options,
 ): Promise<WebDriver | null> {
-  const browserConfig = config.browsers[browserName] as BrowserConfigObject;
-  const { _storybookGlobals, /*customizeBuilder,*/ ...userCapabilities } = browserConfig;
+  const browserConfig = config.browsers[browser] as BrowserConfigObject;
+  const { /*customizeBuilder,*/ seleniumCapabilities, browserName } = browserConfig;
 
   const url = new URL(gridUrl);
   url.username = url.username ? '********' : '';
   url.password = url.password ? '********' : '';
-  logger.debug(`(${browserName}) Connecting to Selenium ${chalk.magenta(url.toString())}`);
+  logger().debug(`Connecting to Selenium ${chalk.magenta(url.toString())}`);
 
   // TODO Define some capabilities explicitly and define typings
-  const capabilities = new Capabilities({ ...userCapabilities, pageLoadStrategy: PageLoadStrategy.EAGER });
+  const capabilities = new Capabilities({
+    browserName,
+    ...seleniumCapabilities,
+    pageLoadStrategy: PageLoadStrategy.EAGER,
+  });
   const prefs = new logging.Preferences();
 
   if (options.trace) {
@@ -121,37 +125,65 @@ async function buildWebdriver(
   // TODO Validate browsers, versions, and platform
   // TODO Use `customizeBuilder`
 
-  let browser: WebDriver;
+  let webdriver: WebDriver | null;
 
   try {
-    // const ie = new IeOptions();
-    // const edge = new EdgeOptions();
-    // const chrome = new ChromeOptions();
-    // const safari = new SafariOptions();
-    // const firefox = new FirefoxOptions();
-    // edge.enableBidi();
-    // chrome.enableBidi();
-    // firefox.enableBidi();
-
-    browser = await new Builder()
-      // .setIeOptions(ie)
-      // .setEdgeOptions(edge)
-      // .setChromeOptions(chrome)
-      // .setSafariOptions(safari)
-      // .setFirefoxOptions(firefox)
-      .usingServer(gridUrl)
-      .withCapabilities(capabilities)
-      .setLoggingPrefs(prefs) // NOTE: Should go last
-      .build();
-
-    // const id = await browser.getWindowHandle();
-    // context = await BrowsingContext(browser, { browsingContextId: id });
+    const maxRetries = 5;
+    let retries = 0;
+    do {
+      webdriver = await Promise.race([
+        new Promise<null>((resolve) => {
+          setTimeout(() => {
+            retries += 1;
+            resolve(null);
+          }, 120_000);
+        }),
+        (async () => {
+          if (retries > 0) {
+            logger().debug(`Trying to initialize session to Selenium Grid: retried ${retries} of ${maxRetries}`);
+          }
+          const retry = retries;
+          // const ie = new IeOptions();
+          // const edge = new EdgeOptions();
+          // const chrome = new ChromeOptions();
+          // const safari = new SafariOptions();
+          // const firefox = new FirefoxOptions();
+          // edge.enableBidi();
+          // chrome.enableBidi();
+          // firefox.enableBidi();
+
+          const driver = await new Builder()
+            // .setIeOptions(ie)
+            // .setEdgeOptions(edge)
+            // .setChromeOptions(chrome)
+            // .setSafariOptions(safari)
+            // .setFirefoxOptions(firefox)
+            .usingServer(gridUrl)
+            .withCapabilities(capabilities)
+            .setLoggingPrefs(prefs) // NOTE: Should go last
+            .build();
+
+          // const id = await driver.getWindowHandle();
+          // context = await BrowsingContext(driver, { browsingContextId: id });
+
+          if (retry != retries) {
+            void driver.quit();
+            return null;
+          }
+
+          return driver;
+        })(),
+      ]);
+      if (webdriver) break;
+    } while (retries < maxRetries);
+
+    if (!webdriver) throw new Error('Failed to initialize session to Selenium Grid due to many retries');
   } catch (error) {
-    logger.error(`(${browserName}) Failed to start browser:`, error);
+    logger().error(`Failed to start browser:`, error);
     return null;
   }
 
-  return browser;
+  return webdriver;
 }
 
 export class InternalBrowser {
@@ -159,13 +191,13 @@ export class InternalBrowser {
   #browser: WebDriver;
   #serverHost: string | null = null;
   #serverPort: number;
-  #logger: Logger.Logger;
+  #storybookGlobals?: StorybookGlobals;
   #unsubscribe: () => void = noop;
   #keepAliveInterval: NodeJS.Timeout | null = null;
-  constructor(browser: WebDriver, port: number, logger: Logger.Logger) {
+  constructor(browser: WebDriver, port: number, storybookGlobals?: StorybookGlobals) {
     this.#browser = browser;
     this.#serverPort = port;
-    this.#logger = logger;
+    this.#storybookGlobals = storybookGlobals;
     this.#unsubscribe = subscribeOn('shutdown', () => {
       void this.closeBrowser();
     });
@@ -194,7 +226,7 @@ export class InternalBrowser {
 
     const ignoreStyles = await this.insertIgnoreStyles(ignoreElements);
 
-    if (this.#logger.getLevel() <= Logger.levels.DEBUG) {
+    if (logger().getLevel() <= Logger.levels.DEBUG) {
       const { innerWidth, innerHeight } = await this.#browser.executeScript<{
         innerWidth: number;
         innerHeight: number;
@@ -204,16 +236,16 @@ export class InternalBrowser {
           innerHeight: window.innerHeight,
         };
       });
-      this.#logger.debug(`Viewport size is: ${innerWidth}x${innerHeight}`);
+      logger().debug(`Viewport size is: ${innerWidth}x${innerHeight}`);
     }
 
     try {
       if (!captureElement) {
-        this.#logger.debug('Capturing viewport screenshot');
+        logger().debug('Capturing viewport screenshot');
         screenshot = await this.#browser.takeScreenshot();
-        this.#logger.debug('Viewport screenshot is captured');
+        logger().debug('Viewport screenshot is captured');
       } else {
-        this.#logger.debug(`Checking is element ${chalk.cyan(captureElement)} fit into viewport`);
+        logger().debug(`Checking is element ${chalk.cyan(captureElement)} fit into viewport`);
         const rects = await this.#browser.executeScript<
           { elementRect: ElementRect; windowRect: ElementRect } | undefined
         >(function (selector: string): { elementRect: ElementRect; windowRect: ElementRect } | undefined {
@@ -252,11 +284,11 @@ export class InternalBrowser {
           elementRect.height + elementRect.top <= windowRect.height;
 
         if (isFitIntoViewport) {
-          this.#logger.debug(
+          logger().debug(
             `Capturing ${chalk.cyan(captureElement)} with size: ${elementRect.width}x${elementRect.height}`,
           );
         } else
-          this.#logger.debug(
+          logger().debug(
             `Capturing composite screenshot image of ${chalk.cyan(captureElement)} with size: ${elementRect.width}x${elementRect.height}`,
           );
 
@@ -272,7 +304,7 @@ export class InternalBrowser {
           : // TODO pointer-events: none, need to research
             await this.takeCompositeScreenshot(windowRect, elementRect);
 
-        this.#logger.debug(`${chalk.cyan(captureElement)} is captured`);
+        logger().debug(`${chalk.cyan(captureElement)} is captured`);
       }
     } finally {
       await this.removeIgnoreStyles(ignoreStyles);
@@ -291,10 +323,11 @@ export class InternalBrowser {
 
   async selectStory(id: string, waitForReady = false): Promise<boolean> {
     // NOTE: Global variables might be reset after hot reload. I think it's workaround, maybe we need better solution
+    await this.updateStorybookGlobals();
     await this.updateBrowserGlobalVariables();
     await this.resetMousePosition();
 
-    this.#logger.debug(`Triggering 'SetCurrentStory' event with storyId ${chalk.magenta(id)}`);
+    logger().debug(`Triggering 'SetCurrentStory' event with storyId ${chalk.magenta(id)}`);
 
     const result = await this.#browser.executeAsyncScript<[error?: string | null, isCaptureCalled?: boolean] | null>(
       function (
@@ -338,8 +371,8 @@ export class InternalBrowser {
       },
       story.id,
       updatedArgs,
-      UPDATE_STORY_ARGS,
-      STORY_RENDERED,
+      StorybookEvents.UPDATE_STORY_ARGS,
+      StorybookEvents.STORY_RENDERED,
     );
   }
 
@@ -356,14 +389,14 @@ export class InternalBrowser {
   }
 
   async afterTest(test: ServerTest): Promise<void> {
-    if (this.#logger.getLevel() === Logger.levels.TRACE) {
+    if (logger().getLevel() === Logger.levels.TRACE) {
       const output: string[] = [];
       const types = await this.#browser.manage().logs().getAvailableLogTypes();
       for (const type of types) {
         const logs = await this.#browser.manage().logs().get(type);
         output.push(logs.map((log) => JSON.stringify(log.toJSON(), null, 2)).join('\n'));
       }
-      this.#logger.debug(
+      logger().debug(
         '----------',
         getTestPath(test).join('/'),
         '----------\n',
@@ -387,7 +420,7 @@ export class InternalBrowser {
 
     if (!browser) return null;
 
-    const internalBrowser = new InternalBrowser(browser, options.port, logger);
+    const internalBrowser = new InternalBrowser(browser, options.port, _storybookGlobals);
 
     try {
       if (isShuttingDown.current) return null;
@@ -397,7 +430,6 @@ export class InternalBrowser {
         gridUrl,
         viewport,
         storybookUrl: address,
-        storybookGlobals: _storybookGlobals,
         resolveStorybookUrl: config.resolveStorybookUrl,
       });
 
@@ -405,11 +437,12 @@ export class InternalBrowser {
     } catch (originalError) {
       void internalBrowser.closeBrowser();
 
-      const message = originalError instanceof Error ? originalError.message : (originalError as string);
-      const error = new Error(`Can't load storybook root page by URL ${await browser.getCurrentUrl()}: ${message}`);
+      const message =
+        originalError instanceof Error ? originalError.message : ((originalError ?? 'Unknown error') as string);
+      const error = new Error(`Can't load storybook root page: ${message}`);
       if (originalError instanceof Error) error.stack = originalError.stack;
 
-      logger.error(error);
+      logger().error(error);
 
       return null;
     }
@@ -420,14 +453,12 @@ export class InternalBrowser {
     gridUrl,
     viewport,
     storybookUrl,
-    storybookGlobals,
     resolveStorybookUrl,
   }: {
     browserName: string;
     gridUrl: string;
     viewport?: { width: number; height: number };
     storybookUrl: string;
-    storybookGlobals?: StorybookGlobals;
     resolveStorybookUrl?: () => Promise<string>;
   }): Promise<boolean> {
     const sessionId = (await this.#browser.getSession()).getId();
@@ -440,23 +471,21 @@ export class InternalBrowser {
       /* noop */
     }
 
-    this.#logger = Logger.getLogger(sessionId);
-
-    prefix.apply(this.#logger, {
+    prefix.apply(logger(), {
       format(level) {
         const levelColor = colors[level.toUpperCase() as keyof typeof colors];
-        return `[${browserName}:${chalk.gray(sessionId)}] ${levelColor(level)} =>`;
+        return `[${browserName}:${chalk.gray(process.pid)}] ${levelColor(level)} => ${chalk.gray(sessionId)}`;
       },
     });
 
-    this.#logger.debug(`Connected successful with ${chalk.green(browserHost)}`);
+    logger().debug(`Connected successful with ${chalk.green(browserHost)}`);
 
     return await runSequence(
       [
-        () => this.#browser.manage().setTimeouts({ pageLoad: 10000, script: 60000 }),
+        () => this.#browser.manage().setTimeouts({ pageLoad: 60000, script: 60000 }),
         () => this.openStorybookPage(storybookUrl, resolveStorybookUrl),
         () => this.waitForStorybook(),
-        () => this.updateStorybookGlobals(storybookGlobals),
+        () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
         // NOTE: Selenium draws automation toolbar with some delay after webdriver initialization
@@ -478,19 +507,20 @@ export class InternalBrowser {
 
     try {
       if (resolver) {
-        this.#logger.debug('Resolving storybook url with custom resolver');
+        logger().debug('Resolving storybook url with custom resolver');
 
         const resolvedUrl = await resolver();
 
-        this.#logger.debug(`Resolver storybook url ${resolvedUrl}`);
+        logger().debug(`Resolver storybook url ${resolvedUrl}`);
 
         await this.#browser.get(appendIframePath(resolvedUrl));
       } else {
+        // TODO Pageload timeout 10s
         // NOTE: getUrlChecker already calls `browser.get` so we don't need another one
-        await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url), this.#logger);
+        await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
       }
     } catch (error) {
-      this.#logger.error('Failed to resolve storybook URL', error instanceof Error ? error.message : '');
+      logger().error('Failed to resolve storybook URL', error instanceof Error ? error.message : '');
       throw error;
     }
   }
@@ -498,13 +528,13 @@ export class InternalBrowser {
   private async checkUrl(url: string): Promise<boolean> {
     try {
       // NOTE: Before trying a new url, reset the current one
-      this.#logger.debug(`Opening ${chalk.magenta('about:blank')} page`);
+      logger().debug(`Opening ${chalk.magenta('about:blank')} page`);
       await openUrlAndWaitForPageSource(
         this.#browser,
         'about:blank',
         (source: string) => !source.includes('<body></body>'),
       );
-      this.#logger.debug(`Opening ${chalk.magenta(url)} and checking the page source`);
+      logger().debug(`Opening ${chalk.magenta(url)} and checking the page source`);
       const source = await openUrlAndWaitForPageSource(
         this.#browser,
         url,
@@ -516,7 +546,7 @@ export class InternalBrowser {
       // because other add significant delay and some of them don't work in earlier chrome versions
       // Browsers always load page successful even it's failed
       // So we just check `root` element
-      this.#logger.debug(`Checking ${chalk.cyan(`#${storybookRootID}`)} existence on ${chalk.magenta(url)}`);
+      logger().debug(`Checking ${chalk.cyan(`#${storybookRootID}`)} existence on ${chalk.magenta(url)}`);
       return source.includes(`id="${storybookRootID}"`);
     } catch {
       return false;
@@ -524,7 +554,7 @@ export class InternalBrowser {
   }
 
   private async waitForStorybook(): Promise<void> {
-    this.#logger.debug('Waiting for `setStories` event to make sure that storybook is initiated');
+    logger().debug('Waiting for `setStories` event to make sure that storybook is initiated');
 
     const isTimeout = await Promise.race([
       new Promise<boolean>((resolve) => {
@@ -535,19 +565,15 @@ export class InternalBrowser {
       (async () => {
         let wait = true;
         do {
-          try {
-            // TODO Research a different way to ensure storybook is initiated
-            wait = await this.#browser.executeScript<boolean>(function (SET_GLOBALS: string): boolean {
-              // TODO Maybe use
-              // import { global } from '@storybook/global';
-              // global.IS_STORYBOOK
-              if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return true;
-              if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_GLOBALS) == undefined) return true;
-              return false;
-            }, SET_GLOBALS);
-          } catch (e: unknown) {
-            this.#logger.debug('An error has been caught during the script:', e);
-          }
+          // TODO Research a different way to ensure storybook is initiated
+          wait = await this.#browser.executeScript<boolean>(function (SET_GLOBALS: string): boolean {
+            // TODO Maybe use
+            // import { global } from '@storybook/global';
+            // global.IS_STORYBOOK
+            if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return true;
+            if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_GLOBALS) == undefined) return true;
+            return false;
+          }, StorybookEvents.SET_GLOBALS);
         } while (wait);
         return false;
       })(),
@@ -557,13 +583,13 @@ export class InternalBrowser {
     if (isTimeout) throw new Error('Failed to wait `setStories` event');
   }
 
-  private async updateStorybookGlobals(globals?: StorybookGlobals): Promise<void> {
-    if (!globals) return;
+  private async updateStorybookGlobals(): Promise<void> {
+    if (!this.#storybookGlobals) return;
 
-    this.#logger.debug('Applying storybook globals');
+    logger().debug('Applying storybook globals');
     await this.#browser.executeScript(function (globals: StorybookGlobals) {
       window.__CREEVEY_UPDATE_GLOBALS__(globals);
-    }, globals);
+    }, this.#storybookGlobals);
   }
 
   private async resolveCreeveyHost(): Promise<void> {
@@ -630,7 +656,7 @@ export class InternalBrowser {
       },
     );
 
-    this.#logger.debug(`Resizing viewport from ${innerWidth}x${innerHeight} to ${viewport.width}x${viewport.height}`);
+    logger().debug(`Resizing viewport from ${innerWidth}x${innerHeight} to ${viewport.width}x${viewport.height}`);
 
     const dWidth = windowRect.width - innerWidth;
     const dHeight = windowRect.height - innerHeight;
@@ -644,7 +670,7 @@ export class InternalBrowser {
   }
 
   private async resetMousePosition(): Promise<void> {
-    this.#logger.debug('Resetting mouse position to the top-left corner');
+    logger().debug('Resetting mouse position to the top-left corner');
     const browserName = (await this.#browser.getCapabilities()).getBrowserName();
     const [browserVersion] =
       (await this.#browser.getCapabilities()).getBrowserVersion()?.split('.') ??
@@ -672,8 +698,9 @@ export class InternalBrowser {
           y: Math.ceil((-1 * height) / 2) - top,
         })
         .perform();
-    } else if (browserName == 'firefox' && browserVersion == '61') {
+    } else if (browserName == 'firefox') {
       // NOTE Firefox for some reason moving by 0 x 0 move cursor in bottom left corner :sad:
+      // NOTE In recent versions (eg 128.0) moving by 0 x 0 doesn't work at all
       await this.#browser.actions().move({ origin: Origin.VIEWPORT, x: 0, y: 1 }).perform();
     } else {
       // NOTE IE don't emit move events until force window focus or connect by RDP on virtual machine
@@ -685,7 +712,7 @@ export class InternalBrowser {
     const ignoreSelectors = Array.prototype.concat(ignoreElements).filter(Boolean);
     if (!ignoreSelectors.length) return null;
 
-    this.#logger.debug('Hiding ignored elements before capturing');
+    logger().debug('Hiding ignored elements before capturing');
 
     return await this.#browser.executeScript(function (ignoreSelectors: string[]) {
       return window.__CREEVEY_INSERT_IGNORE_STYLES__(ignoreSelectors);
@@ -766,7 +793,7 @@ export class InternalBrowser {
 
   private async removeIgnoreStyles(ignoreStyles: WebElement | null): Promise<void> {
     if (ignoreStyles) {
-      this.#logger.debug('Revert hiding ignored elements');
+      logger().debug('Revert hiding ignored elements');
       await this.#browser.executeScript(function (ignoreStyles: HTMLStyleElement) {
         window.__CREEVEY_REMOVE_IGNORE_STYLES__(ignoreStyles);
       }, ignoreStyles);
@@ -805,7 +832,7 @@ export class InternalBrowser {
     this.#keepAliveInterval = setInterval(() => {
       // NOTE Simple way to keep session alive
       void this.#browser.getCurrentUrl().then((url) => {
-        logger.debug('current url', chalk.magenta(url));
+        logger().debug('current url', chalk.magenta(url));
       });
     }, 10 * 1000);
   }

package/src/server/selenium/selenoid.ts

@@ -30,7 +30,7 @@ async function createSelenoidConfig(
   browsers.forEach(
     ({
       browserName,
-      browserVersion = 'latest',
+      seleniumCapabilities: { browserVersion = 'latest' } = {},
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
       webdriverCommand = [],
     }) => {
@@ -117,7 +117,7 @@ export async function startSelenoidContainer(config: Config, debug: boolean): Pr
   browsers.forEach(
     ({
       browserName,
-      browserVersion = 'latest',
+      seleniumCapabilities: { browserVersion = 'latest' } = {},
       limit: browserLimit = 1,
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
     }) => {

package/src/server/selenium/webdriver.ts

@@ -63,7 +63,7 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
       try {
         return await import('./internal.js');
       } catch (error) {
-        logger.error(error);
+        logger().error(error);
         return null;
       }
     })();

package/src/server/telemetry.ts

@@ -154,12 +154,16 @@ export async function sendScreenshotsCount(
               name: name,
               gridUrl: browser.gridUrl ? sanitizeGridUrl(browser.gridUrl) : undefined,
               browserName: browser.browserName,
-              browserVersion: browser.browserVersion,
-              platformName: browser.platformName,
+              // @ts-expect-error Support old config version
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              browserVersion: browser.seleniumCapabilities?.browserVersion ?? browser.browserVersion,
+              // @ts-expect-error Support old config version
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              platformName: browser.seleniumCapabilities?.platformName ?? browser.platformName,
               viewport: browser.viewport,
               limit: browser.limit,
               dockerImage: browser.dockerImage,
-              'se:teamname': browser['se:teamname'],
+              'se:teamname': browser.seleniumCapabilities?.['se:teamname'],
             }
           : browser,
       ]),

package/src/server/utils.ts

@@ -3,10 +3,9 @@ import { get } from 'https';
 import cluster from 'cluster';
 import { dirname } from 'path';
 import { fileURLToPath, pathToFileURL } from 'url';
-import { createRequire } from 'module';
 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';
+import { SkipOptions, SkipOption, isDefined, TestData, noop, ServerTest, Worker } from '../types.js';
 import { emitShutdownMessage, sendShutdownMessage } from './messages.js';
 
 const importMetaUrl = pathToFileURL(__filename).href;
@@ -96,6 +95,17 @@ export async function shutdownWorkers(): Promise<void> {
   emitShutdownMessage();
 }
 
+export function gracefullyKill(worker: Worker): void {
+  worker.isShuttingDown = true;
+  const timeout = setTimeout(() => {
+    worker.kill();
+  }, 10000);
+  worker.on('exit', () => {
+    clearTimeout(timeout);
+  });
+  sendShutdownMessage(worker);
+}
+
 export async function getCreeveyCache(): Promise<string | undefined> {
   const { default: findCacheDir } = await import('find-cache-dir');
   return findCacheDir({ name: 'creevey', cwd: dirname(fileURLToPath(importMetaUrl)) });
@@ -175,10 +185,10 @@ export function readDirRecursive(dirPath: string): string[] {
   );
 }
 
-const _require = createRequire(importMetaUrl);
 export function tryToLoadTestsData(filename: string): Partial<Record<string, ServerTest>> | undefined {
   try {
-    return _require(filename) as Partial<Record<string, ServerTest>>;
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require(filename) as Partial<Record<string, ServerTest>>;
   } catch {
     /* noop */
   }

package/src/server/webdriver.ts

@@ -1,7 +1,6 @@
-import Logger from 'loglevel';
 import chalk from 'chalk';
 import { networkInterfaces } from 'os';
-import { logger as defaultLogger } from './logger.js';
+import { logger } from './logger.js';
 import { Args } from '@storybook/csf';
 import {
   isDefined,
@@ -22,15 +21,15 @@ 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');
+  logger().debug('Resolving storybook url');
   const addresses = getAddresses();
+  // TODO Use Promise.race?
   for (const ip of addresses) {
     const resolvedUrl = storybookUrl.replace(LOCALHOST_REGEXP, ip);
-    logger.debug(`Checking storybook availability on ${chalk.magenta(resolvedUrl)}`);
+    logger().debug(`Checking storybook availability on ${chalk.magenta(resolvedUrl)}`);
     if (await checkUrl(resolvedUrl)) {
-      logger.debug(`Resolved storybook url ${chalk.magenta(resolvedUrl)}`);
+      logger().debug(`Resolved storybook url ${chalk.magenta(resolvedUrl)}`);
       return resolvedUrl;
     }
   }
@@ -74,11 +73,7 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
 
   abstract afterTest(test: ServerTest): Promise<void>;
 
-  async switchStory(
-    story: StoryInput,
-    context: BaseCreeveyTestContext,
-    logger: Logger.Logger,
-  ): Promise<CreeveyTestContext> {
+  async switchStory(story: StoryInput, context: BaseCreeveyTestContext): Promise<CreeveyTestContext> {
     const { id, title, name, parameters } = story;
     const {
       captureElement = `#${storybookRootID}`,
@@ -86,7 +81,7 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
       ignoreElements,
     } = (parameters.creevey ?? {}) as CreeveyStoryParams;
 
-    logger.debug(`Switching to story ${chalk.cyan(title)}/${chalk.cyan(name)} by id ${chalk.magenta(id)}`);
+    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));
@@ -107,7 +102,7 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
     const isCaptureCalled = await this.selectStory(id, waitForReady);
 
     if (isCaptureCalled) {
-      logger.debug(`Capturing screenshots from ${chalk.magenta(id)} story's \`play()\` function`);
+      logger().debug(`Capturing screenshots from ${chalk.magenta(id)} story's \`play()\` function`);
       while (!(await waitForComplete)) {
         waitForComplete = new Promise<boolean>((resolve) => (storyPlayResolver = resolve));
       }
@@ -115,8 +110,8 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
 
     unsubscribe();
 
-    if (isCaptureCalled) logger.debug(`Story ${chalk.magenta(id)} completed capturing`);
-    else logger.debug(`Story ${chalk.magenta(id)} ready for capturing`);
+    if (isCaptureCalled) logger().debug(`Story ${chalk.magenta(id)} completed capturing`);
+    else logger().debug(`Story ${chalk.magenta(id)} ready for capturing`);
 
     return Object.assign(
       {

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

@@ -1,8 +1,8 @@
-import Logger from 'loglevel';
+import { logger } from '../logger';
+
 export default function (
   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 {
@@ -11,7 +11,7 @@ export default function (
       'matchImage',
       async function (this: Record<string, unknown>, imageName?: string) {
         if (!isWarningShown) {
-          logger.warn(
+          logger().warn(
             '`expect(...).to.matchImage()` is deprecated and will be removed in the next major release. Please use `context.matchImage()` instead.',
           );
           isWarningShown = true;
@@ -23,7 +23,7 @@ export default function (
 
     utils.addMethod(Assertion.prototype, 'matchImages', async function (this: Record<string, unknown>) {
       if (!isWarningShown) {
-        logger.warn(
+        logger().warn(
           '`expect(...).to.matchImages()` is deprecated and will be removed in the next major release. Please use `context.matchImages()` instead.',
         );
         isWarningShown = true;