creevey 0.10.0-beta.3 → 0.10.0-beta.31

package/src/server/reporter.ts

@@ -22,23 +22,24 @@ 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('/')));
+      testLogger.warn(chalk.cyan(test.fullTitle()));
     });
     runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
-      testLogger.info(chalk.cyan(test.titlePath().join('/')));
+      testLogger.info(chalk.cyan(test.fullTitle()), chalk.gray(`(${test.duration} ms)`));
     });
     runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error) => {
       testLogger.error(
-        chalk.cyan(test.titlePath().join('/')),
+        chalk.cyan(test.fullTitle()),
+        chalk.gray(`(${test.duration} ms)`),
         '\n  ',
         this.getErrors(
           error,
@@ -76,7 +77,11 @@ export class TeamcityReporter {
     const reporterOptions = options.reporterOptions.creevey;
 
     runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
-      console.log(`##teamcity[testStarted name='${this.escape(test.title)}' flowId='${process.pid}']`);
+      console.log(`##teamcity[testStarted name='${this.escape(test.fullTitle())}' flowId='${process.pid}']`);
+    });
+
+    runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
+      console.log(`##teamcity[testFinished name='${this.escape(test.fullTitle())}' flowId='${process.pid}']`);
     });
 
     runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error: Error) => {
@@ -84,6 +89,7 @@ export class TeamcityReporter {
         if (!image) return;
         const filePath = test
           .titlePath()
+          .slice(0, -1)
           .concat(name == browserName ? [] : [browserName])
           .map(this.escape)
           .join('/');
@@ -97,7 +103,7 @@ export class TeamcityReporter {
             );
             console.log(
               `##teamcity[testMetadata testName='${this.escape(
-                test.title,
+                test.fullTitle(),
               )}' type='image' value='report/${filePath}/${fileName}' flowId='${process.pid}']`,
             );
           });
@@ -107,10 +113,10 @@ export class TeamcityReporter {
       // https://teamcity-support.jetbrains.com/hc/en-us/community/posts/207216829-Count-test-as-successful-if-at-least-one-try-is-successful?page=1#community_comment_207394125
 
       if (reporterOptions.willRetry)
-        console.log(`##teamcity[testFinished name='${this.escape(test.title)}' flowId='${process.pid}']`);
+        console.log(`##teamcity[testFinished name='${this.escape(test.fullTitle())}' flowId='${process.pid}']`);
       else
         console.log(
-          `##teamcity[testFailed name='${this.escape(test.title)}' message='${this.escape(
+          `##teamcity[testFailed name='${this.escape(test.fullTitle())}' message='${this.escape(
             error.message,
           )}' details='${this.escape(error.stack ?? '')}' flowId='${process.pid}']`,
         );

package/src/server/selenium/internal.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 import chalk from 'chalk';
 import http from 'http';
 import https from 'https';
@@ -24,7 +24,7 @@ import {
   StorybookEvents,
 } from '../../types.js';
 import { colors, logger } from '../logger.js';
-import { subscribeOn } from '../messages.js';
+import { emitWorkerMessage, subscribeOn } from '../messages.js';
 import { getTestPath, isShuttingDown, runSequence } from '../utils.js';
 import {
   appendIframePath,
@@ -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 (
@@ -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,19 +430,18 @@ export class InternalBrowser {
         gridUrl,
         viewport,
         storybookUrl: address,
-        storybookGlobals: _storybookGlobals,
-        resolveStorybookUrl: config.resolveStorybookUrl,
       });
 
       return done ? internalBrowser : null;
     } 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,15 +452,11 @@ 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();
     let browserHost = '';
@@ -440,23 +468,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.openStorybookPage(storybookUrl, resolveStorybookUrl),
+        () => this.#browser.manage().setTimeouts({ pageLoad: 60000, script: 60000 }),
+        () => this.openStorybookPage(storybookUrl),
         () => this.waitForStorybook(),
-        () => this.updateStorybookGlobals(storybookGlobals),
+        () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
         // NOTE: Selenium draws automation toolbar with some delay after webdriver initialization
