creevey 0.9.0-non-webpack.2.fix-capture-element → 0.9.1

package/{lib/types → dist}/server/selenium/browser.d.ts

@@ -1,17 +1,19 @@
-import { Context } from 'mocha';
-import { WebDriver } from 'selenium-webdriver';
-import { Config, StorybookGlobals, StoriesRaw } from '../../types';
-declare global {
-    interface Window {
-        __CREEVEY_RESTORE_SCROLL__?: () => void;
-        __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
-        __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
-        __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
-    }
-}
-export declare function takeScreenshot(browser: WebDriver, captureElement?: string | null, ignoreElements?: string | string[] | null): Promise<string>;
-export declare function updateStorybookGlobals(browser: WebDriver, globals: StorybookGlobals): Promise<void>;
-export declare function loadStoriesFromBrowser(port: number): Promise<StoriesRaw>;
-export declare function getBrowser(config: Config, name: string): Promise<WebDriver | null>;
-export declare function closeBrowser(): Promise<void>;
-export declare function switchStory(this: Context): Promise<void>;
+import { Context } from 'mocha';
+import { WebDriver } from 'selenium-webdriver';
+import { Config, StorybookGlobals, StoriesRaw, Options } from '../../types.js';
+declare global {
+    interface Window {
+        __CREEVEY_RESTORE_SCROLL__?: () => void;
+        __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
+        __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
+        __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
+    }
+}
+export declare function takeScreenshot(browser: WebDriver, captureElement?: string | null, ignoreElements?: string | string[] | null): Promise<string>;
+export declare function updateStorybookGlobals(browser: WebDriver, globals: StorybookGlobals): Promise<void>;
+export declare function loadStoriesFromBrowser(): Promise<StoriesRaw>;
+export declare function getBrowser(config: Config, options: Options & {
+    browser: string;
+}): Promise<WebDriver | null>;
+export declare function closeBrowser(): Promise<void>;
+export declare function switchStory(this: Context): Promise<void>;

package/dist/server/selenium/browser.js

