creevey 0.9.0-beta.2 → 0.9.0-beta.20

package/lib/esm/server/selenium/browser.js

@@ -1,33 +1,38 @@
+import { SET_GLOBALS, UPDATE_STORY_ARGS, STORY_RENDERED } from '@storybook/core-events';
 import chalk from 'chalk';
 import http from 'http';
 import https from 'https';
-import { getLogger } from 'loglevel';
+import { getLogger, levels } from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
 import { networkInterfaces } from 'os';
 import { PNG } from 'pngjs';
-import { Builder, By, Capabilities, Origin } from 'selenium-webdriver';
+import { Builder, By, Capabilities, Origin, logging } from 'selenium-webdriver';
+// import { Options as IeOptions } from 'selenium-webdriver/ie';
+// import { Options as EdgeOptions } from 'selenium-webdriver/edge';
+// import { Options as ChromeOptions } from 'selenium-webdriver/chrome';
+// import { Options as SafariOptions } from 'selenium-webdriver/safari';
+// import { Options as FirefoxOptions } from 'selenium-webdriver/firefox';
 import { PageLoadStrategy } from 'selenium-webdriver/lib/capabilities';
 import { isDefined, noop } from '../../types';
 import { colors, logger } from '../logger';
 import { emitStoriesMessage, subscribeOn } from '../messages';
-import { importStorybookCoreEvents, isStorybookVersionLessThan } from '../storybook/helpers';
 import { isShuttingDown, LOCALHOST_REGEXP, runSequence } from '../utils';
+// type UnPromise<P> = P extends Promise<infer T> ? T : never;
+
+const storybookRootID = 'storybook-root';
 const DOCKER_INTERNAL = 'host.docker.internal';
 let browserLogger = logger;
 let browserName = '';
 let browser = null;
+// let context: UnPromise<ReturnType<typeof BrowsingContext>> | null = null;
 let creeveyServerHost = null;
-
 function getSessionData(grid, sessionId = '') {
   const gridUrl = new URL(grid);
   gridUrl.pathname = `/host/${sessionId}`;
   return new Promise((resolve, reject) => (gridUrl.protocol == 'https:' ? https : http).get(gridUrl.toString(), res => {
     if (res.statusCode !== 200) {
-      var _res$statusCode;
-
-      return reject(new Error(`Couldn't get session data for ${sessionId}. Status code: ${(_res$statusCode = res.statusCode) !== null && _res$statusCode !== void 0 ? _res$statusCode : 'Unknown'}`));
+      return reject(new Error(`Couldn't get session data for ${sessionId}. Status code: ${res.statusCode ?? 'Unknown'}`));
     }
-
     let data = '';
     res.setEncoding('utf8');
     res.on('data', chunk => data += chunk);
@@ -35,51 +40,42 @@ function getSessionData(grid, sessionId = '') {
       try {
         resolve(JSON.parse(data));
       } catch (error) {
-        var _error$stack;
-
-        reject(new Error(`Couldn't get session data for ${sessionId}. ${error instanceof Error ? (_error$stack = error.stack) !== null && _error$stack !== void 0 ? _error$stack : error.message : error}`));
+        reject(new Error(`Couldn't get session data for ${sessionId}. ${error instanceof Error ? error.stack ?? error.message : error}`));
       }
     });
   }));
 }
-
 function getAddresses() {
+  // TODO Check if docker is used
   return [DOCKER_INTERNAL].concat(...Object.values(networkInterfaces()).filter(isDefined).map(network => network.filter(info => info.family == 'IPv4').map(info => info.address)));
 }
-
 async function resolveStorybookUrl(storybookUrl, checkUrl) {
   browserLogger.debug('Resolving storybook url');
   const addresses = getAddresses();
-
   for (const ip of addresses) {
     const resolvedUrl = storybookUrl.replace(LOCALHOST_REGEXP, ip);
     browserLogger.debug(`Checking storybook availability on ${chalk.magenta(resolvedUrl)}`);
-
     if (await checkUrl(resolvedUrl)) {
       browserLogger.debug(`Resolved storybook url ${chalk.magenta(resolvedUrl)}`);
       return resolvedUrl;
     }
   }
-
   const error = new Error('Please specify `storybookUrl` with IP address that accessible from remote browser');
   error.name = 'ResolveUrlError';
   throw error;
 }