@@ -471,26 +497,17 @@ 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)) {
       return this.#browser.get(appendIframePath(storybookUrl));
     }
 
     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.#browser.get(appendIframePath(resolvedUrl));
-      } else {
-        // NOTE: getUrlChecker already calls `browser.get` so we don't need another one
-        await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url), this.#logger);
-      }
+      // 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));
     } 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 +515,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 +533,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 +541,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 +552,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;
-            }, StorybookEvents.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 +570,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> {
@@ -607,6 +620,7 @@ export class InternalBrowser {
   private async updateBrowserGlobalVariables() {
     await this.#browser.executeScript(
       function (workerId: number, creeveyHost: string, creeveyPort: number) {
+        window.__CREEVEY_ENV__ = true;
         window.__CREEVEY_WORKER_ID__ = workerId;
         window.__CREEVEY_SERVER_HOST__ = creeveyHost;
         window.__CREEVEY_SERVER_PORT__ = creeveyPort;
@@ -630,7 +644,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 +658,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 +686,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 +700,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 +781,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);
@@ -804,9 +819,18 @@ export class InternalBrowser {
   private keepAlive(): void {
     this.#keepAliveInterval = setInterval(() => {
       // NOTE Simple way to keep session alive
-      void this.#browser.getCurrentUrl().then((url) => {
-        logger.debug('current url', chalk.magenta(url));
-      });
+      void this.#browser
+        .getCurrentUrl()
+        .then((url) => {
+          logger().debug('current url', chalk.magenta(url));
+        })
+        .catch((error: unknown) => {
+          logger().error(error);
+          emitWorkerMessage({
+            type: 'error',
+            payload: { subtype: 'browser', error: 'Failed to ping browser' },
+          });
+        });
     }, 10 * 1000);
   }
 }

package/src/server/selenium/selenoid.ts

@@ -2,9 +2,9 @@ import path from 'path';
 import assert from 'assert';
 import { lstatSync, existsSync } from 'fs';
 import { mkdir, writeFile, copyFile } from 'fs/promises';
-import sh from 'shelljs';
+import { exec, chmod } from 'shelljs';
 import { Config, BrowserConfigObject } from '../../types.js';
-import { downloadBinary, getCreeveyCache } from '../utils.js';
+import { downloadBinary, getCreeveyCache, killTree } from '../utils.js';
 import { pullImages, runImage } from '../docker.js';
 import { subscribeOn } from '../messages.js';
 
@@ -30,7 +30,7 @@ async function createSelenoidConfig(
   browsers.forEach(
     ({
       browserName,
-      browserVersion = 'latest',
+      seleniumCapabilities: { browserVersion = 'latest' } = {},
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
       webdriverCommand = [],
     }) => {
@@ -91,12 +91,12 @@ export async function startSelenoidStandalone(config: Config, debug: boolean): P
 
   // TODO Download browser webdrivers
   try {
-    if (process.platform != 'win32') sh.chmod('+x', binaryPath);
+    if (process.platform != 'win32') chmod('+x', binaryPath);
   } catch {
     /* noop */
   }
 
-  const selenoidProcess = sh.exec(`${binaryPath} -conf ./browsers.json -disable-docker`, {
+  const selenoidProcess = exec(`${binaryPath} -conf ./browsers.json -disable-docker`, {
     async: true,
     cwd: selenoidConfigDir,
   });
@@ -106,7 +106,9 @@ export async function startSelenoidStandalone(config: Config, debug: boolean): P
     selenoidProcess.stderr?.pipe(process.stderr);
   }
 
-  subscribeOn('shutdown', () => selenoidProcess.kill());
+  subscribeOn('shutdown', () => {
+    if (selenoidProcess.pid) void killTree(selenoidProcess.pid);
+  });
 }
 
 export async function startSelenoidContainer(config: Config, debug: boolean): Promise<string> {
@@ -117,7 +119,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

@@ -1,5 +1,5 @@
 /// <reference types="../../../types/selenium-context" />
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 import { Config, StorybookGlobals, StoryInput, StoriesRaw, Options, ServerTest } from '../../types.js';
 import { subscribeOn } from '../messages.js';
 import { CreeveyWebdriverBase } from '../webdriver.js';
@@ -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,
       ]),