creevey 0.10.0-beta.3 → 0.10.0-beta.30

package/src/server/master/queue.ts

@@ -0,0 +1,77 @@
+import cluster from 'cluster';
+import { isWorkerMessage, Worker, WorkerMessage } from '../../types.js';
+import { gracefullyKill, isShuttingDown } from '../utils.js';
+
+const FORK_RETRIES = 5;
+
+type MaybeWorker = Worker | { error: string };
+
+export class WorkerQueue {
+  private isProcessing = false;
+  private queue: {
+    browser: string;
+    storybookUrl: string;
+    gridUrl?: string;
+    retry: number;
+    resolve: (mw: MaybeWorker) => void;
+  }[] = [];
+
+  // TODO Add concurrency
+  constructor(private useQueue: boolean) {}
+
+  async forkWorker(browser: string, storybookUrl: string, gridUrl?: string, retry = 0): Promise<MaybeWorker> {
+    return new Promise<MaybeWorker>((resolve) => {
+      this.queue.push({ browser, storybookUrl, gridUrl, retry, resolve });
+
+      void this.process();
+    });
+  }
+
+  private async process() {
+    if (this.useQueue && this.isProcessing) return;
+
+    const { browser, storybookUrl, gridUrl, retry, resolve } = this.queue.pop() ?? {};
+
+    if (browser == undefined || storybookUrl == undefined || retry == undefined || resolve == undefined) return;
+
+    if (isShuttingDown.current) {
+      resolve({ error: 'Master process is shutting down' });
+      return;
+    }
+
+    this.isProcessing = true;
+
+    cluster.setupPrimary({
+      args: [
+        '--browser',
+        browser,
+        ...(gridUrl ? ['--gridUrl', gridUrl] : []),
+        ...process.argv.slice(2),
+        '--storybookUrl',
+        storybookUrl,
+      ],
+    });
+    const worker = cluster.fork();
+    const message = await new Promise((resolve: (value: WorkerMessage) => void) => {
+      const readyHandler = (message: unknown): void => {
+        if (!isWorkerMessage(message) || message.type == 'port') return;
+        worker.off('message', readyHandler);
+        resolve(message);
+      };
+      worker.on('message', readyHandler);
+    });
+
+    if (message.type == 'error') {
+      gracefullyKill(worker);
+
+      if (retry == FORK_RETRIES) resolve(message.payload);
+      else this.queue.push({ browser, storybookUrl, gridUrl, retry: retry + 1, resolve });
+    } else {
+      resolve(worker);
+    }
+
+    this.isProcessing = false;
+
+    setImmediate(() => void this.process());
+  }
+}

package/src/server/master/runner.ts

@@ -13,12 +13,14 @@ import {
   TestMeta,
 } from '../../types.js';
 import Pool from './pool.js';
