creevey 0.10.0-beta.7 → 0.10.0-beta.9

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -46,6 +46,24 @@ export const SwapView = withTheme(({ theme, expect, actual, diff }: ViewPropsWit
     setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
   }, []);
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'Space' && e.altKey) {
+        e.preventDefault();
+        handleChangeView();
+      }
+    },
+    [handleChangeView],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     if (loaded) readyForCapture();
   }, [loaded]);

package/src/client/shared/components/PageHeader/ImagePreview.tsx

@@ -70,6 +70,7 @@ export const ImagePreview = withTheme(
       onClick(imageName);
     };
 
+    // TODO Add image name as a title
     return (
       <Button
         onClick={handleClick}

package/src/client/shared/components/ResultsPage.tsx

@@ -1,11 +1,11 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
 import { Placeholder, ScrollArea } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';
 import { PageHeader } from './PageHeader/PageHeader.js';
 import { PageFooter } from './PageFooter/PageFooter.js';
 import { getImageUrl } from '../helpers.js';
-import { getViewMode, VIEW_MODE_KEY } from '../viewMode.js';
+import { getViewMode, VIEW_MODE_KEY, viewModes } from '../viewMode.js';
 import { ImagesViewMode, TestResult } from '../../../types.js';
 
 interface ResultsPageProps {
@@ -77,10 +77,31 @@ export function ResultsPageInternal({
       )
     : [];
 
-  const handleChangeViewMode = (mode: ImagesViewMode): void => {
-    localStorage.setItem(VIEW_MODE_KEY, mode);
-    setViewMode(mode);
-  };
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!canApprove) return;
+      if (e.code === 'Tab') {
+        e.preventDefault();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (e.shiftKey) setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) - 1) % viewModes.length)!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        else setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) + 1) % viewModes.length)!);
+      }
+    },
+    [canApprove],
+  );
+
+  useEffect(() => {
+    localStorage.setItem(VIEW_MODE_KEY, viewMode);
+  }, [viewMode]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
 
   return (
     <Container height={height}>
@@ -92,7 +113,7 @@ export function ResultsPageInternal({
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
-          onViewModeChange={handleChangeViewMode}
+          onViewModeChange={setViewMode}
           onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />

package/src/client/web/CreeveyApp.tsx

@@ -17,7 +17,7 @@ import {
   CreeveyViewFilter,
   getFailedTests,
 } from '../shared/helpers.js';
-import { CreeveyContext } from './CreeveyContext.js';
+import { CreeveyContext, FocusableItem } from './CreeveyContext.js';
 import { KeyboardEvents } from './KeyboardEventsContext.js';
 import { SideBar } from './CreeveyView/SideBar/index.js';
 import { ResultsPage } from '../shared/components/ResultsPage.js';
@@ -59,8 +59,9 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   const failedTests = useMemo(() => getFailedTests(tests), [tests]);
 
   const [retry, setRetry] = useState(openedTest?.results?.length ?? 0);
-  const result = openedTest?.results?.[retry - 1] ?? { images: {} };
-  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
+  const result = useMemo(() => openedTest?.results?.[retry - 1], [openedTest, retry]);
+  const [imageName, setImageName] = useState(Object.keys(result?.images ?? {})[0] ?? '');
+  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
   const canApprove = useMemo(
     () =>
       Boolean(
@@ -94,6 +95,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
     (test: CreeveyTest): void => {
       const testPath = getTestPath(test);
       setSearchParams(testPath);
+      setSidebarFocusedItem(testPath);
       updateTests((draft) => {
         openSuite(draft, testPath, true);
         openTest(testPath);
@@ -103,11 +105,24 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   );
 
   const handleGoToNextFailedTest = useCallback(() => {
-    if (failedTests.length <= 1) return;
+    if (failedTests.length == 0) return;
     const currentTest = failedTests.findIndex((t) => t.id === openedTest?.id);
-    const nextFailedTest = failedTests[currentTest + 1] || failedTests[0];
-    handleOpenTest(nextFailedTest);
-  }, [failedTests, handleOpenTest, openedTest?.id]);
+    const failedImages = Object.entries(result?.images ?? {})
+      .filter(([name, image]) =>
+        // TODO Move to helpers, it duplicates in a few places
+        Boolean(image?.error != null && openedTest?.approved?.[name] != retry - 1 && result?.status != 'success'),
+      )
+      .map(([name]) => name);
+    if (
+      failedImages.length > 1 &&
+      (failedTests.length == 1 || failedImages.indexOf(imageName) < failedImages.length - 1)
+    ) {
+      setImageName((name) => failedImages[failedImages.indexOf(name) + 1] ?? failedImages[0]);
+    } else {
+      const nextFailedTest = failedTests[currentTest + 1] ?? failedTests[0];
+      handleOpenTest(nextFailedTest);
+    }
+  }, [failedTests, handleOpenTest, openedTest, retry, result, imageName]);
 
   const handleImageApproveNew = useCallback((): void => {
     const id = openedTest?.id;
@@ -189,12 +204,15 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
       value={{
         isReport: initialState.isReport,
         isRunning,
+        onImageNext: canApprove ? handleGoToNextFailedTest : undefined,
         onImageApprove: canApprove ? handleImageApproveAndGoNext : undefined,
         onApproveAll: handleApproveAll,
         onStart: handleStart,
         onStop: handleStop,
         onSuiteOpen: handleSuiteOpen,
         onSuiteToggle: handleSuiteToggle,
+        sidebarFocusedItem,
+        setSidebarFocusedItem,
       }}
     >
       <ThemeProvider theme={ensure(themes[theme])}>

package/src/client/web/CreeveyContext.tsx

@@ -1,26 +1,35 @@
 import React, { useContext } from 'react';
 import { CreeveySuite, noop } from '../../types.js';
 
+export type SuitePath = string[];
+export type FocusableItem = null | SuitePath;
+
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
   onStop: () => void;
+  onImageNext?: () => void;
   onImageApprove?: () => void;
   onApproveAll: () => void;
   onStart: (rootSuite: CreeveySuite) => void;
   onSuiteOpen: (path: string[], opened: boolean) => void;
   onSuiteToggle: (path: string[], checked: boolean) => void;
+  sidebarFocusedItem: FocusableItem;
+  setSidebarFocusedItem: (item: FocusableItem) => void;
 }
 
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  onImageNext: noop,
   onImageApprove: noop,
   onApproveAll: noop,
   onStop: noop,
   onStart: noop,
   onSuiteOpen: noop,
   onSuiteToggle: noop,
+  sidebarFocusedItem: [],
+  setSidebarFocusedItem: noop,
 });
 
 export const useCreeveyContext = () => useContext(CreeveyContext);

package/src/client/web/CreeveyView/SideBar/Search.tsx

@@ -1,7 +1,7 @@
-import React, { JSX, ChangeEvent, useContext, useRef, useState } from 'react';
+import React, { JSX, ChangeEvent, useRef, useState } from 'react';
 import { SearchIcon, CloseAltIcon } from '@storybook/icons';
 import { styled, Theme, withTheme } from '@storybook/theming';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 interface SearchProps {
   onChange: (arg: string) => void;
@@ -100,7 +100,7 @@ const FilterForm = withTheme(
 );
 
 export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
-  const { setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { setSidebarFocusedItem } = useCreeveyContext();
   const [focussed, onSetFocussed] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
 

package/src/client/web/CreeveyView/SideBar/SideBarFooter.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import { Button } from '@storybook/components';
 import { ChevronRightIcon } from '@storybook/icons';
@@ -21,15 +21,46 @@ const Container = styled.div({
 });
 
 export function SideBarFooter(): JSX.Element {
-  const { onApproveAll, onImageApprove } = useCreeveyContext();
+  const { onApproveAll, onImageApprove, onImageNext } = useCreeveyContext();
+  const [isAlt, setIsAlt] = useState(false);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.code === 'AltLeft') {
+      e.preventDefault();
+      setIsAlt(true);
+    }
+  }, []);
+  const handleKeyUp = useCallback((e: KeyboardEvent) => {
+    if (e.code === 'AltLeft') {
+      e.preventDefault();
+      setIsAlt(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+    document.addEventListener('keyup', handleKeyUp, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+      document.removeEventListener('keyup', handleKeyUp, false);
+    };
+  }, [handleKeyDown, handleKeyUp]);
 
   return (
     <Sticky>
       <Container>
-        <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
-          Approve
-          <ChevronRightIcon />
-        </Button>
+        {isAlt ? (
+          <Button variant="outline" size="medium" onClick={onImageNext} disabled={!onImageApprove}>
+            Next
+            <ChevronRightIcon />
+          </Button>
+        ) : (
+          <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
+            Approve
+            <ChevronRightIcon />
+          </Button>
+        )}
         <Button variant="outline" size="medium" onClick={onApproveAll}>
           Approve all
         </Button>

package/src/client/web/CreeveyView/SideBar/SuiteLink.tsx

@@ -1,11 +1,10 @@
-import React, { JSX, useRef, useContext, useEffect, useMemo } from 'react';
+import React, { JSX, useRef, useEffect, useMemo } from 'react';
 import { ChevronDownIcon, ChevronRightIcon } from '@storybook/icons';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { TestStatusIcon } from './TestStatusIcon.js';
 import { CreeveySuite, isTest } from '../../../../types.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 export interface SuiteLinkProps {
   title: string;
@@ -79,8 +78,7 @@ export const SuiteTitle = styled.span({
 });
 
 export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
-  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
-  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
   const checkboxRef = useRef<Checkbox>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 

package/src/client/web/CreeveyView/SideBar/TestLink.tsx

@@ -1,9 +1,8 @@
 import React, { JSX, useEffect, useCallback, useContext, useMemo, useRef } from 'react';
 import { CreeveyTest } from '../../../../types.js';
 import { TestStatusIcon } from './TestStatusIcon.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 import { SideBarContext } from './SideBar.js';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
 import { Button, Container, SuiteContainer, SuiteTitle } from './SuiteLink.js';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { getTestPath } from '../../../shared/helpers.js';
@@ -20,9 +19,8 @@ const TestContainer = styled(SuiteContainer)({
 });
 
 export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
-  const { onSuiteToggle } = useContext(CreeveyContext);
+  const { onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
   const { onOpenTest } = useContext(SideBarContext);
-  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const emptyResults = (test.results?.length ?? 0) == 0;

package/src/client/web/KeyboardEventsContext.tsx

@@ -1,20 +1,7 @@
-import React, { JSX, useState, useEffect, useCallback, useContext, PropsWithChildren } from 'react';
-import { CreeveySuite, isTest, noop } from '../../types.js';
+import React, { JSX, useEffect, useCallback, PropsWithChildren } from 'react';
+import { CreeveySuite, isTest } from '../../types.js';
 import { CreeveyViewFilter, filterTests, flattenSuite, getSuiteByPath, getTestPath } from '../shared/helpers.js';
-import { CreeveyContext } from './CreeveyContext.js';
-
-export type SuitePath = string[];
-export type FocusableItem = null | SuitePath;
-
-export interface KeyboardEventsContextType {
-  sidebarFocusedItem: FocusableItem;
-  setSidebarFocusedItem: (item: FocusableItem) => void;
-}
-
-export const KeyboardEventsContext = React.createContext<KeyboardEventsContextType>({
-  sidebarFocusedItem: [],
-  setSidebarFocusedItem: noop,
-});
+import { useCreeveyContext } from './CreeveyContext.js';
 
 export const KeyboardEvents = ({
   children,
@@ -24,9 +11,7 @@ export const KeyboardEvents = ({
   rootSuite: CreeveySuite;
   filter: CreeveyViewFilter;
 }>): JSX.Element => {
-  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
-
-  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
+  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
 
   const suiteList = flattenSuite(filterTests(rootSuite, filter));
 
@@ -45,63 +30,70 @@ export const KeyboardEvents = ({
     (e: KeyboardEvent) => {
       if (sidebarFocusedItem === null) return;
 
-      if (e.code === 'Enter') {
-        if (sidebarFocusedItem.length === 0) return;
-
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-        if (!focusedSuite) return;
-        if (!isTest(focusedSuite)) {
-          e.preventDefault();
-          onSuiteOpen(focusedSuite.path, !focusedSuite.opened);
+      switch (e.code) {
+        case 'Enter': {
+          if (sidebarFocusedItem.length === 0) return;
+
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+          if (!focusedSuite) return;
+          if (!isTest(focusedSuite)) {
+            e.preventDefault();
+            onSuiteOpen(focusedSuite.path, !focusedSuite.opened);
+          }
+          if (isTest(focusedSuite) && focusedSuite.results?.length == 0) {
+            e.preventDefault();
+          }
+          return;
         }
-        if (isTest(focusedSuite) && focusedSuite.results?.length == 0) {
+        case 'Space': {
           e.preventDefault();
+          // TODO handle keys in one place
+          if (e.altKey) return;
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+          if (!focusedSuite) return;
+          const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+          onSuiteToggle(path, !focusedSuite.checked);
+          return;
         }
-        return;
-      }
-      if (e.code === 'Space') {
-        e.preventDefault();
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-        if (!focusedSuite) return;
-        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
-        onSuiteToggle(path, !focusedSuite.checked);
-      }
-      if (e.code === 'ArrowDown') {
-        const currentIndex = sidebarFocusedItem.length === 0 ? -1 : getFocusedItemIndex(sidebarFocusedItem);
-        if (currentIndex === suiteList.length - 1) return;
-        const nextSuite = suiteList[currentIndex + 1];
-        const nextPath = isTest(nextSuite.suite) ? getTestPath(nextSuite.suite) : nextSuite.suite.path;
-        setSidebarFocusedItem(nextPath);
-      }
-      if (e.code === 'ArrowUp') {
-        const currentIndex = sidebarFocusedItem.length === 0 ? 0 : getFocusedItemIndex(sidebarFocusedItem);
-        const nextSuite = currentIndex > 0 ? suiteList[currentIndex - 1].suite : rootSuite;
-        const nextPath = isTest(nextSuite) ? getTestPath(nextSuite) : nextSuite.path;
-        setSidebarFocusedItem(nextPath);
-      }
-
-      if (e.code === 'ArrowRight') {
-        if (sidebarFocusedItem.length === 0) return;
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-
-        if (!focusedSuite || isTest(focusedSuite)) return;
-        onSuiteOpen(focusedSuite.path, true);
-      }
-
-      if (e.code === 'ArrowLeft') {
-        if (sidebarFocusedItem.length === 0) return;
-        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
-        if (!focusedSuite) return;
-        if (!isTest(focusedSuite) && focusedSuite.opened) {
-          onSuiteOpen(focusedSuite.path, false);
+        case 'ArrowDown': {
+          const currentIndex = sidebarFocusedItem.length === 0 ? -1 : getFocusedItemIndex(sidebarFocusedItem);
+          if (currentIndex === suiteList.length - 1) return;
+          const nextSuite = suiteList[currentIndex + 1];
+          const nextPath = isTest(nextSuite.suite) ? getTestPath(nextSuite.suite) : nextSuite.suite.path;
+          setSidebarFocusedItem(nextPath);
+          return;
+        }
+        case 'ArrowUp': {
+          const currentIndex = sidebarFocusedItem.length === 0 ? 0 : getFocusedItemIndex(sidebarFocusedItem);
+          const nextSuite = currentIndex > 0 ? suiteList[currentIndex - 1].suite : rootSuite;
+          const nextPath = isTest(nextSuite) ? getTestPath(nextSuite) : nextSuite.path;
+          setSidebarFocusedItem(nextPath);
           return;
         }
+        case 'ArrowRight': {
+          if (sidebarFocusedItem.length === 0) return;
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
 
-        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
-        setSidebarFocusedItem(path.slice(0, -1));
+          if (!focusedSuite || isTest(focusedSuite)) return;
+          onSuiteOpen(focusedSuite.path, true);
+          return;
+        }
+        case 'ArrowLeft': {
+          if (sidebarFocusedItem.length === 0) return;
+          const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+          if (!focusedSuite) return;
+          if (!isTest(focusedSuite) && focusedSuite.opened) {
+            onSuiteOpen(focusedSuite.path, false);
+            return;
+          }
+
+          const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+          setSidebarFocusedItem(path.slice(0, -1));
+          return;
+        }
       }
     },
-    [onSuiteOpen, onSuiteToggle, rootSuite, suiteList, getFocusedItemIndex, sidebarFocusedItem],
+    [onSuiteOpen, onSuiteToggle, rootSuite, suiteList, getFocusedItemIndex, sidebarFocusedItem, setSidebarFocusedItem],
   );
 
   useEffect(() => {
@@ -112,9 +104,5 @@ export const KeyboardEvents = ({
     };
   }, [handleKeyDown]);
 
-  return (
-    <KeyboardEventsContext.Provider value={{ sidebarFocusedItem, setSidebarFocusedItem }}>
-      {children}
-    </KeyboardEventsContext.Provider>
-  );
+  return <>{children}</>;
 };

package/src/server/index.ts

@@ -1,4 +1,5 @@
 import cluster from 'cluster';
+import path from 'path';
 import { readConfig, defaultBrowser } from './config.js';
 import { Options, Config, BrowserConfigObject, isWorkerMessage } from '../types.js';
 import { logger } from './logger.js';
@@ -8,6 +9,7 @@ import { isInsideDocker } from './utils.js';
 import { sendWorkerMessage } from './messages.js';
 import { playwrightDockerFile } from './playwright/docker-file.js';
 import { buildImage } from './docker.js';
+import { writeFile } from 'fs/promises';
 
 async function startWebdriverServer(browser: string, config: Config, options: Options): Promise<string | undefined> {
   if (config.webdriver === SeleniumWebdriver) {
@@ -79,6 +81,9 @@ export default async function (options: Options): Promise<void> {
   const { browser = defaultBrowser, update, ui, port } = options;
   let gridUrl = cluster.isPrimary ? config.gridUrl : options.gridUrl;
 
+  // TODO Add package.json with `"type": "commonjs"` as workaround for esm packages to load `data.js`
+  await writeFile(path.join(config.reportDir, 'package.json'), '{"type": "commonjs"}');
+
   // NOTE: We don't need docker nor selenoid for update option
   if (
     !(gridUrl || (Object.values(config.browsers) as BrowserConfigObject[]).every(({ gridUrl }) => gridUrl)) &&

package/src/server/playwright/internal.ts

@@ -56,11 +56,13 @@ export class InternalBrowser {
   #sessionId: string = v4();
   #serverHost: string | null = null;
   #serverPort: number;
+  #storybookGlobals?: StorybookGlobals;
   #unsubscribe: () => void = noop;
-  constructor(browser: Browser, page: Page, port: number) {
+  constructor(browser: Browser, page: Page, port: number, storybookGlobals?: StorybookGlobals) {
     this.#browser = browser;
     this.#page = page;
     this.#serverPort = port;
+    this.#storybookGlobals = storybookGlobals;
     this.#unsubscribe = subscribeOn('shutdown', () => {
       void this.closeBrowser();
     });
@@ -112,6 +114,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();
 
@@ -224,7 +227,7 @@ export class InternalBrowser {
 
     // TODO Add debug output
 
-    const internalBrowser = new InternalBrowser(browser, page, options.port);
+    const internalBrowser = new InternalBrowser(browser, page, options.port, _storybookGlobals);
 
     try {
       if (isShuttingDown.current) return null;
@@ -232,7 +235,6 @@ export class InternalBrowser {
         browserName,
         viewport,
         storybookUrl: address,
-        storybookGlobals: _storybookGlobals,
         resolveStorybookUrl: config.resolveStorybookUrl,
       });
 
@@ -254,13 +256,11 @@ export class InternalBrowser {
     browserName,
     viewport,
     storybookUrl,
-    storybookGlobals,
     resolveStorybookUrl,
   }: {
     browserName: string;
     viewport?: { width: number; height: number };
     storybookUrl: string;
-    storybookGlobals?: StorybookGlobals;
     resolveStorybookUrl?: () => Promise<string>;
   }) {
     const sessionId = this.#sessionId;
@@ -278,7 +278,7 @@ export class InternalBrowser {
       [
         () => this.openStorybookPage(storybookUrl, resolveStorybookUrl),
         () => this.waitForStorybook(),
-        () => this.updateStorybookGlobals(storybookGlobals),
+        () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
         () => this.resizeViewport(viewport),
@@ -357,13 +357,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;
 
     logger().debug('Applying storybook globals');
     await this.#page.evaluate((globals: StorybookGlobals) => {
       window.__CREEVEY_UPDATE_GLOBALS__(globals);
-    }, globals);
+    }, this.#storybookGlobals);
   }
 
   private async resolveCreeveyHost(): Promise<void> {