creevey 0.10.0-beta.8 → 0.10.0-rc.0

package/src/server/reporters/creevey.ts

@@ -0,0 +1,71 @@
+import chalk from 'chalk';
+import Logger from 'loglevel';
+import prefix from 'loglevel-plugin-prefix';
+import { FakeTest, isImageError, TEST_EVENTS } from '../../types.js';
+import EventEmitter from 'events';
+
+const testLevels: Record<string, string> = {
+  INFO: chalk.green('PASS'),
+  WARN: chalk.yellow('START'),
+  ERROR: chalk.red('FAIL'),
+};
+
+export class CreeveyReporter {
+  private logger: Logger.Logger | null = null;
+  // TODO Output in better way, like vitest, maybe
+  constructor(runner: EventEmitter) {
+    runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
+      this.getLogger(test.creevey).warn(chalk.cyan(test.fullTitle()));
+    });
+    runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
+      this.getLogger(test.creevey).info(chalk.cyan(test.fullTitle()), chalk.gray(`(${test.duration} ms)`));
+    });
+    runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error) => {
+      this.getLogger(test.creevey).error(
+        chalk.cyan(test.fullTitle()),
+        chalk.gray(`(${test.duration} ms)`),
+        '\n  ',
+        this.getErrors(
+          error,
+          (error, imageName) => `${chalk.bold(imageName ?? test.creevey.browserName)}:${error}`,
+          (error) => error.stack ?? error.message,
+        ).join('\n  '),
+      );
+    });
+  }
+
+  private getLogger(options: { sessionId: string; browserName: string }) {
+    if (this.logger) return this.logger;
+    const { sessionId, browserName } = options;
+    const testLogger = Logger.getLogger(sessionId);
+
+    this.logger = prefix.apply(testLogger, {
+      format(level) {
+        return `[${browserName}:${chalk.gray(process.pid)}] ${testLevels[level]} => ${chalk.gray(sessionId)}`;
+      },
+    });
+
+    return this.logger;
+  }
+
+  private getErrors(
+    error: unknown,
+    imageErrorToString: (error: string, imageName?: string) => string,
+    errorToString: (error: Error) => string,
+  ): string[] {
+    const errors = [];
+    if (!(error instanceof Error)) {
+      errors.push(error as string);
+    } else if (!isImageError(error)) {
+      errors.push(errorToString(error));
+    } else if (typeof error.images == 'string') {
+      errors.push(imageErrorToString(error.images));
+    } else {
+      const imageErrors = error.images ?? {};
+      Object.keys(imageErrors).forEach((imageName) => {
+        errors.push(imageErrorToString(imageErrors[imageName] ?? '', imageName));
+      });
+    }
+    return errors;
+  }
+}

package/src/server/reporters/index.ts

@@ -0,0 +1,11 @@
+import { BaseReporter } from '../../types.js';
+import { CreeveyReporter } from './creevey.js';
+import { JUnitReporter } from './junit.js';
+import { TeamcityReporter } from './teamcity.js';
+
+export function getReporter(reporter: BaseReporter | 'creevey' | 'teamcity' | 'junit'): BaseReporter {
+  if (reporter === 'creevey') return CreeveyReporter;
+  if (reporter === 'teamcity') return TeamcityReporter;
+  if (reporter === 'junit') return JUnitReporter;
+  return reporter;
+}

package/src/server/reporters/junit.ts