+import { WorkerQueue } from './queue.js';
 
 export default class Runner extends EventEmitter {
   private failFast: boolean;
   private screenDir: string;
   private reportDir: string;
   private browsers: string[];
+  private scheduler: WorkerQueue;
   private pools: Record<string, Pool> = {};
   tests: Partial<Record<string, ServerTest>> = {};
   public get isRunning(): boolean {
@@ -30,9 +32,10 @@ export default class Runner extends EventEmitter {
     this.failFast = config.failFast;
     this.screenDir = config.screenDir;
     this.reportDir = config.reportDir;
+    this.scheduler = new WorkerQueue(config.useWorkerQueue);
     this.browsers = Object.keys(config.browsers);
     this.browsers
-      .map((browser) => (this.pools[browser] = new Pool(config, browser, gridUrl)))
+      .map((browser) => (this.pools[browser] = new Pool(this.scheduler, config, browser, gridUrl)))
       .map((pool) => pool.on('test', this.handlePoolMessage));
   }
 

package/src/server/master/server.ts

@@ -96,7 +96,7 @@ export function start(reportDir: string, port: number, ui: boolean): (api: Creev
   app.use(mount('/report', serve(reportDir)));
 
   wss.on('error', (error) => {
-    logger.error(error);
+    logger().error(error);
   });
 
   server.listen(port);

package/src/server/master/start.ts

@@ -14,13 +14,14 @@ import { sendScreenshotsCount } from '../telemetry.js';
 const importMetaUrl = pathToFileURL(__filename).href;
 
 async function copyStatics(reportDir: string): Promise<void> {
-  const clientDir = path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../client/web');
-  const files = (await readdir(clientDir, { withFileTypes: true }))
-    .filter((dirent) => dirent.isFile() && !dirent.name.endsWith('.d.ts') && !dirent.name.endsWith('.tsx'))
+  const clientDir = path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../../dist/client/web');
+  const assets = (await readdir(path.join(clientDir, 'assets'), { withFileTypes: true }))
+    .filter((dirent) => dirent.isFile())
     .map((dirent) => dirent.name);
-  await mkdir(reportDir, { recursive: true });
-  for (const file of files) {
-    await copyFile(path.join(clientDir, file), path.join(reportDir, file));
+  await mkdir(path.join(reportDir, 'assets'), { recursive: true });
+  await copyFile(path.join(clientDir, 'index.html'), path.join(reportDir, 'index.html'));
+  for (const asset of assets) {
+    await copyFile(path.join(clientDir, 'assets', asset), path.join(reportDir, 'assets', asset));
   }
 }
 
@@ -42,7 +43,10 @@ function outputUnnecessaryImages(imagesDir: string, images: Set<string>): void {
     .map((imagePath) => path.posix.relative(imagesDir, imagePath))
     .filter((imagePath) => !images.has(imagePath));
   if (unnecessaryImages.length > 0) {
-    logger.warn('We found unnecessary screenshot images, those can be safely removed:\n', unnecessaryImages.join('\n'));
+    logger().warn(
+      'We found unnecessary screenshot images, those can be safely removed:\n',
+      unnecessaryImages.join('\n'),
+    );
   }
 }
 
@@ -81,10 +85,10 @@ export async function start(
 
   if (options.ui) {
     resolveApi(creeveyApi(runner));
-    logger.info(`Started on http://localhost:${options.port}`);
+    logger().info(`Started on http://localhost:${options.port}`);
   } else {
     if (Object.values(runner.status.tests).filter((test) => test && !test.skip).length == 0) {
-      logger.warn("Don't have any tests to run");
+      logger().warn("Don't have any tests to run");
 
       void shutdownWorkers().then(() => process.exit());
       return;
@@ -101,10 +105,11 @@ export async function start(
       void sendScreenshotsCount(config, options, runner.status)
         .catch((reason: unknown) => {
           const error = reason instanceof Error ? (reason.stack ?? reason.message) : (reason as string);
-          logger.warn(`Can't send telemetry: ${error}`);
+          logger().warn(`Can't send telemetry: ${error}`);
         })
         .finally(() => {
-          void shutdownWorkers().then(() => process.exit());
+          // NOTE: Take some time to kill processes
+          void shutdownWorkers().then(() => setTimeout(() => process.exit(), 500));
         });
     });
     // TODO grep

package/src/server/playwright/docker-file.ts

@@ -1,8 +1,10 @@
 import semver from 'semver';
 import { exec } from 'shelljs';
+import { LaunchOptions } from 'playwright-core';
+import { resolvePlaywrightBrowserType } from '../utils';
 
 // TODO Support custom docker images
-export function playwrightDockerFile(browser: string, version: string): string {
+export function playwrightDockerFile(browser: string, version: string, serverOptions?: LaunchOptions): string {
   const sv = semver.coerce(version);
 
   let npmRegistry;
@@ -13,19 +15,20 @@ export function playwrightDockerFile(browser: string, version: string): string {
   }
 
   return `
-FROM mcr.microsoft.com/playwright:v${sv?.format() ?? version}
+FROM node:lts
 
 WORKDIR /creevey
 
 RUN echo "{ \\"type\\": \\"module\\" }" > package.json && \\
-    echo "import { ${browser} as browser } from 'playwright-core';" >> index.js && \\
-    echo "const ws = await browser.launchServer({ port: 4444, wsPath: 'creevey' })" >> index.js && \\${
+    echo "import { ${resolvePlaywrightBrowserType(browser)} as browser } from 'playwright-core';" >> index.js && \\
+    echo "const ws = await browser.launchServer({ ...${JSON.stringify(serverOptions)}, port: 4444, wsPath: 'creevey' })" >> index.js && \\${
       npmRegistry
         ? `
     echo "registry=${npmRegistry}" > .npmrc && \\`
         : ''
     }
-    npm i playwright-core${sv ? `@${sv.format()}` : ''}
+    npm i playwright-core${sv ? `@${sv.format()}` : ''} && \\
+    npx -y playwright${sv ? `@${sv.format()}` : ''} install --with-deps ${browser}
 
 EXPOSE 4444
 

package/src/server/playwright/internal.ts

@@ -1,7 +1,7 @@
 import { Browser, BrowserType, Page, chromium, firefox, webkit } from 'playwright-core';
-import Logger from 'loglevel';
 import chalk from 'chalk';
 import { v4 } from 'uuid';
+import Logger from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
 import {
   BrowserConfigObject,
@@ -15,9 +15,15 @@ import {
 } from '../../types';
 import { subscribeOn } from '../messages';
 import { appendIframePath, getAddresses, LOCALHOST_REGEXP, resolveStorybookUrl, storybookRootID } from '../webdriver';
-import { isShuttingDown, runSequence } from '../utils';
+import { isShuttingDown, resolvePlaywrightBrowserType, runSequence } from '../utils';
 import { colors, logger } from '../logger';
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
+
+const browsers = {
+  chromium,
+  firefox,
+  webkit,
+};
 
 async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser | null> {
   let timeout: NodeJS.Timeout | null = null;
@@ -28,7 +34,7 @@ async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser |
       (resolve) =>
         (timeout = setTimeout(() => {
           isTimeout = true;
-          logger.error(`Can't connect to ${type.name()} playwright browser`, error);
+          logger().error(`Can't connect to ${type.name()} playwright browser`, error);
           resolve(null);
         }, 10000)),
     ),
@@ -57,13 +63,13 @@ export class InternalBrowser {
   #sessionId: string = v4();
   #serverHost: string | null = null;
   #serverPort: number;
-  #logger: Logger.Logger;
+  #storybookGlobals?: StorybookGlobals;
   #unsubscribe: () => void = noop;
-  constructor(browser: Browser, page: Page, port: number) {
+  constructor(browser: Browser, page: Page, port: number, storybookGlobals?: StorybookGlobals) {
     this.#browser = browser;
     this.#page = page;
     this.#serverPort = port;
-    this.#logger = Logger.getLogger(this.#sessionId);
+    this.#storybookGlobals = storybookGlobals;
     this.#unsubscribe = subscribeOn('shutdown', () => {
       void this.closeBrowser();
     });
@@ -99,7 +105,12 @@ export class InternalBrowser {
     if (captureElement) {
       const element = await this.#page.$(captureElement);
       if (!element) throw new Error(`Element with selector ${captureElement} not found`);
-      return element.screenshot({ animations: 'disabled', mask });
+
+      return element.screenshot({
+        animations: 'disabled',
+        mask,
+        style: ':root { overflow: hidden !important; }',
+      });
     }
     return this.#page.screenshot({ animations: 'disabled', mask, fullPage: true });
   }
@@ -110,10 +121,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.#page.evaluate<
       [error?: string | null, isCaptureCalled?: boolean] | null,
@@ -152,20 +164,12 @@ export class InternalBrowser {
     );
   }
 
-  async loadStoriesFromBrowser(retry = false): Promise<StoriesRaw> {
-    try {
-      const stories = await this.#page.evaluate<StoriesRaw | undefined>(() => window.__CREEVEY_GET_STORIES__());
+  async loadStoriesFromBrowser(): Promise<StoriesRaw> {
+    const stories = await this.#page.evaluate<StoriesRaw | undefined>(() => window.__CREEVEY_GET_STORIES__());
 
-      if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
+    if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
 
-      return stories;
-    } catch (error) {
-      // TODO Check how other solutions with playwright get stories from storybook
-      if (retry) throw error;
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      // NOTE: Try one more time because of dynamic nature of vite and storybook
-      return this.loadStoriesFromBrowser(true);
-    }
+    return stories;
   }
 
   static async getBrowser(
@@ -179,49 +183,50 @@ export class InternalBrowser {
       storybookUrl: address = config.storybookUrl,
       viewport,
       _storybookGlobals,
-      ...userCapabilities
+      seleniumCapabilities,
+      playwrightOptions,
     } = browserConfig;
 
     let browser: Browser | null = null;
 
-    if (new URL(gridUrl).protocol === 'ws:') {
-      switch (browserConfig.browserName) {
-        case 'chromium':
-          browser = await tryConnect(chromium, gridUrl);
-          break;
-        case 'firefox':
-          browser = await tryConnect(firefox, gridUrl);
-          break;
-        case 'webkit':
-          browser = await tryConnect(webkit, gridUrl);
-          break;
-
-        default:
-          logger.error(
-            `Unknown browser ${browserConfig.browserName}. Playwright supports browsers: chromium, firefox, webkit`,
-          );
-      }
+    const parsedUrl = new URL(gridUrl);
+    if (parsedUrl.protocol === 'ws:') {
+      browser = await tryConnect(browsers[resolvePlaywrightBrowserType(browserConfig.browserName)], gridUrl);
+    } else if (parsedUrl.protocol === 'creevey:') {
+      browser = await browsers[resolvePlaywrightBrowserType(browserConfig.browserName)].launch(playwrightOptions);
     } else {
-      if (browserConfig.browserName != 'chrome') {
-        logger.error("Playwright's Selenium Grid feature supports only chrome browser");
+      if (browserConfig.browserName !== 'chrome') {
+        logger().error("Playwright's Selenium Grid feature supports only chrome browser");
         return null;
       }
 
       process.env.SELENIUM_REMOTE_URL = gridUrl;
-      process.env.SELENIUM_REMOTE_CAPABILITIES = JSON.stringify(userCapabilities);
+      process.env.SELENIUM_REMOTE_CAPABILITIES = JSON.stringify(seleniumCapabilities);
 
-      browser = await chromium.launch();
+      browser = await chromium.launch(playwrightOptions);
     }
 
     if (!browser) {
       return null;
     }
 
+    // TODO Record video
     const page = await browser.newPage();
+    // TODO Support tracing
+    // if (playwrightOptions?.trace) {
+    //   const context = page.context();
+    //   await context.tracing.start(playwrightOptions.trace);
+    // }
+
+    if (logger().getLevel() <= Logger.levels.DEBUG) {
+      page.on('console', (msg) => {
+        logger().debug(`Console message: ${msg.text()}`);
+      });
+    }
 
     // TODO Add debug output
 
-    const internalBrowser = new InternalBrowser(browser, page, options.port);
+    const internalBrowser = new InternalBrowser(browser, page, options.port, _storybookGlobals);
 
     try {
       if (isShuttingDown.current) return null;
@@ -229,8 +234,6 @@ export class InternalBrowser {
         browserName,
         viewport,
         storybookUrl: address,
-        storybookGlobals: _storybookGlobals,
-        resolveStorybookUrl: config.resolveStorybookUrl,
       });
 
       return done ? internalBrowser : null;
@@ -241,7 +244,7 @@ export class InternalBrowser {
       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;
     }
@@ -251,32 +254,28 @@ export class InternalBrowser {
     browserName,
     viewport,
     storybookUrl,
-    storybookGlobals,
-    resolveStorybookUrl,
   }: {
     browserName: string;
     viewport?: { width: number; height: number };
     storybookUrl: string;
-    storybookGlobals?: StorybookGlobals;
-    resolveStorybookUrl?: () => Promise<string>;
   }) {
     const sessionId = this.#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.#page.setDefaultNavigationTimeout(10000);
     this.#page.setDefaultTimeout(60000);
 
     return await runSequence(
       [
-        () => this.openStorybookPage(storybookUrl, resolveStorybookUrl),
+        () => this.openStorybookPage(storybookUrl),
         () => this.waitForStorybook(),
-        () => this.updateStorybookGlobals(storybookGlobals),
+        () => this.triggerViteReload(),
+        () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
         () => this.resizeViewport(viewport),
@@ -285,46 +284,41 @@ export class InternalBrowser {
     );
   }
 
-  private async openStorybookPage(storybookUrl: string, resolver?: () => Promise<string>): Promise<void> {
+  private async openStorybookPage(storybookUrl: string): Promise<void> {
     if (!LOCALHOST_REGEXP.test(storybookUrl)) {
       await this.#page.goto(appendIframePath(storybookUrl));
       return;
     }
 
     try {
-      if (resolver) {
-        this.#logger.debug('Resolving storybook url with custom resolver');
-
-        const resolvedUrl = await resolver();
-
-        this.#logger.debug(`Resolver storybook url ${resolvedUrl}`);
-
-        await this.#page.goto(appendIframePath(resolvedUrl));
-      } else {
-        await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url), this.#logger);
-      }
+      // TODO this.#page.setDefaultNavigationTimeout(10000);
+      const resolvedUrl = await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
+      await this.#page.goto(resolvedUrl);
     } 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;
     }
   }
 
   private async checkUrl(url: string): Promise<boolean> {
+    const page = await this.#browser.newPage();
     try {
-      this.#logger.debug(`Opening ${chalk.magenta(url)} and checking the page source`);
-      const response = await this.#page.goto(url, { waitUntil: 'commit' });
+      logger().debug(`Opening ${chalk.magenta(url)} and checking the page source`);
+      const response = await page.goto(url, { waitUntil: 'commit' });
       const source = await response?.text();
 
-      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}"`) ?? false;
     } catch {
       return false;
+    } finally {
+      await page.close();
     }
   }
 
   private async waitForStorybook(): Promise<void> {
     // TODO Duplicated code with selenium
-    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) => {
@@ -337,14 +331,17 @@ export class InternalBrowser {
         do {
           try {
             // TODO Research a different way to ensure storybook is initiated
+            // TODO Maybe use `__STORYBOOK_PREVIEW__.extract()`
             wait = await this.#page.evaluate((SET_GLOBALS: string) => {
               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);
           } catch (e: unknown) {
-            this.#logger.debug('An error has been caught during the script:', e);
+            logger().debug('An error has been caught during the script:', e);
+            if (this.#page.isClosed()) throw e;
           }
+          if (wait) await new Promise((resolve) => setTimeout(resolve, 1000));
         } while (wait);
         return false;
       })(),
@@ -354,13 +351,25 @@ 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 triggerViteReload(): Promise<void> {
+    // NOTE: On the first load, Vite might try to optimize some dependencies and reload the page
+    // We need to trigger reload earlier to avoid unnecessary reloads further
+    try {
+      await this.#page.evaluate(async () => {
+        await window.__STORYBOOK_PREVIEW__.extract();
+      });
+    } catch {
+      await this.waitForStorybook();
+    }
+  }
+
+  private async updateStorybookGlobals(): Promise<void> {
+    if (!this.#storybookGlobals) return;
 
-    this.#logger.debug('Applying storybook globals');
+    logger().debug('Applying storybook globals');
     await this.#page.evaluate((globals: StorybookGlobals) => {
       window.__CREEVEY_UPDATE_GLOBALS__(globals);
-    }, globals);
+    }, this.#storybookGlobals);
   }
 
   private async resolveCreeveyHost(): Promise<void> {
@@ -389,8 +398,10 @@ export class InternalBrowser {
   }
 
   private async updateBrowserGlobalVariables() {
+    logger().debug('Updating browser global variables');
     await this.#page.evaluate(
       ([workerId, creeveyHost, creeveyPort]) => {
+        window.__CREEVEY_ENV__ = true;
         window.__CREEVEY_WORKER_ID__ = workerId;
         window.__CREEVEY_SERVER_HOST__ = creeveyHost ?? 'localhost';
         window.__CREEVEY_SERVER_PORT__ = creeveyPort;
@@ -402,10 +413,12 @@ export class InternalBrowser {
   private async resizeViewport(viewport?: { width: number; height: number }): Promise<void> {
     if (!viewport) return;
 
+    logger().debug('Resizing viewport to', viewport);
     await this.#page.setViewportSize(viewport);
   }
 
   private async resetMousePosition(): Promise<void> {
+    logger().debug('Resetting mouse position to (0, 0)');
     await this.#page.mouse.move(0, 0);
   }
 }

package/src/server/playwright/webdriver.ts

@@ -1,5 +1,5 @@
 /// <reference types="../../../types/playwright-context" />
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 import { Config, Options, ServerTest, StoriesRaw, StoryInput } from '../../types';
 import { logger } from '../logger';
 import { subscribeOn } from '../messages';
@@ -53,7 +53,7 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
       try {
         return await import('./internal.js');
       } catch (error) {
-        logger.error(error);
+        logger().error(error);
         return null;
       }
     })();

package/src/server/providers/browser.ts

@@ -5,6 +5,7 @@ import { isDefined } from '../../types.js';
 import { logger } from '../logger.js';
 import { deserializeRawStories } from '../../shared/index.js';
 
+// TODO Don't have updates from stories
 export const loadStories: StoriesProvider = async (_config, storiesListener, webdriver) => {
   if (cluster.isPrimary) {
     return new Promise<StoriesRaw>((resolve) => {
@@ -17,13 +18,13 @@ export const loadStories: StoriesProvider = async (_config, storiesListener, web
           if (message.type == 'set') {
             const { stories, oldTests } = message.payload;
             if (oldTests.length > 0)
-              logger.warn(
+              logger().warn(
                 `If you use browser stories provider of CSFv3 Storybook feature\n` +
                   `Creevey will not load tests defined in story parameters from following stories:\n` +
                   oldTests.join('\n'),
               );
             unsubscribe();
-            resolve(stories);
+            resolve(deserializeRawStories(stories));
           }
         });
         sendStoriesMessage(worker, { type: 'get' });
@@ -36,10 +37,11 @@ export const loadStories: StoriesProvider = async (_config, storiesListener, web
   } else {
     subscribeOn('stories', (message) => {
       if (message.type == 'get')
-        emitStoriesMessage({ type: 'set', payload: { stories, oldTests: storiesWithOldTests } });
+        emitStoriesMessage({ type: 'set', payload: { stories: rawStories, oldTests: storiesWithOldTests } });
       if (message.type == 'update') storiesListener(new Map(message.payload));
     });
-    const stories = deserializeRawStories((await webdriver?.loadStoriesFromBrowser()) ?? {});
+    const rawStories = (await webdriver?.loadStoriesFromBrowser()) ?? {};
+    const stories = deserializeRawStories(rawStories);
 
     const storiesWithOldTests: string[] = [];
 

package/src/server/providers/hybrid.ts

@@ -54,7 +54,7 @@ async function parseParams(
 
   if (listener) {
     chokidar.watch(testFiles).on('change', (filePath) => {
-      logger.debug(`changed: ${filePath}`);
+      logger().debug(`changed: ${filePath}`);
 
       // doesn't work, always returns {} due modules caching
       // see https://github.com/nodejs/modules/issues/307