@@ -0,0 +1,640 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.takeScreenshot = takeScreenshot;
+exports.updateStorybookGlobals = updateStorybookGlobals;
+exports.loadStoriesFromBrowser = loadStoriesFromBrowser;
+exports.getBrowser = getBrowser;
+exports.closeBrowser = closeBrowser;
+exports.switchStory = switchStory;
+const core_events_1 = require("@storybook/core-events");
+const chalk_1 = __importDefault(require("chalk"));
+const http_1 = __importDefault(require("http"));
+const https_1 = __importDefault(require("https"));
+const loglevel_1 = __importDefault(require("loglevel"));
+const loglevel_plugin_prefix_1 = __importDefault(require("loglevel-plugin-prefix"));
+const os_1 = require("os");
+const pngjs_1 = require("pngjs");
+const selenium_webdriver_1 = require("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';
+const capabilities_js_1 = require("selenium-webdriver/lib/capabilities.js");
+const types_js_1 = require("../../types.js");
+const logger_js_1 = require("../logger.js");
+const messages_js_1 = require("../messages.js");
+const utils_js_1 = require("../utils.js");
+// type UnPromise<P> = P extends Promise<infer T> ? T : never;
+const storybookRootID = 'storybook-root';
+const DOCKER_INTERNAL = 'host.docker.internal';
+let browserLogger = logger_js_1.logger;
+let browserName = '';
+let browser = null;
+// let context: UnPromise<ReturnType<typeof BrowsingContext>> | null = null;
+let creeveyServerHost = null;
+let creeveyServerPort = null;
+function getSessionData(grid, sessionId = '') {
+    const gridUrl = new URL(grid);
+    gridUrl.pathname = `/host/${sessionId}`;
+    return new Promise((resolve, reject) => (gridUrl.protocol == 'https:' ? https_1.default : http_1.default).get(gridUrl.toString(), (res) => {
+        if (res.statusCode !== 200) {
+            reject(new Error(`Couldn't get session data for ${sessionId}. Status code: ${res.statusCode ?? 'Unknown'}`));
+            return;
+        }
+        let data = '';
+        res.setEncoding('utf-8');
+        res.on('data', (chunk) => (data += chunk));
+        res.on('end', () => {
+            try {
+                resolve(JSON.parse(data));
+            }
+            catch (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((0, os_1.networkInterfaces)())
+        .filter(types_js_1.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(utils_js_1.LOCALHOST_REGEXP, ip);
+        browserLogger.debug(`Checking storybook availability on ${chalk_1.default.magenta(resolvedUrl)}`);
+        if (await checkUrl(resolvedUrl)) {
+            browserLogger.debug(`Resolved storybook url ${chalk_1.default.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"
+        }
+    } while (predicate(source));
+    return source;
+}
+function getUrlChecker(browser) {
+    return async (url) => {
+        try {
+            // NOTE: Before trying a new url, reset the current one
+            browserLogger.debug(`Opening ${chalk_1.default.magenta('about:blank')} page`);
+            await openUrlAndWaitForPageSource(browser, 'about:blank', (source) => !source.includes('<body></body>'));
+            browserLogger.debug(`Opening ${chalk_1.default.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
+            // 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_1.default.cyan(`#${storybookRootID}`)} existence on ${chalk_1.default.magenta(url)}`);
+            return source.includes(`id="${storybookRootID}"`);
+        }
+        catch {
+            return false;
+        }
+    };
+}
+async function waitForStorybook(browser) {
+    browserLogger.debug('Waiting for `setStories` event to make sure that storybook is initiated');
+    const isTimeout = await Promise.race([
+        new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(true);
+            }, 60000);
+        }),
+        (async () => {
+            let wait = true;
+            do {
+                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;
+                    }, core_events_1.SET_GLOBALS);
+                }
+                catch (e) {
+                    browserLogger.debug('An error has been caught during the script:', e);
+                }
+            } while (wait);
+            return false;
+        })(),
+    ]);
+    // TODO Change the message to describe a reason why it might happen
+    if (isTimeout)
+        throw new Error('Failed to wait `setStories` event');
+}
+async function resetMousePosition(browser) {
+    browserLogger.debug('Resetting mouse position to the top-left corner');
+    const browserName = (await browser.getCapabilities()).getBrowserName();
+    const [browserVersion] = (await browser.getCapabilities()).getBrowserVersion()?.split('.') ??
+        (await browser.getCapabilities()).get('version')?.split('.') ??
+        [];
+    // NOTE Reset mouse position to support keweb selenium grid browser versions
+    if (browserName == 'chrome' && browserVersion == '70') {
+        const { top, left, width, height } = await browser.executeScript(function () {
+            const bodyRect = document.body.getBoundingClientRect();
+            return {
+                top: bodyRect.top,
+                left: bodyRect.left,
+                width: bodyRect.width,
+                height: bodyRect.height,
+            };
+        });
+        // NOTE Bridge mode doesn't support `Origin.VIEWPORT`, move mouse relative
+        await browser
+            .actions({ bridge: true })
+            .move({
+            origin: browser.findElement(selenium_webdriver_1.By.css('body')),
+            x: Math.ceil((-1 * width) / 2) - left,
+            y: Math.ceil((-1 * height) / 2) - top,
+        })
+            .perform();
+    }
+    else if (browserName == 'firefox' && browserVersion == '61') {
+        // NOTE Firefox for some reason moving by 0 x 0 move cursor in bottom left corner :sad:
+        await browser.actions().move({ origin: selenium_webdriver_1.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
+        await browser.actions().move({ origin: selenium_webdriver_1.Origin.VIEWPORT, x: 0, y: 0 }).perform();
+    }
+}
+async function resizeViewport(browser, viewport) {
+    const windowRect = await browser.manage().window().getRect();
+    const { innerWidth, innerHeight } = await browser.executeScript(function () {
+        return {
+            innerWidth: window.innerWidth,
+            innerHeight: window.innerHeight,
+        };
+    });
+    browserLogger.debug(`Resizing viewport from ${innerWidth}x${innerHeight} to ${viewport.width}x${viewport.height}`);
+    const dWidth = windowRect.width - innerWidth;
+    const dHeight = windowRect.height - innerHeight;
+    await browser
+        .manage()
+        .window()
+        .setRect({
+        width: viewport.width + dWidth,
+        height: viewport.height + dHeight,
+    });
+}
+const getScrollBarWidth = (() => {
+    let scrollBarWidth = null;
+    return async (browser) => {
+        if (scrollBarWidth != null)
+            return Promise.resolve(scrollBarWidth);
+        scrollBarWidth = await browser.executeScript(function () {
+            // 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
+            var widthDiff = div.offsetWidth - div.clientWidth;
+            document.body.removeChild(div);
+            return widthDiff;
+        });
+        return scrollBarWidth;
+    };
+})();
+// NOTE Firefox and Safari take viewport screenshot without scrollbars
+async function hasScrollBar(browser) {
+    const browserName = (await browser.getCapabilities()).getBrowserName();
+    const [browserVersion] = (await browser.getCapabilities()).getBrowserVersion()?.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 normalizedElementRect = {
+        left: elementRect.left - windowRect.left,
+        right: elementRect.left + elementRect.width - windowRect.left,
+        top: elementRect.top - windowRect.top,
+        bottom: elementRect.top + elementRect.height - windowRect.top,
+    };
+    const isFitHorizontally = windowRect.width >= elementRect.width + normalizedElementRect.left;
+    const isFitVertically = windowRect.height >= elementRect.height + normalizedElementRect.top;
+    const viewportWidth = windowRect.width - (isFitVertically ? 0 : scrollBarWidth);
+    const viewportHeight = windowRect.height - (isFitHorizontally ? 0 : scrollBarWidth);
+    const cols = Math.ceil(elementRect.width / viewportWidth);
+    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));
+            const dy = Math.min(viewportHeight * row + normalizedElementRect.top, Math.max(0, normalizedElementRect.bottom - viewportHeight));
+            await browser.executeScript(function (x, y) {
+                window.scrollTo(x, y);
+            }, dx, dy);
+            screens.push(await browser.takeScreenshot());
+        }
+    }
+    const images = screens.map((s) => Buffer.from(s, 'base64')).map((b) => pngjs_1.PNG.sync.read(b));
+    const compositeImage = new pngjs_1.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);
+            const row = Math.floor(y / viewportHeight);
+            const isLastCol = cols - col == 1;
+            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 +
+                // 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];
+            compositeImage.data[i + 2] = image.data[j + 2];
+            compositeImage.data[i + 3] = image.data[j + 3];
+        }
+    }
+    return pngjs_1.PNG.sync.write(compositeImage).toString('base64');
+}
+async function takeScreenshot(browser, captureElement, ignoreElements) {
+    let screenshot;
+    const ignoreStyles = await insertIgnoreStyles(browser, ignoreElements);
+    if (browserLogger.getLevel() <= loglevel_1.default.levels.DEBUG) {
+        const { innerWidth, innerHeight } = await browser.executeScript(function () {
+            return {
+                innerWidth: window.innerWidth,
+                innerHeight: window.innerHeight,
+            };
+        });
+        browserLogger.debug(`Viewport size is: ${innerWidth}x${innerHeight}`);
+    }
+    try {
+        if (!captureElement) {
+            browserLogger.debug('Capturing viewport screenshot');
+            screenshot = await browser.takeScreenshot();
+            browserLogger.debug('Viewport screenshot is captured');
+        }
+        else {
+            browserLogger.debug(`Checking is element ${chalk_1.default.cyan(captureElement)} fit into viewport`);
+            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
+                var elementRect = element.getBoundingClientRect();
+                return {
+                    elementRect: {
+                        top: elementRect.top,
+                        left: elementRect.left,
+                        width: elementRect.width,
+                        height: elementRect.height,
+                    },
+                    // 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,
+                    },
+                };
+            }, captureElement);
+            const { elementRect, windowRect } = 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_1.default.cyan(captureElement)} with size: ${elementRect.width}x${elementRect.height}`);
+            }
+            else
+                browserLogger.debug(`Capturing composite screenshot image of ${chalk_1.default.cyan(captureElement)} with size: ${elementRect.width}x${elementRect.height}`);
+            // 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(selenium_webdriver_1.By.css(captureElement)).takeScreenshot()
+                : // TODO pointer-events: none, need to research
+                    await takeCompositeScreenshot(browser, windowRect, elementRect);
+            browserLogger.debug(`${chalk_1.default.cyan(captureElement)} is captured`);
+        }
+    }
+    finally {
+        await removeIgnoreStyles(browser, ignoreStyles);
+    }
+    return screenshot;
+}
+async function selectStory(browser, storyId, waitForReady = false) {
+    browserLogger.debug(`Triggering 'SetCurrentStory' event with storyId ${chalk_1.default.magenta(storyId)}`);
+    const result = await browser.executeAsyncScript(function (id, shouldWaitForReady, callback) {
+        if (typeof window.__CREEVEY_SELECT_STORY__ == 'undefined') {
+            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.",
+            ]);
+            return;
+        }
+        void window.__CREEVEY_SELECT_STORY__(id, shouldWaitForReady, callback);
+    }, storyId, waitForReady);
+    const [errorMessage, isCaptureCalled = false] = result ?? [];
+    if (errorMessage)
+        throw new Error(errorMessage);
+    return isCaptureCalled;
+}
+async function updateStorybookGlobals(browser, globals) {
+    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 (!utils_js_1.LOCALHOST_REGEXP.test(storybookUrl)) {
+        return 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}`);
+            await browser.get(appendIframePath(resolvedUrl));
+        }
+        else {
+            // NOTE: getUrlChecker already calls `browser.get` so we don't need another one
+            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) {
+    const addresses = getAddresses();
+    creeveyServerPort = port;
+    creeveyServerHost = await browser.executeAsyncScript(function (hosts, port, callback) {
+        void Promise.all(hosts.map(function (host) {
+            return Promise.race([
+                // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+                fetch('http://' + host + ':' + port + '/ping').then(function (response) {
+                    return response.text();
+                }),
+                new Promise((_resolve, reject) => {
+                    setTimeout(reject, 5000);
+                }),
+            ])
+                .then(function (pong) {
+                return pong == 'pong' ? host : null;
+            })
+                .catch(function () {
+                return null;
+            });
+        })).then(function (hosts) {
+            callback(hosts.find(function (host) {
+                return host != null;
+            }));
+        });
+    }, addresses, port);
+    if (creeveyServerHost == null)
+        throw new Error("Can't reach creevey server from a browser");
+}
+async function loadStoriesFromBrowser() {
+    if (!browser)
+        throw new Error("Can't get stories from browser if webdriver isn't connected");
+    const stories = await browser.executeAsyncScript(function (callback) {
+        void window.__CREEVEY_GET_STORIES__().then(callback);
+    });
+    if (!stories)
+        throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
+    return stories;
+}
+async function getBrowser(config, options) {
+    if (browser)
+        return browser;
+    browserName = options.browser;
+    const browserConfig = config.browsers[browserName];
+    const { gridUrl = config.gridUrl, storybookUrl: address = config.storybookUrl, limit, viewport, _storybookGlobals, ...userCapabilities } = browserConfig;
+    void limit;
+    const realAddress = address;
+    // TODO Define some capabilities explicitly and define typings
+    const capabilities = new selenium_webdriver_1.Capabilities({ ...userCapabilities, pageLoadStrategy: capabilities_js_1.PageLoadStrategy.EAGER });
+    (0, messages_js_1.subscribeOn)('shutdown', () => {
+        void browser?.quit().finally(() => process.exit());
+        browser = null;
+    });
+    try {
+        const url = new URL(gridUrl);
+        url.username = url.username ? '********' : '';
+        url.password = url.password ? '********' : '';
+        browserLogger.debug(`(${browserName}) Connecting to Selenium ${chalk_1.default.magenta(url.toString())}`);
+        const prefs = new selenium_webdriver_1.logging.Preferences();
+        if (options.trace) {
+            for (const type of Object.values(selenium_webdriver_1.logging.Type)) {
+                prefs.setLevel(type, selenium_webdriver_1.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 selenium_webdriver_1.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.getSession()).getId();
+        let browserHost = '';
+        try {
+            const { Name } = await getSessionData(gridUrl, sessionId);
+            if (typeof Name == 'string')
+                browserHost = Name;
+        }
+        catch {
+            /* noop */
+        }
+        browserLogger.debug(`(${browserName}) Connected successful with ${[chalk_1.default.green(browserHost), chalk_1.default.magenta(sessionId)]
+            .filter(Boolean)
+            .join(':')}`);
+        browserLogger = loglevel_1.default.getLogger(sessionId);
+        loglevel_plugin_prefix_1.default.apply(browserLogger, {
+            format(level) {
+                const levelColor = logger_js_1.colors[level.toUpperCase()];
+                return `[${browserName}:${chalk_1.default.gray(sessionId)}] ${levelColor(level)} =>`;
+            },
+        });
+        await (0, utils_js_1.runSequence)([
+            () => browser?.manage().setTimeouts({ pageLoad: 10000, script: 60000 }),
+            () => browser && openStorybookPage(browser, realAddress, config.resolveStorybookUrl),
+            () => browser && waitForStorybook(browser),
+            // NOTE: Selenium draws automation toolbar with some delay after webdriver initialization
+            // NOTE: So if we resize window right after getting webdriver instance we might get situation
+            // NOTE: When the toolbar appears after resize and final viewport size become smaller than we set
+            () => viewport && browser && resizeViewport(browser, viewport),
+        ], () => !utils_js_1.isShuttingDown.current);
+    }
+    catch (originalError) {
+        if (utils_js_1.isShuttingDown.current) {
+            browser?.quit().catch(types_js_1.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?.getCurrentUrl()) ?? realAddress}`);
+        if (originalError instanceof Error)
+            error.stack = originalError.stack;
+        throw error;
+    }
+    if (_storybookGlobals) {
+        await updateStorybookGlobals(browser, _storybookGlobals);
+    }
+    await resolveCreeveyHost(browser, options.port);
+    await updateBrowserGlobalVariables(browser);
+    return browser;
+}
+async function updateBrowserGlobalVariables(browser) {
+    await browser.executeScript(function (workerId, creeveyHost, creeveyPort) {
+        window.__CREEVEY_WORKER_ID__ = workerId;
+        window.__CREEVEY_SERVER_HOST__ = creeveyHost;
+        window.__CREEVEY_SERVER_PORT__ = creeveyPort;
+    }, process.pid, creeveyServerHost, creeveyServerPort);
+}
+async function updateStoryArgs(browser, story, updatedArgs) {
+    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, core_events_1.UPDATE_STORY_ARGS, core_events_1.STORY_RENDERED);
+}
+async function closeBrowser() {
+    if (!browser)
+        return;
+    try {
+        await browser.quit();
+    }
+    finally {
+        browser = null;
+    }
+}
+async function switchStory() {
+    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?.title) {
+        this.testScope.push(testOrSuite.title);
+        testOrSuite = testOrSuite.parent;
+    }
+    const story = this.currentTest?.ctx?.story;
+    if (!story)
+        throw new Error(`Current test '${this.testScope.join('/')}' context doesn't have 'story' field`);
+    const { id, title, name, parameters } = story;
+    const { captureElement = `#${storybookRootID}`, waitForReady, ignoreElements, } = (parameters.creevey ?? {});
+    browserLogger.debug(`Switching to story ${chalk_1.default.cyan(title)}/${chalk_1.default.cyan(name)} by id ${chalk_1.default.magenta(id)}`);
+    if (captureElement)
+        Object.defineProperty(this, 'captureElement', {
+            enumerable: true,
+            configurable: true,
+            get: () => this.browser.findElement(selenium_webdriver_1.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 = (0, messages_js_1.subscribeOn)('stories', (message) => {
+        if (message.type != 'capture')
+            return;
+        const { payload = {}, payload: { imageName } = {} } = message;
+        void takeScreenshot(this.browser, payload.captureElement ?? captureElement, payload.ignoreElements ?? ignoreElements).then((screenshot) => {
+            this.screenshots.push({ imageName, screenshot });
+            void this.browser
+                .executeAsyncScript(function (callback) {
+                window.__CREEVEY_HAS_PLAY_COMPLETED_YET__(callback);
+            })
+                .then((isCompleted) => {
+                storyPlayResolver(isCompleted);
+            });
+            (0, messages_js_1.emitStoriesMessage)({ type: 'capture' });
+        });
+    });
+    await updateBrowserGlobalVariables(this.browser);
+    await resetMousePosition(this.browser);
+    const isCaptureCalled = await selectStory(this.browser, id, waitForReady);
+    if (isCaptureCalled) {
+        while (!(await waitForComplete)) {
+            waitForComplete = new Promise((resolve) => (storyPlayResolver = resolve));
+        }
+    }
+    unsubscribe();
+    browserLogger.debug(`Story ${chalk_1.default.magenta(id)} ready for capturing`);
+}
+async function insertIgnoreStyles(browser, ignoreElements) {
+    const ignoreSelectors = Array.prototype.concat(ignoreElements).filter(Boolean);
+    if (!ignoreSelectors.length)
+        return null;
+    browserLogger.debug('Hiding ignored elements before capturing');
+    return await browser.executeScript(function (ignoreSelectors) {
+        return window.__CREEVEY_INSERT_IGNORE_STYLES__(ignoreSelectors);
+    }, ignoreSelectors);
+}
+async function removeIgnoreStyles(browser, ignoreStyles) {
+    if (ignoreStyles) {
+        browserLogger.debug('Revert hiding ignored elements');
+        await browser.executeScript(function (ignoreStyles) {
+            window.__CREEVEY_REMOVE_IGNORE_STYLES__(ignoreStyles);
+        }, ignoreStyles);
+    }
+}
+//# sourceMappingURL=browser.js.map