-
 async function openUrlAndWaitForPageSource(browser, url, predicate) {
   let source = '';
   await browser.get(url);
-
   do {
     try {
       source = await browser.getPageSource();
-    } catch (_) {// NOTE: Firefox can raise exception "curContainer.frame.document.documentElement is null"
+    } catch (_) {
+      // NOTE: Firefox can raise exception "curContainer.frame.document.documentElement is null"
     }
   } while (predicate(source));
-
   return source;
 }
-
 function getUrlChecker(browser) {
   return async url => {
     try {
@@ -87,61 +83,50 @@ function getUrlChecker(browser) {
       browserLogger.debug(`Opening ${chalk.magenta('about:blank')} page`);
       await openUrlAndWaitForPageSource(browser, 'about:blank', source => !source.includes('<body></body>'));
       browserLogger.debug(`Opening ${chalk.magenta(url)} and checking the page source`);
-      const source = await openUrlAndWaitForPageSource(browser, url, // NOTE: IE11 can return only `head` without body
-      source => source.length == 0 || !/<body([^>]*>).+<\/body>/s.test(source)); // NOTE: This is the most optimal way to check if we in storybook or not
+      const source = await openUrlAndWaitForPageSource(browser, url,
+      // NOTE: IE11 can return only `head` without body
+      source => source.length == 0 || !/<body([^>]*>).+<\/body>/s.test(source));
+      // NOTE: This is the most optimal way to check if we in storybook or not
       // We don't use any page load strategies except `NONE`
       // 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
-
-      browserLogger.debug(`Checking ${chalk.cyan('#root')} existence on ${chalk.magenta(url)}`);
-      return source.includes('<div id="root"></div>');
+      // So we just check `root` element
+      browserLogger.debug(`Checking ${chalk.cyan(`#${storybookRootID}`)} existence on ${chalk.magenta(url)}`);
+      return source.includes(`id="${storybookRootID}"`);
     } catch (error) {
       return false;
     }
   };
 }
-
 async function waitForStorybook(browser) {
-  // NOTE: Storybook 5.x doesn't have the `last` method
-  if (isStorybookVersionLessThan(6)) {
-    browserLogger.debug('Waiting for `load` event to make sure that storybook is initiated');
-    return browser.executeAsyncScript(function (callback) {
-      if (document.readyState == 'complete') return callback();
-      window.addEventListener('load', function () {
-        callback();
-      });
-    });
-  }
-
   browserLogger.debug('Waiting for `setStories` event to make sure that storybook is initiated');
   let wait = true;
   let isTimeout = false;
-  const Events = await importStorybookCoreEvents();
   const initiateTimeout = setTimeout(() => {
     wait = false;
     isTimeout = true;
   }, 60000);
-
-  while (wait) {
-    wait = await browser.executeAsyncScript(function (SET_STORIES, callback) {
-      if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return callback(true);
-      if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_STORIES) == undefined) return callback(true);
-      return callback(false);
-    }, Events.SET_STORIES);
+  while (wait !== false) {
+    try {
+      wait = await browser.executeScript(function (SET_GLOBALS) {
+        if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return true;
+        if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_GLOBALS) == undefined) return true;
+        return false;
+      }, SET_GLOBALS);
+    } catch (e) {
+      browserLogger.debug('An error has been caught during the script: ', e);
+    }
     if (!wait) clearTimeout(initiateTimeout);
   }
-
   if (isTimeout) throw new Error('Failed to wait `setStories` event');
 }