@@ -0,0 +1,207 @@
+import EventEmitter from 'events';
+import { dirname, resolve } from 'path';
+import { closeSync, existsSync, mkdirSync, openSync, writeFileSync } from 'fs';
+import { TEST_EVENTS, FakeTest } from '../../types.js';
+import { logger } from '../logger.js';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class IndentedLogger<T = any> {
+  private currentIndent = '';
+
+  constructor(private baseLog: (text: string) => T) {}
+
+  indent(): void {
+    this.currentIndent += '    ';
+  }
+
+  unindent(): void {
+    this.currentIndent = this.currentIndent.substring(0, this.currentIndent.length - 4);
+  }
+
+  log(text: string): T {
+    return this.baseLog(this.currentIndent + text);
+  }
+}
+
+// NOTE: This is a reworked copy of the JUnitReporter class from Vitest.
+export class JUnitReporter {
+  private reportFile: string;
+  private fileFd?: number;
+  private logger: IndentedLogger<void>;
+  private suites: Record<string, FakeTest[]> = {};
+  // TODO classnameTemplate
+  // TODO Output console logs
+  // TODO Output attachments
+  constructor(runner: EventEmitter, options: { reportDir: string; reporterOptions: { outputFile?: string } }) {
+    const { reportDir, reporterOptions } = options;
+
+    this.reportFile = reporterOptions.outputFile ?? resolve(reportDir, 'junit.xml');
+
+    this.logger = new IndentedLogger((text) => {
+      this.fileFd ??= openSync(this.reportFile, 'w+');
+
+      writeFileSync(this.fileFd, `${text}\n`);
+    });
+
+    runner.on(TEST_EVENTS.RUN_BEGIN, () => {
+      this.suites = {};
+
+      const outputDirectory = dirname(this.reportFile);
+      if (!existsSync(outputDirectory)) {
+        mkdirSync(outputDirectory, { recursive: true });
+      }
+
+      this.fileFd = openSync(this.reportFile, 'w+');
+    });
+    runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
+      const suite = (this.suites[test.parent.title] ??= []);
+      suite.push(test);
+    });
+    runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest) => {
+      const suite = (this.suites[test.parent.title] ??= []);
+      suite.push(test);
+    });
+    runner.on(TEST_EVENTS.RUN_END, () => {
+      this.onFinished();
+    });
+  }
+
+  private writeElement(name: string, attrs: Record<string, string | number | undefined>, children?: () => void): void {
+    const pairs: string[] = [];
+    for (const key in attrs) {
+      const attr = attrs[key];
+      if (attr === undefined) {
+        continue;
+      }
+
+      pairs.push(`${key}="${escapeXML(attr)}"`);
+    }
+
+    this.logger.log(`<${name}${pairs.length ? ` ${pairs.join(' ')}` : ''}>`);
+    this.logger.indent();
+    children?.call(this);
+    this.logger.unindent();
+
+    this.logger.log(`</${name}>`);
+  }
+
+  private writeTasks(tests: FakeTest[]): void {
+    for (const test of tests) {
+      const classname = test.parent.title;
+
+      this.writeElement(
+        'testcase',
+        {
+          classname,
+          name: test.title,
+          time: getDuration(test),
+        },
+        () => {
+          if (test.state === 'failed') {
+            const error = test.err;
+            this.writeElement('failure', { message: error });
+          }
+        },
+      );
+    }
+  }
+
+  private onFinished(): void {
+    this.logger.log('<?xml version="1.0" encoding="UTF-8" ?>');
+
+    const suites = Object.entries(this.suites).map(([name, tests]) => {
+      return {
+        name,
+        tests,
+        failures: tests.filter((test) => test.state === 'failed').length,
+        time: tests.reduce((acc, test) => acc + (test.duration ?? 0), 0),
+      };
+    });
+    const stats = suites.reduce(
+      (s, { tests, failures, time }) => {
+        s.tests += tests.length;
+        s.failures += failures;
+        s.time += time;
+        return s;
+      },
+      { name: 'creevey tests', tests: 0, failures: 0, time: 0 },
+    );
+
+    this.writeElement('testsuites', { ...stats, time: executionTime(stats.time) }, () => {
+      suites.forEach(({ name, tests, failures, time }) => {
+        this.writeElement(
+          'testsuite',
+          {
+            name,
+            tests: tests.length,
+            failures,
+            time: executionTime(time),
+          },
+          () => {
+            this.writeTasks(tests);
+          },
+        );
+      });
+    });
+
+    if (this.reportFile) {
+      logger().info(`JUNIT report written to ${this.reportFile}`);
+    }
+
+    if (this.fileFd) {
+      closeSync(this.fileFd);
+      this.fileFd = undefined;
+    }
+  }
+}
+
+// https://gist.github.com/john-doherty/b9195065884cdbfd2017a4756e6409cc
+function removeInvalidXMLCharacters(value: string, removeDiscouragedChars: boolean): string {
+  let regex =
+    // eslint-disable-next-line no-control-regex
+    /([\0-\x08\v\f\x0E-\x1F\uFFFD\uFFFE\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g;
+  value = String(value).replace(regex, '');
+
+  if (removeDiscouragedChars) {
+    // remove everything discouraged by XML 1.0 specifications
+    regex = new RegExp(
+      '([\\x7F-\\x84]|[\\x86-\\x9F]|[\\uFDD0-\\uFDEF]|\\uD83F[\\uDFFE\\uDFFF]|(?:\\uD87F[\\uDF' +
+        'FE\\uDFFF])|\\uD8BF[\\uDFFE\\uDFFF]|\\uD8FF[\\uDFFE\\uDFFF]|(?:\\uD93F[\\uDFFE\\uD' +
+        'FFF])|\\uD97F[\\uDFFE\\uDFFF]|\\uD9BF[\\uDFFE\\uDFFF]|\\uD9FF[\\uDFFE\\uDFFF]' +
+        '|\\uDA3F[\\uDFFE\\uDFFF]|\\uDA7F[\\uDFFE\\uDFFF]|\\uDABF[\\uDFFE\\uDFFF]|(?:\\' +
+        'uDAFF[\\uDFFE\\uDFFF])|\\uDB3F[\\uDFFE\\uDFFF]|\\uDB7F[\\uDFFE\\uDFFF]|(?:\\uDBBF' +
+        '[\\uDFFE\\uDFFF])|\\uDBFF[\\uDFFE\\uDFFF](?:[\\0-\\t\\v\\f\\x0E-\\u2027\\u202A-\\uD7FF\\' +
+        'uE000-\\uFFFF]|[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]|[\\uD800-\\uDBFF](?![\\uDC00-\\uDFFF])|' +
+        '(?:[^\\uD800-\\uDBFF]|^)[\\uDC00-\\uDFFF]))',
+      'g',
+    );
+
+    value = value.replace(regex, '');
+  }
+
+  return value;
+}
+
+function escapeXML(value: string | number): string {
+  return removeInvalidXMLCharacters(
+    String(value)
+      .replace(/&/g, '&amp;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&apos;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;'),
+    true,
+  );
+}
+
+function executionTime(durationMS: number) {
+  return (durationMS / 1000).toLocaleString('en-US', {
+    useGrouping: false,
+    maximumFractionDigits: 10,
+  });
+}
+
+function getDuration(task: FakeTest): string | undefined {
+  const duration = task.duration ?? 0;
+  return executionTime(duration);
+}

package/src/server/reporters/teamcity.ts

@@ -0,0 +1,74 @@
+import { FakeTest, Images, isDefined, TEST_EVENTS } from '../../types.js';
+import EventEmitter from 'events';
+
+export class TeamcityReporter {
+  constructor(runner: EventEmitter, options: { reportDir: string }) {
+    const { reportDir } = options;
+
+    runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
+      console.log(`##teamcity[testStarted name='${this.escape(test.fullTitle())}' flowId='${test.creevey.workerId}']`);
+    });
+
+    runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
+      console.log(`##teamcity[testFinished name='${this.escape(test.fullTitle())}' flowId='${test.creevey.workerId}']`);
+    });
+
+    runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error: Error) => {
+      const browserName = this.escape(test.creevey.browserName);
+      Object.entries(test.creevey.images).forEach(([name, image]) => {
+        if (!image) return;
+        const filePath = test
+          .titlePath()
+          .slice(0, -1)
+          .concat(name == browserName ? [] : [browserName])
+          .map(this.escape)
+          .join('/');
+
+        const { error: _, ...rest } = image;
+        Object.values(rest as Partial<Images>)
+          .filter(isDefined)
+          .forEach((fileName) => {
+            console.log(`##teamcity[publishArtifacts '${reportDir}/${filePath}/${fileName} => report/${filePath}']`);
+            console.log(
+              `##teamcity[testMetadata testName='${this.escape(
+                test.fullTitle(),
+              )}' type='image' value='report/${filePath}/${fileName}' flowId='${test.creevey.workerId}']`,
+            );
+          });
+      });
+
+      // Output failed test as passed due TC don't support retry mechanic
+      // 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 (test.creevey.willRetry)
+        console.log(
+          `##teamcity[testFinished name='${this.escape(test.fullTitle())}' flowId='${test.creevey.workerId}']`,
+        );
+      else
+        console.log(
+          `##teamcity[testFailed name='${this.escape(test.fullTitle())}' message='${this.escape(
+            error.message,
+          )}' details='${this.escape(error.stack ?? '')}' flowId='${test.creevey.workerId}']`,
+        );
+    });
+  }
+
+  private escape = (str: string): string => {
+    if (!str) return '';
+    return (
+      str
+        .toString()
+        // eslint-disable-next-line no-control-regex
+        .replace(/\x1B.*?m/g, '')
+        .replace(/\|/g, '||')
+        .replace(/\n/g, '|n')
+        .replace(/\r/g, '|r')
+        .replace(/\[/g, '|[')
+        .replace(/\]/g, '|]')
+        .replace(/\u0085/g, '|x')
+        .replace(/\u2028/g, '|l')
+        .replace(/\u2029/g, '|p')
+        .replace(/'/g, "|'")
+    );
+  };
+}

