creevey 0.9.0 → 0.9.2

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

@@ -1,7 +1,7 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext } from 'react';
 import { transparentize } from 'polished';
 import { ScrollArea } from '@storybook/components';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, Theme, withTheme } from '@storybook/theming';
 import { SideBarHeader } from './SideBarHeader.js';
 import { CreeveySuite, CreeveyTest, noop, isTest } from '../../../../types.js';
 import {
@@ -11,17 +11,18 @@ import {
   countTestsStatus,
   getCheckedTests,
 } from '../../../shared/helpers.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 import { SuiteLink } from './SuiteLink.js';
 import { TestLink } from './TestLink.js';
+import { SideBarFooter } from './SideBarFooter.js';
 
 export const SideBarContext = createContext<{ onOpenTest: (test: CreeveyTest) => void }>({
   onOpenTest: noop,
 });
 
 export interface SideBarProps {
+  testId?: string;
   rootSuite: CreeveySuite;
-  openedTest: CreeveyTest | null;
   onOpenTest: (test: CreeveyTest) => void;
   filter: CreeveyViewFilter;
   setFilter: (filter: CreeveyViewFilter) => void;
@@ -37,7 +38,7 @@ const Container = withTheme(
 );
 
 const ScrollContainer = styled.div({
-  height: 'calc(100vh - 165px)',
+  height: 'calc(100vh - 245px)',
   width: 300,
   flex: 'none',
   overflowY: 'auto',
@@ -46,10 +47,16 @@ const ScrollContainer = styled.div({
   left: '0',
 });
 
+const StyledScrollArea = styled(ScrollArea)({
+  '& > div > div': {
+    height: 'calc(100% - 8px)',
+  },
+});
+
 const Shadow = withTheme(
-  styled.div(({ theme }) => ({
+  styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
+    [position]: '0px',
     position: 'sticky',
-    top: '0px',
     boxShadow: `0 0 5px 2.5px ${transparentize(0.8, theme.color.defaultText)}`,
     zIndex: 3,
   })),
@@ -62,21 +69,22 @@ const SelectAllContainer = styled.div({
 
 const TestsContainer = styled.div({
   position: 'relative',
-  paddingBottom: '40px',
+  paddingBottom: '8px',
+  height: '100%',
 });
 
 const Divider = withTheme(
-  styled.div(({ theme }) => ({
-    position: 'absolute',
+  styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
+    ...(position === 'top' ? { position: 'absolute' } : { position: 'relative', bottom: '8px', marginBottom: '-8px' }),
     height: '8px',
     width: '100%',
-    zIndex: 3,
+    zIndex: 4,
     background: theme.background.content,
   })),
 );
 
-export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }: SideBarProps): JSX.Element {
-  const { onStart, onStop } = useContext(CreeveyContext);
+export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: SideBarProps): JSX.Element {
+  const { onStart, onStop } = useCreeveyContext();
 
   // TODO Maybe need to do flatten first?
   const suite = filterTests(rootSuite, filter);
@@ -100,10 +108,10 @@ export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }
           canStart={countCheckedTests !== 0}
         />
         <ScrollContainer>
-          <ScrollArea vertical>
-            <Shadow />
+          <StyledScrollArea vertical>
+            <Shadow position="top" />
             <TestsContainer>
-              <Divider />
+              <Divider position="top" />
               {/* TODO Output message when nothing found */}
               <SelectAllContainer>
                 <SuiteLink title="Select all" suite={rootSuite} data-testid="selectAll" />
@@ -111,14 +119,17 @@ export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }
               {suiteList.map(({ title, suite }) =>
                 // TODO Update components without re-mount
                 isTest(suite) ? (
-                  <TestLink key={suite.id} title={title} opened={suite.id == openedTest?.id} test={suite} />
+                  <TestLink key={suite.id} title={title} opened={suite.id == testId} test={suite} />
                 ) : (
                   <SuiteLink key={suite.path.join('/')} title={title} suite={suite} data-testid={title} />
                 ),
               )}
             </TestsContainer>
-          </ScrollArea>
+            <Divider position="bottom" />
+          </StyledScrollArea>
+          <Shadow position="bottom" />
         </ScrollContainer>
+        <SideBarFooter />
       </Container>
     </SideBarContext.Provider>
   );

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled, withTheme } from '@storybook/theming';
+import { Button, Icons } from '@storybook/components';
+import { useCreeveyContext } from '../../CreeveyContext.js';
+
+const Sticky = withTheme(
+  styled.div(({ theme }) => ({
+    padding: '24px 16px 8px 16px',
+    background: theme.background.content,
+    height: '50px',
+    zIndex: 5,
+    position: 'sticky',
+    bottom: '0',
+  })),
+);
+
+const Container = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+export function SideBarFooter(): JSX.Element {
+  const { onApproveAll, onImageApprove } = useCreeveyContext();
+
+  return (
+    <Sticky>
+      <Container>
+        <Button secondary onClick={onImageApprove} disabled={!onImageApprove} style={{ paddingRight: 8 }}>
+          Approve
+          <Icons icon="arrowright" style={{ paddingLeft: 4 }} />
+        </Button>
+        <Button secondary outline onClick={onApproveAll}>
+          Approve all
+        </Button>
+      </Container>
+    </Sticky>
+  );
+}

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

@@ -18,7 +18,7 @@ interface SideBarHeaderProps {
 
 const Sticky = withTheme(
   styled.div(({ theme }) => ({
-    padding: '24px 32px 8px',
+    padding: '24px 36px 8px',
     background: theme.background.content,
     height: '130px',
     zIndex: 5,

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

@@ -14,49 +14,67 @@ export interface SuiteLinkProps {
 }
 
 export const Container = withTheme(
-  styled.div<{ theme: Theme; disabled?: boolean }>(({ theme, disabled }) => ({
-    position: 'relative',
-    width: '100%',
-    ...(disabled ? { color: theme.color.mediumdark, pointerEvents: 'none' } : {}),
-  })),
+  styled.div<{ theme: Theme; disabled?: boolean; active?: boolean; focused?: boolean }>(
+    ({ theme, disabled, active, focused }) => ({
+      position: 'relative',
+      width: '100%',
+      height: '28px',
+      lineHeight: '20px',
+      display: 'flex',
+      background: active ? theme.color.secondary : focused ? theme.background.hoverable : 'none',
+      color: active ? theme.color.inverseText : 'inherit',
+      outline: focused ? `1px solid ${theme.color.ancillary}` : 'none',
+      ...(disabled ? { color: theme.color.mediumdark, pointerEvents: 'none' } : {}),
+
+      // NOTE There is no way to trigger hover from js, so we add `.hover` class for testing purpose
+      '&:hover, &.hover': active
+        ? {}
+        : {
+            background: theme.background.hoverable,
+          },
+    }),
+  ),
 );
 
 export const Button = withTheme(
-  styled.button<{ theme: Theme; active?: boolean; focused?: boolean }>(({ theme, active, focused }) => ({
-    width: '100%',
+  styled.button<{ theme: Theme; active?: boolean }>(({ theme, active }) => ({
+    flexGrow: 1,
     boxSizing: 'border-box',
     appearance: 'none',
-    padding: '6px 36px',
-    lineHeight: '20px',
+    padding: '4px 16px 4px 8px',
+    lineHeight: '18px',
     cursor: 'pointer',
     border: 'none',
     zIndex: 1,
     textAlign: 'left',
-    background: active ? theme.color.secondary : focused ? theme.background.hoverable : 'none',
+    background: 'none',
+    outline: 'none',
     color: active ? theme.color.inverseText : 'inherit',
-    outline: focused ? `1px solid ${theme.color.ancillary}` : 'none',
-
-    // NOTE There is no way to trigger hover from js, so we add `.hover` class for testing purpose
-    '&:hover, &.hover': active
-      ? {}
-      : {
-          background: theme.background.hoverable,
-        },
   })),
 );
 
 const ArrowIcon = styled(Icons)({
-  paddingRight: '8px',
+  paddingRight: '4px',
   display: 'inline-block',
-  width: '16px',
-  height: '11px',
+  width: '12px',
+  height: '18px',
+  verticalAlign: 'unset',
 });
 
 export const SuiteContainer = styled.span<{ padding: number }>(({ padding }) => ({
   paddingLeft: padding,
   whiteSpace: 'normal',
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, min-content) auto',
 }));
 
+export const SuiteTitle = styled.span({
+  paddingLeft: '4px',
+  whiteSpace: 'nowrap',
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
 export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
   const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
   const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
@@ -70,6 +88,7 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
       sidebarFocusedItem.every((x) => suite.path.includes(x)),
     [suite, sidebarFocusedItem],
   );
+
   useEffect(
     () => (suite.indeterminate ? checkboxRef.current?.setIndeterminate() : checkboxRef.current?.resetIndeterminate()),
     [suite.indeterminate],
@@ -95,16 +114,7 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
   };
 
   return (
-    <Container>
-      <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} focused={isSuiteFocused} ref={buttonRef}>
-        <TestStatusIcon status={suite.status} skip={suite.skip} />
-        <SuiteContainer padding={Math.max(48, (suite.path.length + 5) * 8)}>
-          {isTest(suite) ||
-            (Boolean(suite.path.length) &&
-              (suite.opened ? <ArrowIcon icon="arrowdown" /> : <ArrowIcon icon="arrowright" />))}
-          {title}
-        </SuiteContainer>
-      </Button>
+    <Container focused={isSuiteFocused}>
       <CheckboxContainer>
         <Checkbox
           ref={checkboxRef}
@@ -113,6 +123,15 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
           onValueChange={handleCheck}
         />
       </CheckboxContainer>
+      <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} ref={buttonRef}>
+        <SuiteContainer padding={(suite.path.length - 1) * 8}>
+          {isTest(suite) ||
+            (Boolean(suite.path.length) &&
+              (suite.opened ? <ArrowIcon icon="arrowdown" /> : <ArrowIcon icon="arrowright" />))}
+          <TestStatusIcon status={suite.status} skip={suite.skip} />
+          <SuiteTitle>{title}</SuiteTitle>
+        </SuiteContainer>
+      </Button>
     </Container>
   );
 }

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

@@ -4,7 +4,7 @@ import { TestStatusIcon } from './TestStatusIcon.js';
 import { CreeveyContext } from '../../CreeveyContext.js';
 import { SideBarContext } from './SideBar.js';
 import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
-import { Button, Container, SuiteContainer } from './SuiteLink.js';
+import { Button, Container, SuiteContainer, SuiteTitle } from './SuiteLink.js';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { getTestPath } from '../../../shared/helpers.js';
 
@@ -48,11 +48,7 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
   }, [test, onOpenTest, setSidebarFocusedItem]);
 
   return (
-    <Container disabled={emptyResults}>
-      <Button onClick={handleOpen} active={opened} focused={isTestFocused} disabled={emptyResults} ref={buttonRef}>
-        <TestStatusIcon inverted={opened} status={test.status} skip={test.skip} />
-        <SuiteContainer padding={(testPath.length + 8) * 8}>{title}</SuiteContainer>
-      </Button>
+    <Container disabled={emptyResults} active={opened} focused={isTestFocused}>
       {/* NOTE Little hack to allow click on checkbox and don't trigger Button click */}
       {/* We can use other approach, but checkbox has vertical-align: top */}
       <CheckboxContainer>
@@ -62,6 +58,12 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
           onValueChange={handleCheck}
         />
       </CheckboxContainer>
+      <Button onClick={handleOpen} disabled={emptyResults} ref={buttonRef}>
+        <SuiteContainer padding={(testPath.length + 1) * 8}>
+          <TestStatusIcon inverted={opened} status={test.status} skip={test.skip} />
+          <SuiteTitle>{title}</SuiteTitle>
+        </SuiteContainer>
+      </Button>
     </Container>
   );
 }

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

@@ -11,21 +11,22 @@ export interface TestStatusIconProps {
 }
 
 const Container = styled.span({
-  width: 10,
-  height: 10,
+  width: '16px',
+  height: '13px',
   padding: 1,
   display: 'inline-block',
 });
 
 const Icon = styled(Icons)({
   position: 'relative',
-  top: '1.5px',
+  top: '1px',
   verticalAlign: 'baseline',
 });
 
 const Spinner = styled(Loader)({
-  top: '14px',
-  left: '42px',
+  top: '12px',
+  left: 'unset',
+  marginLeft: '0px',
 });
 
 export const TestStatusIcon = withTheme(
@@ -40,6 +41,10 @@ export const TestStatusIcon = withTheme(
         icon = <Icon color={inverted ? theme.color.lightest : theme.color.green} icon="check" />;
         break;
       }
+      case 'approved': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.mediumdark} icon="thumbsup" />;
+        break;
+      }
       case 'running': {
         icon = <Spinner size={10} />;
         break;
@@ -49,7 +54,8 @@ export const TestStatusIcon = withTheme(
         break;
       }
       default: {
-        if (skip) icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="timer" />;
+        if (skip) icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="alert" />;
+        else icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="circlehollow" />;
         break;
       }
     }

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

@@ -53,7 +53,7 @@ export const TestsStatus = withTheme(
     successCount,
     failedCount,
     pendingCount,
-    skippedCount,
+    approvedCount,
     onClickByStatus,
     theme,
   }: TestsStatusProps): JSX.Element => {
@@ -94,9 +94,13 @@ export const TestsStatus = withTheme(
         </Button>
         <Divider />
         {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
-        <Button>
+        <Button
+          onClick={() => {
+            onClickByStatus('approved');
+          }}
+        >
           <IconContainer color={theme?.color.defaultText}>
-            <Icons icon="timer" /> {skippedCount}
+            <Icons icon="thumbsup" /> {approvedCount}
           </IconContainer>
         </Button>
       </Container>

package/src/server/master/api.ts

@@ -49,6 +49,10 @@ export default function creeveyApi(runner: Runner): CreeveyApi {
           void runner.approve(command.payload);
           return;
         }
+        case 'approveAll': {
+          void runner.approveAll();
+          return;
+        }
       }
     },
   };

package/src/server/master/pool.ts

@@ -96,11 +96,13 @@ export default class Pool extends EventEmitter {
   }
 
   private getFreeWorker(): Worker | undefined {
-    return this.freeWorkers[Math.floor(Math.random() * this.freeWorkers.length)];
+    const freeWorkers = this.freeWorkers;
+
+    return freeWorkers[Math.floor(Math.random() * freeWorkers.length)];
   }
 
   private get aliveWorkers(): Worker[] {
-    return this.workers.filter((worker) => !worker.exitedAfterDisconnect);
+    return this.workers.filter((worker) => !worker.exitedAfterDisconnect && !worker.isShuttingDown);
   }
 
   private get freeWorkers(): Worker[] {
@@ -146,6 +148,7 @@ export default class Pool extends EventEmitter {
   }
 
   private gracefullyKill(worker: Worker): void {
+    worker.isShuttingDown = true;
     const timeout = setTimeout(() => {
       worker.kill();
     }, 10000);

package/src/server/master/runner.ts

@@ -45,6 +45,7 @@ export default class Runner extends EventEmitter {
     // TODO Handle 'retrying' status
     test.status = status == 'retrying' ? 'failed' : status;
     if (!result) {
+      // NOTE: Running status
       this.sendUpdate({ tests: { [id]: { id, browser, testName, storyPath, status: test.status, storyId } } });
       return;
     }
@@ -53,8 +54,23 @@ export default class Runner extends EventEmitter {
     }
     test.results.push(result);
 
+    if (status == 'failed') {
+      test.approved = null;
+    }
+
     this.sendUpdate({
-      tests: { [id]: { id, browser, testName, storyPath, status: test.status, results: [result], storyId } },
+      tests: {
+        [id]: {
+          id,
+          browser,
+          testName,
+          storyPath,
+          status: test.status,
+          approved: test.approved,
+          results: [result],
+          storyId,
+        },
+      },
     });
 
     if (this.failFast && status == 'failed') this.stop();
@@ -161,6 +177,46 @@ export default class Runner extends EventEmitter {
     };
   }
 
+  private async copyImage(test: ServerTest, image: string, actual: string): Promise<void> {
+    const { browser, testName, storyPath } = test;
+    const restPath = [...storyPath, testName].filter(isDefined);
+    const testPath = path.join(...restPath, image == browser ? '' : browser);
+    const srcImagePath = path.join(this.reportDir, testPath, actual);
+    const dstImagePath = path.join(this.screenDir, testPath, `${image}.png`);
+    await mkdir(path.join(this.screenDir, testPath), { recursive: true });
+    await copyFile(srcImagePath, dstImagePath);
+  }
+
+  public async approveAll(): Promise<void> {
+    const updatedTests: NonNullable<CreeveyUpdate['tests']> = {};
+    for (const test of Object.values(this.tests)) {
+      if (!test?.results) continue;
+      const retry = test.results.length - 1;
+      const { images, status } = test.results.at(retry) ?? {};
+      if (!images || status != 'failed') continue;
+      for (const [name, image] of Object.entries(images)) {
+        if (!image) continue;
+        await this.copyImage(test, name, image.actual);
+
+        if (!test.approved) {
+          test.approved = {};
+        }
+        test.approved[name] = retry;
+        test.status = 'approved';
+
+        updatedTests[test.id] = {
+          id: test.id,
+          browser: test.browser,
+          storyPath: test.storyPath,
+          storyId: test.storyId,
+          status: test.status,
+          approved: { [name]: retry },
+        };
+      }
+    }
+    this.sendUpdate({ tests: updatedTests });
+  }
+
   public async approve({ id, retry, image }: ApprovePayload): Promise<void> {
     const test = this.tests[id];
     if (!test?.results) return;
@@ -171,16 +227,18 @@ export default class Runner extends EventEmitter {
     if (!test.approved) {
       test.approved = {};
     }
-    const { browser, testName, storyPath } = test;
-    const restPath = [...storyPath, testName].filter(isDefined);
-    const testPath = path.join(...restPath, image == browser ? '' : browser);
-    const srcImagePath = path.join(this.reportDir, testPath, images.actual);
-    const dstImagePath = path.join(this.screenDir, testPath, `${image}.png`);
-    await mkdir(path.join(this.screenDir, testPath), { recursive: true });
-    await copyFile(srcImagePath, dstImagePath);
+    const { browser, testName, storyPath, storyId } = test;
+
+    await this.copyImage(test, image, images.actual);
+
     test.approved[image] = retry;
+
+    if (Object.keys(result.images).every((name) => typeof test.approved?.[name] == 'number')) {
+      test.status = 'approved';
+    }
+
     this.sendUpdate({
-      tests: { [id]: { id, browser, testName, storyPath, approved: { [image]: retry }, storyId: test.storyId } },
+      tests: { [id]: { id, browser, testName, storyPath, status: test.status, approved: { [image]: retry }, storyId } },
     });
   }
   private sendUpdate(data: CreeveyUpdate): void {

package/src/server/selenium/browser.ts

@@ -55,6 +55,7 @@ let browserName = '';
 let browser: WebDriver | null = null;
 // let context: UnPromise<ReturnType<typeof BrowsingContext>> | null = null;
 let creeveyServerHost: string | null = null;
+let creeveyServerPort: number | null = null;
 
 function getSessionData(grid: string, sessionId = ''): Promise<Record<string, unknown>> {
   const gridUrl = new URL(grid);
@@ -520,11 +521,10 @@ async function openStorybookPage(
   }
 }
 
-async function resolveCreeveyHost(browser: WebDriver, port: number): Promise<string> {
-  if (creeveyServerHost != null) return creeveyServerHost;
-
+async function resolveCreeveyHost(browser: WebDriver, port: number): Promise<void> {
   const addresses = getAddresses();
 
+  creeveyServerPort = port;
   creeveyServerHost = await browser.executeAsyncScript(
     function (hosts: string[], port: number, callback: (host?: string | null) => void) {
       void Promise.all(
@@ -558,8 +558,6 @@ async function resolveCreeveyHost(browser: WebDriver, port: number): Promise<str
   );
 
   if (creeveyServerHost == null) throw new Error("Can't reach creevey server from a browser");
-
-  return creeveyServerHost;
 }
 
 export async function loadStoriesFromBrowser(): Promise<StoriesRaw> {
@@ -690,8 +688,14 @@ export async function getBrowser(config: Config, options: Options & { browser: s
     await updateStorybookGlobals(browser, _storybookGlobals);
   }
 
-  const creeveyHost = await resolveCreeveyHost(browser, options.port);
+  await resolveCreeveyHost(browser, options.port);
+
+  await updateBrowserGlobalVariables(browser);
+
+  return browser;
+}
 
+async function updateBrowserGlobalVariables(browser: WebDriver) {
   await browser.executeScript(
     function (workerId: number, creeveyHost: string, creeveyPort: number) {
       window.__CREEVEY_WORKER_ID__ = workerId;
@@ -699,11 +703,9 @@ export async function getBrowser(config: Config, options: Options & { browser: s
       window.__CREEVEY_SERVER_PORT__ = creeveyPort;
     },
     process.pid,
-    creeveyHost,
-    options.port,
+    creeveyServerHost,
+    creeveyServerPort,
   );
-
-  return browser;
 }
 
 async function updateStoryArgs(browser: WebDriver, story: StoryInput, updatedArgs: Args): Promise<void> {
@@ -799,6 +801,7 @@ export async function switchStory(this: Context): Promise<void> {
     });
   });
 
+  await updateBrowserGlobalVariables(this.browser);
   await resetMousePosition(this.browser);
   const isCaptureCalled = await selectStory(this.browser, id, waitForReady);
 

package/src/server/worker/worker.ts

@@ -9,7 +9,7 @@ import { Key, until } from 'selenium-webdriver';
 import { Config, Images, Options, TestMessage, isImageError } from '../../types.js';
 import { subscribeOn, emitTestMessage, emitWorkerMessage } from '../messages.js';
 import chaiImage from './chai-image.js';
-import { closeBrowser, getBrowser, switchStory } from '../selenium/index.js';
+import { getBrowser, switchStory } from '../selenium/index.js';
 import { CreeveyReporter, TeamcityReporter } from './reporter.js';
 import { addTestsFromStories } from './helpers.js';
 import { logger } from '../logger.js';
@@ -136,7 +136,19 @@ export async function start(config: Config, options: Options & { browser: string
 
   chai.use(chaiImage(getExpected, config.diffOptions));
 
-  if ((await getBrowser(config, options)) == null) return;
+  const browser = await (async () => {
+    try {
+      return await getBrowser(config, options);
+    } catch (error) {
+      emitWorkerMessage({
+        type: 'error',
+        payload: { error: error instanceof Error ? error.message : ((error ?? 'Unknown error') as string) },
+      });
+      return null;
+    }
+  })();
+
+  if (browser == null) return;
 
   await addTestsFromStories(mocha.suite, config, {
     browser: options.browser,
@@ -145,18 +157,11 @@ export async function start(config: Config, options: Options & { browser: string
     port: options.port,
   });
 
-  try {
-    await (await getBrowser(config, options))?.getCurrentUrl();
-  } catch {
-    await closeBrowser();
-  }
-  const browser = await getBrowser(config, options);
-  const sessionId = (await browser?.getSession())?.getId();
-
-  if (browser == null) return;
+  const sessionId = (await browser.getSession()).getId();
 
   const interval = setInterval(
     () =>
+      // NOTE Simple way to keep session alive
       void browser.getCurrentUrl().then((url) => {
         logger.debug(`${options.browser}:${chalk.gray(sessionId)}`, 'current url', chalk.magenta(url));
       }),
@@ -208,6 +213,7 @@ export async function start(config: Config, options: Options & { browser: string
     retries = test.retries;
 
     mocha.grep(new RegExp(`^${testPath}$`));
+    mocha.unloadFiles();
     const runner = mocha.run(runHandler);
 
     // TODO How handle browser corruption?