-
 async function resetMousePosition(browser) {
-  var _ref, _await$browser$getCap, _await$browser$getCap2, _await$browser$getCap3;
-
+  var _await$browser$getCap, _await$browser$getCap2;
   browserLogger.debug('Resetting mouse position to the top-left corner');
   const browserName = (await browser.getCapabilities()).getBrowserName();
-  const [browserVersion] = (_ref = (_await$browser$getCap = (_await$browser$getCap2 = (await browser.getCapabilities()).getBrowserVersion()) === null || _await$browser$getCap2 === void 0 ? void 0 : _await$browser$getCap2.split('.')) !== null && _await$browser$getCap !== void 0 ? _await$browser$getCap : (_await$browser$getCap3 = (await browser.getCapabilities()).get('version')) === null || _await$browser$getCap3 === void 0 ? void 0 : _await$browser$getCap3.split('.')) !== null && _ref !== void 0 ? _ref : []; // NOTE Reset mouse position to support keweb selenium grid browser versions
+  const [browserVersion] = ((_await$browser$getCap = (await browser.getCapabilities()).getBrowserVersion()) === null || _await$browser$getCap === void 0 ? void 0 : _await$browser$getCap.split('.')) ?? ((_await$browser$getCap2 = (await browser.getCapabilities()).get('version')) === null || _await$browser$getCap2 === void 0 ? void 0 : _await$browser$getCap2.split('.')) ?? [];
 
+  // NOTE Reset mouse position to support keweb selenium grid browser versions
   if (browserName == 'chrome' && browserVersion == '70') {
     const {
       top,
@@ -156,8 +141,8 @@ async function resetMousePosition(browser) {
         width: bodyRect.width,
         height: bodyRect.height
       };
-    }); // NOTE Bridge mode doesn't support `Origin.VIEWPORT`, move mouse relative
-
+    });
+    // NOTE Bridge mode doesn't support `Origin.VIEWPORT`, move mouse relative
     await browser.actions({
       bridge: true
     }).move({
@@ -181,7 +166,6 @@ async function resetMousePosition(browser) {
     }).perform();
   }
 }
-
 async function resizeViewport(browser, viewport) {
   const windowRect = await browser.manage().window().getRect();
   const {
@@ -201,7 +185,6 @@ async function resizeViewport(browser, viewport) {
     height: viewport.height + dHeight
   });
 }
-
 const getScrollBarWidth = (() => {
   let scrollBarWidth = null;
   return async browser => {
@@ -210,33 +193,31 @@ const getScrollBarWidth = (() => {
       // eslint-disable-next-line no-var
       var div = document.createElement('div');
       div.innerHTML = 'a'; // NOTE: In IE clientWidth is 0 if this div is empty.
-
       div.style.overflowY = 'scroll';
-      document.body.appendChild(div); // eslint-disable-next-line no-var
-
+      document.body.appendChild(div);
+      // eslint-disable-next-line no-var
       var widthDiff = div.offsetWidth - div.clientWidth;
       document.body.removeChild(div);
       return widthDiff;
     });
     return scrollBarWidth;
   };
-})(); // NOTE Firefox and Safari take viewport screenshot without scrollbars
-
+})();
 
+// NOTE Firefox and Safari take viewport screenshot without scrollbars
 async function hasScrollBar(browser) {
-  var _await$browser$getCap4, _await$browser$getCap5;
-
+  var _await$browser$getCap3;
   const browserName = (await browser.getCapabilities()).getBrowserName();
-  const [browserVersion] = (_await$browser$getCap4 = (_await$browser$getCap5 = (await browser.getCapabilities()).getBrowserVersion()) === null || _await$browser$getCap5 === void 0 ? void 0 : _await$browser$getCap5.split('.')) !== null && _await$browser$getCap4 !== void 0 ? _await$browser$getCap4 : [];
-  return browserName != 'Safari' && // NOTE This need to work with keweb selenium grid
+  const [browserVersion] = ((_await$browser$getCap3 = (await browser.getCapabilities()).getBrowserVersion()) === null || _await$browser$getCap3 === void 0 ? void 0 : _await$browser$getCap3.split('.')) ?? [];
+  return browserName != 'Safari' &&
+  // NOTE This need to work with keweb selenium grid
   !(browserName == 'firefox' && browserVersion == '61');
 }
