creevey 0.10.0-beta.5 → 0.10.0-beta.7

package/src/server/master/pool.ts

@@ -1,18 +1,9 @@
-import cluster, { Worker as ClusterWorker } from 'cluster';
+import { Worker as ClusterWorker } from 'cluster';
 import { EventEmitter } from 'events';
-import {
-  Worker,
-  Config,
-  TestResult,
-  BrowserConfigObject,
-  WorkerMessage,
-  TestStatus,
-  isWorkerMessage,
-} from '../../types.js';
-import { sendTestMessage, sendShutdownMessage, subscribeOnWorker } from '../messages.js';
-import { isShuttingDown } from '../utils.js';
-
-const FORK_RETRIES = 5;
+import { Worker, Config, TestResult, BrowserConfigObject, TestStatus } from '../../types.js';
+import { sendTestMessage, subscribeOnWorker } from '../messages.js';
+import { gracefullyKill, isShuttingDown } from '../utils.js';
+import { WorkerQueue } from './queue.js';
 
 interface WorkerTest {
   id: string;
@@ -32,6 +23,7 @@ export default class Pool extends EventEmitter {
     return this.workers.length !== this.freeWorkers.length;
   }
   constructor(
+    public scheduler: WorkerQueue,
     config: Config,
     private browser: string,
     gridUrl?: string,
@@ -46,10 +38,11 @@ export default class Pool extends EventEmitter {
 
   async init(): Promise<void> {
     const poolSize = Math.max(1, this.config.limit ?? 1);
-    // TODO Init queue for workers to smooth browser starting load
-    this.workers = (await Promise.all(Array.from({ length: poolSize }).map(() => this.forkWorker()))).filter(
-      (workerOrError): workerOrError is Worker => workerOrError instanceof ClusterWorker,
-    );
+    this.workers = (
+      await Promise.all(
+        Array.from({ length: poolSize }).map(() => this.scheduler.forkWorker(this.browser, this.gridUrl)),
+      )
+    ).filter((workerOrError): workerOrError is Worker => workerOrError instanceof ClusterWorker);
     if (this.workers.length != poolSize)
       throw new Error(`Can't instantiate workers for ${this.browser} due many errors`);
     this.workers.forEach((worker) => {
@@ -66,7 +59,7 @@ export default class Pool extends EventEmitter {
     return true;
   }
 
-  stop(): void {
+  stop() {
     if (!this.isRunning) {
       this.emit('stop');
       return;
@@ -76,7 +69,7 @@ export default class Pool extends EventEmitter {
     this.queue = [];
   }
 
-  process(): void {
+  process() {
     const worker = this.getFreeWorker();
     const test = this.queue.at(0);
 
@@ -99,7 +92,9 @@ export default class Pool extends EventEmitter {
 
     sendTestMessage(worker, { type: 'start', payload: test });
 
-    this.process();
+    setImmediate(() => {
+      this.process();
+    });
   }
 
   private sendStatus(message: { id: string; status: TestStatus; result?: TestResult }): void {
@@ -120,36 +115,12 @@ export default class Pool extends EventEmitter {
     return this.aliveWorkers.filter((worker) => !worker.isRunning);
   }
 
-  private async forkWorker(retry = 0): Promise<Worker | { error: string }> {
-    if (isShuttingDown.current) return { error: 'Master process is shutting down' };
-
-    cluster.setupPrimary({
-      args: ['--browser', this.browser, ...(this.gridUrl ? ['--gridUrl', this.gridUrl] : []), ...process.argv.slice(2)],
-    });
-    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') return worker;
-
-    this.gracefullyKill(worker);
-
-    if (retry == FORK_RETRIES) return message.payload;
-    return this.forkWorker(retry + 1);
-  }
-
   private exitHandler(worker: Worker): void {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     worker.once('exit', async () => {
       if (isShuttingDown.current) return;
 
-      const workerOrError = await this.forkWorker();
+      const workerOrError = await this.scheduler.forkWorker(this.browser, this.gridUrl);
 
       if (!(workerOrError instanceof ClusterWorker))
         throw new Error(`Can't instantiate worker for ${this.browser} due many errors`);
@@ -160,17 +131,6 @@ export default class Pool extends EventEmitter {
     });
   }
 
-  private gracefullyKill(worker: Worker): void {
-    worker.isShuttingDown = true;
-    const timeout = setTimeout(() => {
-      worker.kill();
-    }, 10000);
-    worker.on('exit', () => {
-      clearTimeout(timeout);
-    });
-    sendShutdownMessage(worker);
-  }
-
   private shouldRetry(test: WorkerTest): boolean {
     return test.retries < this.maxRetries && !this.forcedStop;
   }
@@ -202,7 +162,7 @@ export default class Pool extends EventEmitter {
         });
 
         if (message.payload.subtype == 'unknown') {
-          this.gracefullyKill(worker);
+          gracefullyKill(worker);
         }
 
         this.handleTestResult(worker, test, { status: 'failed', error: message.payload.error });

package/src/server/master/queue.ts

@@ -0,0 +1,64 @@
+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; gridUrl?: string; retry: number; resolve: (mw: MaybeWorker) => void }[] = [];
+
+  // TODO Add concurrency
+  constructor(private useQueue: boolean) {}
+
+  async forkWorker(browser: string, gridUrl?: string, retry = 0): Promise<MaybeWorker> {
+    return new Promise<MaybeWorker>((resolve) => {
+      this.queue.push({ browser, gridUrl, retry, resolve });
+
+      void this.process();
+    });
+  }
+
+  private async process() {
+    if (this.useQueue && this.isProcessing) return;
+
+    const { browser, gridUrl, retry, resolve } = this.queue.pop() ?? {};
+
+    if (browser == 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)],
+    });
+    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, 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

@@ -42,7 +42,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 +84,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,7 +104,7 @@ 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());

package/src/server/playwright/internal.ts

@@ -1,5 +1,4 @@
 import { Browser, BrowserType, Page, chromium, firefox, webkit } from 'playwright-core';
-import Logger from 'loglevel';
 import chalk from 'chalk';
 import { v4 } from 'uuid';
 import prefix from 'loglevel-plugin-prefix';
@@ -28,7 +27,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 +56,11 @@ export class InternalBrowser {
   #sessionId: string = v4();
   #serverHost: string | null = null;
   #serverPort: number;
-  #logger: Logger.Logger;
   #unsubscribe: () => void = noop;
   constructor(browser: Browser, page: Page, port: number) {
     this.#browser = browser;
     this.#page = page;
     this.#serverPort = port;
-    this.#logger = Logger.getLogger(this.#sessionId);
     this.#unsubscribe = subscribeOn('shutdown', () => {
       void this.closeBrowser();
     });
@@ -99,7 +96,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 });
   }
@@ -113,7 +115,7 @@ export class InternalBrowser {
     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,
@@ -198,13 +200,13 @@ export class InternalBrowser {
           break;
 
         default:
-          logger.error(
+          logger().error(
             `Unknown browser ${browserConfig.browserName}. Playwright supports browsers: chromium, firefox, webkit`,
           );
       }
     } else {
       if (browserConfig.browserName != 'chrome') {
-        logger.error("Playwright's Selenium Grid feature supports only chrome browser");
+        logger().error("Playwright's Selenium Grid feature supports only chrome browser");
         return null;
       }
 
@@ -242,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;
     }
@@ -263,10 +265,10 @@ export class InternalBrowser {
   }) {
     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)}`;
       },
     });
 
@@ -293,30 +295,30 @@ 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.#page.goto(appendIframePath(resolvedUrl));
       } else {
         // TODO this.#page.setDefaultNavigationTimeout(10000);
-        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;
     }
   }
 
   private async checkUrl(url: string): Promise<boolean> {
     try {
-      this.#logger.debug(`Opening ${chalk.magenta(url)} and checking the page source`);
+      logger().debug(`Opening ${chalk.magenta(url)} and checking the page source`);
       const response = await this.#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;
@@ -325,7 +327,7 @@ export class InternalBrowser {
 
   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) => {
@@ -344,7 +346,7 @@ export class InternalBrowser {
               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);
           }
         } while (wait);
         return false;
@@ -358,7 +360,7 @@ export class InternalBrowser {
   private async updateStorybookGlobals(globals?: StorybookGlobals): Promise<void> {
     if (!globals) return;
 
-    this.#logger.debug('Applying storybook globals');
+    logger().debug('Applying storybook globals');
     await this.#page.evaluate((globals: StorybookGlobals) => {
       window.__CREEVEY_UPDATE_GLOBALS__(globals);
     }, globals);

package/src/server/playwright/webdriver.ts

@@ -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,7 +18,7 @@ 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'),

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

package/src/server/reporter.ts

@@ -22,16 +22,16 @@ export class CreeveyReporter {
   // TODO Output in better way, like vitest, maybe
   constructor(runner: EventEmitter, options: { reporterOptions: { creevey: ReporterOptions } }) {
     const { sessionId, browserName } = options.reporterOptions.creevey;
-    const testLogger = Logger.getLogger(browserName);
+    const testLogger = Logger.getLogger(sessionId);
 
     prefix.apply(testLogger, {
       format(level) {
-        return `${testLevels[level]} => (${browserName}:${chalk.gray(sessionId)})`;
+        return `[${browserName}:${chalk.gray(process.pid)}] ${testLevels[level]} => ${chalk.gray(sessionId)}`;
       },
     });
 
     runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
-      testLogger.warn(chalk.cyan(test.titlePath().join('/')), chalk.gray(`(${test.duration} ms)`));
+      testLogger.warn(chalk.cyan(test.titlePath().join('/')));
     });
     runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
       testLogger.info(chalk.cyan(test.titlePath().join('/')), chalk.gray(`(${test.duration} ms)`));
@@ -39,6 +39,7 @@ export class CreeveyReporter {
     runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error) => {
       testLogger.error(
         chalk.cyan(test.titlePath().join('/')),
+        chalk.gray(`(${test.duration} ms)`),
         '\n  ',
         this.getErrors(
           error,