package/src/server/selenium/internal.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from 'storybook/internal/types';
 import chalk from 'chalk';
 import http from 'http';
 import https from 'https';
@@ -19,12 +19,12 @@ import {
   StorybookGlobals,
   StoryInput,
   StoriesRaw,
-  Options,
+  WorkerOptions,
   ServerTest,
   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,
@@ -97,7 +97,7 @@ async function buildWebdriver(
   browser: string,
   gridUrl: string,
   config: Config,
-  options: Options,
+  options: WorkerOptions,
 ): Promise<WebDriver | null> {
   const browserConfig = config.browsers[browser] as BrowserConfigObject;
   const { /*customizeBuilder,*/ seleniumCapabilities, browserName } = browserConfig;
@@ -191,11 +191,13 @@ export class InternalBrowser {
   #browser: WebDriver;
   #serverHost: string | null = null;
   #serverPort: number;
+  #storybookGlobals?: StorybookGlobals;
   #unsubscribe: () => void = noop;
   #keepAliveInterval: NodeJS.Timeout | null = null;
-  constructor(browser: WebDriver, port: number) {
+  constructor(browser: WebDriver, port: number, storybookGlobals?: StorybookGlobals) {
     this.#browser = browser;
     this.#serverPort = port;
+    this.#storybookGlobals = storybookGlobals;
     this.#unsubscribe = subscribeOn('shutdown', () => {
       void this.closeBrowser();
     });
@@ -247,7 +249,7 @@ export class InternalBrowser {
         const rects = await this.#browser.executeScript<
           { elementRect: ElementRect; windowRect: ElementRect } | undefined
         >(function (selector: string): { elementRect: ElementRect; windowRect: ElementRect } | undefined {
-          window.scrollTo(0, 0); // TODO Maybe we should remove same code from `resetMousePosition`
+          window.scrollTo(0, 0);
           // eslint-disable-next-line no-var
           var element = document.querySelector(selector);
           if (!element) return;
@@ -264,9 +266,7 @@ export class InternalBrowser {
             },
             // NOTE page_Offset is used only for IE9-11
             windowRect: {
-              // eslint-disable-next-line @typescript-eslint/no-deprecated
               top: Math.round(window.scrollY || window.pageYOffset),
-              // eslint-disable-next-line @typescript-eslint/no-deprecated
               left: Math.round(window.scrollX || window.pageXOffset),
               width: window.innerWidth,
               height: window.innerHeight,
@@ -295,12 +295,10 @@ export class InternalBrowser {
         //   ? context
         //     ? await context.captureElementScreenshot(await element.getId())
         //     : await browser.findElement(By.css(captureElement)).takeScreenshot()
-        //   : // TODO pointer-events: none, need to research
-        //     await takeCompositeScreenshot(browser, windowRect, elementRect);
+        //   : await takeCompositeScreenshot(browser, windowRect, elementRect);
         screenshot = isFitIntoViewport
           ? await this.#browser.findElement(By.css(captureElement)).takeScreenshot()
-          : // TODO pointer-events: none, need to research
-            await this.takeCompositeScreenshot(windowRect, elementRect);
+          : await this.takeCompositeScreenshot(windowRect, elementRect);
 
         logger().debug(`${chalk.cyan(captureElement)} is captured`);
       }
@@ -321,6 +319,7 @@ 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();
 
@@ -374,12 +373,32 @@ export class InternalBrowser {
   }
 
   async loadStoriesFromBrowser(): Promise<StoriesRaw> {
-    const stories = await this.#browser.executeAsyncScript<StoriesRaw | undefined>(function (
-      callback: (stories: StoriesRaw | undefined) => void,
+    const result = await this.#browser.executeAsyncScript<
+      [error?: { message: string; stack?: string } | null, stories?: StoriesRaw]
+    >(function (
+      callback: (response: [error?: { message: string; stack?: string } | null, stories?: StoriesRaw]) => void,
     ) {
-      void window.__CREEVEY_GET_STORIES__().then(callback);
+      window
+        .__CREEVEY_GET_STORIES__()
+        .then((stories) => {
+          callback([null, stories]);
+        })
+        .catch((error: unknown) => {
+          const errorInfo = {
+            message: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? error.stack : undefined,
+          };
+          callback([errorInfo]);
+        });
     });
 
+    const [error, stories] = result;
+
+    if (error) {
+      const errorObj = new Error(error.message);
+      if (error.stack) errorObj.stack = error.stack;
+      throw errorObj;
+    }
     if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
 
     return stories;
@@ -407,17 +426,24 @@ export class InternalBrowser {
     browserName: string,
     gridUrl: string,
     config: Config,
-    options: Options,
+    options: WorkerOptions,
   ): Promise<InternalBrowser | null> {
     const browserConfig = config.browsers[browserName] as BrowserConfigObject;
-    const { storybookUrl: address = config.storybookUrl, limit, viewport, _storybookGlobals } = browserConfig;
+    const {
+      storybookUrl: address = config.storybookUrl,
+      limit,
+      viewport,
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      _storybookGlobals,
+      storybookGlobals = _storybookGlobals,
+    } = browserConfig;
     void limit;
 
     const browser = await buildWebdriver(browserName, gridUrl, config, options);
 
     if (!browser) return null;
 
-    const internalBrowser = new InternalBrowser(browser, options.port);
+    const internalBrowser = new InternalBrowser(browser, options.port, storybookGlobals);
 
     try {
       if (isShuttingDown.current) return null;
@@ -427,8 +453,6 @@ export class InternalBrowser {
         gridUrl,
         viewport,
         storybookUrl: address,
-        storybookGlobals: _storybookGlobals,
-        resolveStorybookUrl: config.resolveStorybookUrl,
       });
 
       return done ? internalBrowser : null;
@@ -451,15 +475,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 = '';
@@ -483,9 +503,9 @@ export class InternalBrowser {
     return await runSequence(
       [
         () => this.#browser.manage().setTimeouts({ pageLoad: 60000, script: 60000 }),
-        () => this.openStorybookPage(storybookUrl, resolveStorybookUrl),
+        () => 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
@@ -500,25 +520,14 @@ 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) {
-        logger().debug('Resolving storybook url with custom resolver');
-
-        const resolvedUrl = await resolver();
-
-        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));
-      }
+      // NOTE: getUrlChecker already calls `browser.get` so we don't need another one
+      await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
     } catch (error) {
       logger().error('Failed to resolve storybook URL', error instanceof Error ? error.message : '');
       throw error;
@@ -554,7 +563,7 @@ export class InternalBrowser {
   }
 
   private async waitForStorybook(): Promise<void> {
-    logger().debug('Waiting for `setStories` event to make sure that storybook is initiated');
+    logger().debug('Waiting for Storybook to initiate');
 
     const isTimeout = await Promise.race([
       new Promise<boolean>((resolve) => {
@@ -567,9 +576,6 @@ export class InternalBrowser {
         do {
           // 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;
@@ -579,21 +585,22 @@ export class InternalBrowser {
       })(),
     ]);
 
-    // TODO Change the message to describe a reason why it might happen
-    if (isTimeout) throw new Error('Failed to wait `setStories` event');
+    if (isTimeout) throw new Error('Failed to wait Storybook init');
   }
 
-  private async updateStorybookGlobals(globals?: StorybookGlobals): Promise<void> {
-    if (!globals) return;
+  private async updateStorybookGlobals(): Promise<void> {
+    if (!this.#storybookGlobals) return;
 
     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> {
-    const addresses = getAddresses();
+    const storybookUrl = await this.#browser.getCurrentUrl();
+    const storybookHost = new URL(storybookUrl).hostname;
+    const addresses = [storybookHost, ...getAddresses()];
 
     this.#serverHost = await this.#browser.executeAsyncScript(
       function (hosts: string[], port: number, callback: (host?: string | null) => void) {
@@ -633,6 +640,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;
@@ -831,9 +839,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);
   }
 }