-
 async function takeCompositeScreenshot(browser, windowRect, elementRect) {
   const screens = [];
   const isScreenshotWithoutScrollBar = !(await hasScrollBar(browser));
-  const scrollBarWidth = await getScrollBarWidth(browser); // NOTE Sometimes viewport has been scrolled somewhere
-
+  const scrollBarWidth = await getScrollBarWidth(browser);
+  // NOTE Sometimes viewport has been scrolled somewhere
   const normalizedElementRect = {
     left: elementRect.left - windowRect.left,
     right: elementRect.left + elementRect.width - windowRect.left,
@@ -251,7 +232,6 @@ async function takeCompositeScreenshot(browser, windowRect, elementRect) {
   const rows = Math.ceil(elementRect.height / viewportHeight);
   const xOffset = Math.round(isFitHorizontally ? normalizedElementRect.left : Math.max(0, cols * viewportWidth - elementRect.width));
   const yOffset = Math.round(isFitVertically ? normalizedElementRect.top : Math.max(0, rows * viewportHeight - elementRect.height));
-
   for (let row = 0; row < rows; row += 1) {
     for (let col = 0; col < cols; col += 1) {
       const dx = Math.min(viewportWidth * col + normalizedElementRect.left, Math.max(0, normalizedElementRect.right - viewportWidth));
@@ -262,13 +242,11 @@ async function takeCompositeScreenshot(browser, windowRect, elementRect) {
       screens.push(await browser.takeScreenshot());
     }
   }
-
   const images = screens.map(s => Buffer.from(s, 'base64')).map(b => PNG.sync.read(b));
   const compositeImage = new PNG({
     width: Math.round(elementRect.width),
     height: Math.round(elementRect.height)
   });
-
   for (let y = 0; y < compositeImage.height; y += 1) {
     for (let x = 0; x < compositeImage.width; x += 1) {
       const col = Math.floor(x / viewportWidth);
@@ -277,8 +255,11 @@ async function takeCompositeScreenshot(browser, windowRect, elementRect) {
       const isLastRow = rows - row == 1;
       const scrollOffset = isFitVertically || isScreenshotWithoutScrollBar ? 0 : scrollBarWidth;
       const i = (y * compositeImage.width + x) * 4;
-      const j = // NOTE compositeImage(x, y) => image(x, y)
-      (y % viewportHeight * (viewportWidth + scrollOffset) + x % viewportWidth) * 4 + (isLastRow ? yOffset * (viewportWidth + scrollOffset) * 4 : 0) + (isLastCol ? xOffset * 4 : 0);
+      const j =
+      // NOTE compositeImage(x, y) => image(x, y)
+      (y % viewportHeight * (viewportWidth + scrollOffset) + x % viewportWidth) * 4 + (
+      // NOTE Offset for last row/col image
+      isLastRow ? yOffset * (viewportWidth + scrollOffset) * 4 : 0) + (isLastCol ? xOffset * 4 : 0);
       const image = images[row * cols + col];
       compositeImage.data[i + 0] = image.data[j + 0];
       compositeImage.data[i + 1] = image.data[j + 1];
@@ -286,16 +267,25 @@ async function takeCompositeScreenshot(browser, windowRect, elementRect) {
       compositeImage.data[i + 3] = image.data[j + 3];
     }
   }
-
   return PNG.sync.write(compositeImage).toString('base64');
 }
-
 export async function takeScreenshot(browser, captureElement, ignoreElements) {
   let screenshot;
   const ignoreStyles = await insertIgnoreStyles(browser, ignoreElements);
-
   try {
     if (!captureElement) {
+      if (browserLogger.getLevel() <= levels.DEBUG) {
+        const {
+          innerWidth,
+          innerHeight
+        } = await browser.executeScript(function () {
+          return {
+            innerWidth: window.innerWidth,
+            innerHeight: window.innerHeight
+          };
+        });
+        browserLogger.debug(`Viewport size is: ${innerWidth}x${innerHeight}`);
+      }
       browserLogger.debug('Capturing viewport screenshot');
       screenshot = await browser.takeScreenshot();
       browserLogger.debug('Viewport screenshot is captured');
@@ -304,10 +294,10 @@ export async function takeScreenshot(browser, captureElement, ignoreElements) {
       const rects = await browser.executeScript(function (selector) {
         window.scrollTo(0, 0); // TODO Maybe we should remove same code from `resetMousePosition`
         // eslint-disable-next-line no-var
-
         var element = document.querySelector(selector);
-        if (!element) return; // eslint-disable-next-line no-var
+        if (!element) return;
 
+        // eslint-disable-next-line no-var
         var elementRect = element.getBoundingClientRect();
         return {
           elementRect: {
@@ -327,21 +317,28 @@ export async function takeScreenshot(browser, captureElement, ignoreElements) {
       const {
         elementRect,
         windowRect
-      } = rects !== null && rects !== void 0 ? rects : {};
+      } = rects ?? {};
       if (!elementRect || !windowRect) throw new Error(`Couldn't find element with selector: '${captureElement}'`);
       const isFitIntoViewport = elementRect.width + elementRect.left <= windowRect.width && elementRect.height + elementRect.top <= windowRect.height;
       if (isFitIntoViewport) browserLogger.debug(`Capturing ${chalk.cyan(captureElement)}`);else browserLogger.debug(`Capturing composite screenshot image of ${chalk.cyan(captureElement)}`);
-      screenshot = isFitIntoViewport ? await browser.findElement(By.css(captureElement)).takeScreenshot() : // TODO pointer-events: none, need to research
+
+      // const element = await browser.findElement(By.css(captureElement));
+      // screenshot = isFitIntoViewport
+      //   ? 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);
+      screenshot = isFitIntoViewport ? await browser.findElement(By.css(captureElement)).takeScreenshot() :
+      // TODO pointer-events: none, need to research
       await takeCompositeScreenshot(browser, windowRect, elementRect);
       browserLogger.debug(`${chalk.cyan(captureElement)} is captured`);
     }
   } finally {
     await removeIgnoreStyles(browser, ignoreStyles);
   }
-
   return screenshot;
 }
-
 async function selectStory(browser, {
   id,
   kind,
@@ -352,63 +349,51 @@ async function selectStory(browser, {
     if (typeof window.__CREEVEY_SELECT_STORY__ == 'undefined') {
       return callback(["Creevey can't switch story. This may happened if forget to add `creevey` addon to your storybook config, or storybook not loaded in browser due syntax error."]);
     }
-
-    window.__CREEVEY_SELECT_STORY__(id, kind, name, shouldWaitForReady, callback);
+    void window.__CREEVEY_SELECT_STORY__(id, kind, name, shouldWaitForReady, callback);
   }, id, kind, name, waitForReady);
-  const [errorMessage, isCaptureCalled = false] = result || [];
+  const [errorMessage, isCaptureCalled = false] = result ?? [];
   if (errorMessage) throw new Error(errorMessage);
   return isCaptureCalled;
 }
-
 export async function updateStorybookGlobals(browser, globals) {
-  if (isStorybookVersionLessThan(6)) {
-    browserLogger.warn('Globals are not supported by Storybook versions less than 6');
-    return;
-  }
-
   browserLogger.debug('Applying storybook globals');
   await browser.executeScript(function (globals) {
     window.__CREEVEY_UPDATE_GLOBALS__(globals);
   }, globals);
 }
-
 function appendIframePath(url) {
   return `${url.replace(/\/$/, '')}/iframe.html`;
 }
-
 async function openStorybookPage(browser, storybookUrl, resolver) {
   if (!LOCALHOST_REGEXP.test(storybookUrl)) {
     return browser === null || browser === void 0 ? void 0 : browser.get(appendIframePath(storybookUrl));
   }
-
   try {
     if (resolver) {
       browserLogger.debug('Resolving storybook url with custom resolver');
       const resolvedUrl = await resolver();
       browserLogger.debug(`Resolver storybook url ${resolvedUrl}`);
       return browser.get(appendIframePath(resolvedUrl));
-    } // NOTE: getUrlChecker already calls `browser.get` so we don't need another one
-
-
+    }
+    // NOTE: getUrlChecker already calls `browser.get` so we don't need another one
     return void (await resolveStorybookUrl(appendIframePath(storybookUrl), getUrlChecker(browser)));
   } catch (error) {
     browserLogger.error('Failed to resolve storybook URL', error instanceof Error ? error.message : '');
     throw error;
   }
 }
-
 async function resolveCreeveyHost(browser, port) {
   if (creeveyServerHost != null) return creeveyServerHost;
   const addresses = getAddresses();
   creeveyServerHost = await browser.executeAsyncScript(function (hosts, port, callback) {
     void Promise.all(hosts.map(function (host) {
-      return new Promise(function (resolve, reject) {
-        setTimeout(reject, 10000); // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-
-        fetch('//' + host + ':' + port + '/ping').then(resolve).catch(reject);
-      }).then(function (response) {
+      return Promise.race([
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+      fetch('http://' + host + ':' + port + '/ping').then(function (response) {
         return response.text();
-      }).then(function (pong) {
+      }), new Promise((_resolve, reject) => {
+        setTimeout(reject, 5000);
+      })]).then(function (pong) {
         return pong == 'pong' ? host : null;
       }).catch(function () {
         return null;
@@ -422,21 +407,17 @@ async function resolveCreeveyHost(browser, port) {
   if (creeveyServerHost == null) throw new Error("Can't reach creevey server from a browser");
   return creeveyServerHost;
 }
-
-export async function loadStoriesFromBrowser(port) {
+export async function loadStoriesFromBrowser() {
   if (!browser) throw new Error("Can't get stories from browser if webdriver isn't connected");
-  const host = await resolveCreeveyHost(browser, port);
-  const stories = await browser.executeAsyncScript(function (creeveyHost, creeveyPort, callback) {
-    window.__CREEVEY_SERVER_HOST__ = creeveyHost;
-    window.__CREEVEY_SERVER_PORT__ = creeveyPort;
+  const stories = await browser.executeAsyncScript(function (callback) {
     void window.__CREEVEY_GET_STORIES__().then(callback);
-  }, host, port);
+  });
   if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
   return stories;
 }
-export async function getBrowser(config, name) {
+export async function getBrowser(config, options) {
   if (browser) return browser;
-  browserName = name;
+  browserName = options.browser;
   const browserConfig = config.browsers[browserName];
   const {
     gridUrl = config.gridUrl,
@@ -447,30 +428,56 @@ export async function getBrowser(config, name) {
     ...userCapabilities
   } = browserConfig;
   void limit;
-  const realAddress = address; // TODO Define some capabilities explicitly and define typings
+  const realAddress = address;
 
-  const capabilities = new Capabilities({ ...userCapabilities,
-    pageLoadStrategy: PageLoadStrategy.NONE
+  // TODO Define some capabilities explicitly and define typings
+  const capabilities = new Capabilities({
+    ...userCapabilities,
+    pageLoadStrategy: PageLoadStrategy.EAGER
   });
   subscribeOn('shutdown', () => {
     var _browser;
-
-    (_browser = browser) === null || _browser === void 0 ? void 0 : _browser.quit().finally(() => // eslint-disable-next-line no-process-exit
+    (_browser = browser) === null || _browser === void 0 || _browser.quit().finally(() =>
+    // eslint-disable-next-line no-process-exit
     process.exit());
     browser = null;
   });
-
   try {
     var _await$browser$getSes;
-
     const url = new URL(gridUrl);
     url.username = url.username ? '********' : '';
     url.password = url.password ? '********' : '';
-    browserLogger.debug(`(${name}) Connecting to Selenium ${chalk.magenta(url.toString())}`);
-    browser = await new Builder().usingServer(gridUrl).withCapabilities(capabilities).build();
+    browserLogger.debug(`(${browserName}) Connecting to Selenium ${chalk.magenta(url.toString())}`);
+    const prefs = new logging.Preferences();
+    if (options.trace) {
+      for (const type of Object.values(logging.Type)) {
+        prefs.setLevel(type, logging.Level.ALL);
+      }
+    }
+
+    // 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 sessionId = (_await$browser$getSes = await browser.getSession()) === null || _await$browser$getSes === void 0 ? void 0 : _await$browser$getSes.getId();
     let browserHost = '';
-
     try {
       const {
         Name
@@ -479,66 +486,56 @@ export async function getBrowser(config, name) {
     } catch (_) {
       /* noop */
     }
-
-    browserLogger.debug(`(${name}) Connected successful with ${[chalk.green(browserHost), chalk.magenta(sessionId)].filter(Boolean).join(':')}`);
+    browserLogger.debug(`(${browserName}) Connected successful with ${[chalk.green(browserHost), chalk.magenta(sessionId)].filter(Boolean).join(':')}`);
     browserLogger = getLogger(sessionId);
     prefix.apply(browserLogger, {
       format(level) {
         const levelColor = colors[level.toUpperCase()];
-        return `[${name}:${chalk.gray(sessionId)}] ${levelColor(level)} =>`;
+        return `[${browserName}:${chalk.gray(sessionId)}] ${levelColor(level)} =>`;
       }
-
     });
     await runSequence([() => {
       var _browser2;
-
       return (_browser2 = browser) === null || _browser2 === void 0 ? void 0 : _browser2.manage().setTimeouts({
-        pageLoad: 5000,
+        pageLoad: 10000,
         script: 60000
       });
     }, () => viewport && browser && resizeViewport(browser, viewport), () => browser && openStorybookPage(browser, realAddress, config.resolveStorybookUrl), () => browser && waitForStorybook(browser)], () => !isShuttingDown.current);
   } catch (originalError) {
-    var _await$browser$getCur, _browser4;
-
+    var _browser4;
     if (isShuttingDown.current) {
       var _browser3;
-
-      (_browser3 = browser) === null || _browser3 === void 0 ? void 0 : _browser3.quit().catch(noop);
+      (_browser3 = browser) === null || _browser3 === void 0 || _browser3.quit().catch(noop);
       browser = null;
       return null;
     }
-
     if (originalError instanceof Error && originalError.name == 'ResolveUrlError') throw originalError;
-    const error = new Error(`Can't load storybook root page by URL ${(_await$browser$getCur = await ((_browser4 = browser) === null || _browser4 === void 0 ? void 0 : _browser4.getCurrentUrl())) !== null && _await$browser$getCur !== void 0 ? _await$browser$getCur : realAddress}`);
+    const error = new Error(`Can't load storybook root page by URL ${(await ((_browser4 = browser) === null || _browser4 === void 0 ? void 0 : _browser4.getCurrentUrl())) ?? realAddress}`);
     if (originalError instanceof Error) error.stack = originalError.stack;
     throw error;
   }
-
   if (_storybookGlobals) {
     await updateStorybookGlobals(browser, _storybookGlobals);
   }
-
-  await browser.executeScript(function (workerId) {
+  const creeveyHost = await resolveCreeveyHost(browser, options.port);
+  await browser.executeScript(function (workerId, creeveyHost, creeveyPort) {
     window.__CREEVEY_WORKER_ID__ = workerId;
-  }, process.pid);
+    window.__CREEVEY_SERVER_HOST__ = creeveyHost;
+    window.__CREEVEY_SERVER_PORT__ = creeveyPort;
+  }, process.pid, creeveyHost, options.port);
   return browser;
 }
-
 async function updateStoryArgs(browser, story, updatedArgs) {
-  const Events = await importStorybookCoreEvents();
   await browser.executeAsyncScript(function (storyId, updatedArgs, UPDATE_STORY_ARGS, STORY_RENDERED, callback) {
     window.__STORYBOOK_ADDONS_CHANNEL__.once(STORY_RENDERED, callback);
-
     window.__STORYBOOK_ADDONS_CHANNEL__.emit(UPDATE_STORY_ARGS, {
       storyId,
       updatedArgs
     });
-  }, story.id, updatedArgs, Events.UPDATE_STORY_ARGS, Events.STORY_RENDERED);
+  }, story.id, updatedArgs, UPDATE_STORY_ARGS, STORY_RENDERED);
 }
-
 export async function closeBrowser() {
   if (!browser) return;
-
   try {
     await browser.quit();
   } finally {
@@ -546,22 +543,18 @@ export async function closeBrowser() {
   }
 }
 export async function switchStory() {
-  var _this$currentTest, _this$currentTest$ctx, _parameters$creevey;
-
+  var _this$currentTest;
   let testOrSuite = this.currentTest;
   if (!testOrSuite) throw new Error("Can't switch story, because test context doesn't have 'currentTest' field");
   this.testScope.length = 0;
   this.screenshots.length = 0;
   this.testScope.push(this.browserName);
-
   while ((_testOrSuite = testOrSuite) !== null && _testOrSuite !== void 0 && _testOrSuite.title) {
     var _testOrSuite;
-
     this.testScope.push(testOrSuite.title);
     testOrSuite = testOrSuite.parent;
   }
-
-  const story = (_this$currentTest = this.currentTest) === null || _this$currentTest === void 0 ? void 0 : (_this$currentTest$ctx = _this$currentTest.ctx) === null || _this$currentTest$ctx === void 0 ? void 0 : _this$currentTest$ctx.story;
+  const story = (_this$currentTest = this.currentTest) === null || _this$currentTest === void 0 || (_this$currentTest = _this$currentTest.ctx) === null || _this$currentTest === void 0 ? void 0 : _this$currentTest.story;
   if (!story) throw new Error(`Current test '${this.testScope.join('/')}' context doesn't have 'story' field`);
   const {
     id,
@@ -570,27 +563,22 @@ export async function switchStory() {
     parameters
   } = story;
   const {
-    captureElement = '#root',
+    captureElement = `#${storybookRootID}`,
     waitForReady,
     ignoreElements
-  } = (_parameters$creevey = parameters.creevey) !== null && _parameters$creevey !== void 0 ? _parameters$creevey : {};
+  } = parameters.creevey ?? {};
   browserLogger.debug(`Switching to story ${chalk.cyan(kind)}/${chalk.cyan(name)} by id ${chalk.magenta(id)}`);
   if (captureElement) Object.defineProperty(this, 'captureElement', {
     enumerable: true,
     configurable: true,
     get: () => this.browser.findElement(By.css(captureElement))
   });else Reflect.deleteProperty(this, 'captureElement');
-
   this.takeScreenshot = () => takeScreenshot(this.browser, captureElement, ignoreElements);
-
   this.updateStoryArgs = updatedArgs => updateStoryArgs(this.browser, story, updatedArgs);
-
   this.testScope.reverse();
   let storyPlayResolver;
   let waitForComplete = new Promise(resolve => storyPlayResolver = resolve);
   const unsubscribe = subscribeOn('stories', message => {
-    var _payload$captureEleme, _payload$ignoreElemen;
-
     if (message.type != 'capture') return;
     const {
       payload = {},
@@ -598,7 +586,7 @@ export async function switchStory() {
         imageName
       } = {}
     } = message;
-    void takeScreenshot(this.browser, (_payload$captureEleme = payload.captureElement) !== null && _payload$captureEleme !== void 0 ? _payload$captureEleme : captureElement, (_payload$ignoreElemen = payload.ignoreElements) !== null && _payload$ignoreElemen !== void 0 ? _payload$ignoreElemen : ignoreElements).then(screenshot => {
+    void takeScreenshot(this.browser, payload.captureElement ?? captureElement, payload.ignoreElements ?? ignoreElements).then(screenshot => {
       this.screenshots.push({
         imageName,
         screenshot
@@ -617,17 +605,14 @@ export async function switchStory() {
     kind,
     name
   }, waitForReady);
-
   if (isCaptureCalled) {
     while (!(await waitForComplete)) {
       waitForComplete = new Promise(resolve => storyPlayResolver = resolve);
     }
   }
-
   unsubscribe();
   browserLogger.debug(`Story ${chalk.magenta(id)} ready for capturing`);
 }
-
 async function insertIgnoreStyles(browser, ignoreElements) {
   const ignoreSelectors = Array.prototype.concat(ignoreElements).filter(Boolean);
   if (!ignoreSelectors.length) return null;
@@ -636,7 +621,6 @@ async function insertIgnoreStyles(browser, ignoreElements) {
     return window.__CREEVEY_INSERT_IGNORE_STYLES__(ignoreSelectors);
   }, ignoreSelectors);
 }
-
 async function removeIgnoreStyles(browser, ignoreStyles) {
   if (ignoreStyles) {
     browserLogger.debug('Revert hiding ignored elements');