creevey 0.10.0-beta.2 → 0.10.0-beta.20

package/src/client/web/CreeveyApp.tsx

@@ -11,17 +11,17 @@ import {
   getTestByPath,
   removeTests,
   getTestPath,
-  useTheme,
   setSearchParams,
   getTestPathFromSearch,
   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';
 import { Toggle } from './CreeveyView/SideBar/Toggle.js';
+import { useTheme } from './themes.js';
 
 export interface CreeveyAppProps {
   api?: CreeveyClientApi;
@@ -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/CreeveyLoader.tsx

@@ -1,6 +1,6 @@
 import React, { JSX } from 'react';
 import { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from '@storybook/theming';
-import { useTheme } from '../shared/helpers.js';
+import { useTheme } from './themes.js';
 
 const Container = withTheme(
   styled.div(({ theme }) => ({

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/SideBar.tsx

@@ -62,6 +62,7 @@ const SelectAllContainer = styled.div({
 });
 
 const TestsContainer = styled.div({
+  marginBottom: '8px',
   position: 'relative',
   height: '100%',
 });

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/client/web/themes.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { themes, ThemeVars } from '@storybook/theming';
+import { isDefined } from '../../types.js';
+
+const CREEVEY_THEME = 'Creevey_theme';
+
+function isTheme(theme?: string | null): theme is ThemeVars['base'] {
+  return isDefined(theme) && Object.prototype.hasOwnProperty.call(themes, theme);
+}
+
+function initialTheme(): ThemeVars['base'] {
+  const theme = localStorage.getItem(CREEVEY_THEME);
+  return isTheme(theme) ? theme : 'light';
+}
+
+export function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void] {
+  const [theme, setTheme] = useState<ThemeVars['base']>(initialTheme());
+
+  useEffect(() => {
+    localStorage.setItem(CREEVEY_THEME, theme);
+  }, [theme]);
+
+  return [theme, setTheme];
+}

package/src/creevey.ts

@@ -5,14 +5,14 @@ import { Options } from './types.js';
 import { emitWorkerMessage } from './server/messages.js';
 import { isShuttingDown, shutdownWorkers } from './server/utils.js';
 import Logger from 'loglevel';
-import { logger } from './server/logger.js';
+import { logger, setRootName } from './server/logger.js';
 
 function shutdownOnException(reason: unknown): void {
   if (isShuttingDown.current) return;
 
   const error = reason instanceof Error ? (reason.stack ?? reason.message) : (reason as string);
 
-  logger.error(error);
+  logger().error(error);
 
   process.exitCode = -1;
   if (cluster.isWorker) emitWorkerMessage({ type: 'error', payload: { subtype: 'unknown', error } });
@@ -21,7 +21,11 @@ function shutdownOnException(reason: unknown): void {
 
 process.on('uncaughtException', shutdownOnException);
 process.on('unhandledRejection', shutdownOnException);
+// TODO SIGINT Stuck with selenium
 process.on('SIGINT', () => {
+  if (isShuttingDown.current) {
+    process.exit(-1);
+  }
   isShuttingDown.current = true;
 });
 
@@ -32,9 +36,12 @@ const argv = minimist<Options>(process.argv.slice(2), {
   alias: { port: 'p', config: 'c', debug: 'd', update: 'u' },
 });
 
+if ('port' in argv && !isNaN(argv.port)) argv.port = Number(argv.port);
+if ('browser' in argv && argv.browser) setRootName(argv.browser);
+
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 if (cluster.isPrimary && argv.reporter) {
-  logger.warn(`--reporter option has been removed please describe reporter in config file:
+  logger().warn(`--reporter option has been removed please describe reporter in config file:
     import { reporters } from 'mocha';
 
     const config = {
@@ -51,13 +58,13 @@ if (cluster.isPrimary && argv.reporter) {
 // @ts-expect-error: define log level for storybook
 global.LOGLEVEL = argv.trace ? 'trace' : argv.debug ? 'debug' : 'warn';
 if (argv.trace) {
-  logger.setDefaultLevel(Logger.levels.TRACE);
+  logger().setDefaultLevel(Logger.levels.TRACE);
   Logger.setDefaultLevel(Logger.levels.TRACE);
 } else if (argv.debug) {
-  logger.setDefaultLevel(Logger.levels.DEBUG);
+  logger().setDefaultLevel(Logger.levels.DEBUG);
   Logger.setDefaultLevel(Logger.levels.DEBUG);
 } else {
-  logger.setDefaultLevel(Logger.levels.INFO);
+  logger().setDefaultLevel(Logger.levels.INFO);
   Logger.setDefaultLevel(Logger.levels.INFO);
 }
 

package/src/server/config.ts

@@ -11,6 +11,7 @@ export const defaultBrowser = 'chrome';
 
 export const defaultConfig: Omit<Config, 'gridUrl' | 'testsDir' | 'tsConfig' | 'webdriver'> = {
   disableTelemetry: false,
+  useWorkerQueue: false,
   useDocker: true,
   dockerImage: 'aerokube/selenoid:latest-release',
   dockerImagePlatform: '',
@@ -23,11 +24,11 @@ export const defaultConfig: Omit<Config, 'gridUrl' | 'testsDir' | 'tsConfig' | '
   storiesProvider: browserStoriesProvider,
   maxRetries: 0,
   testTimeout: 30000,
-  diffOptions: { threshold: 0.05, includeAA: false },
-  odiffOptions: { threshold: 0.05, antialiasing: true },
+  diffOptions: { threshold: 0.1, includeAA: false },
+  odiffOptions: { threshold: 0.1, antialiasing: true },
   browsers: { [defaultBrowser]: true },
   hooks: {},
-  testsRegex: /\.creevey\.(t|j)s$/,
+  testsRegex: /\.creevey\.(m|c)?(t|j)s$/,
 };
 
 function normalizeBrowserConfig(name: string, config: BrowserConfig): BrowserConfigObject {
@@ -73,7 +74,7 @@ export async function readConfig(options: Options): Promise<Config> {
 
     if (!configData.webdriver) {
       const { SeleniumWebdriver } = await import('./selenium/webdriver.js');
-      logger.warn(
+      logger().warn(
         "Creevey supports `Selenium` and `Playwright` webdrivers. For backward compatibility `Selenium` is used by default, but it might changed in the future. Please explicitly specify one of webdrivers in your Creevey's config",
       );
       configData.webdriver = SeleniumWebdriver;

package/src/server/docker.ts

@@ -1,4 +1,5 @@
 import tar from 'tar-stream';
+import Logger from 'loglevel';
 import { Writable } from 'stream';
 import Dockerode, { Container } from 'dockerode';
 import { DockerAuth } from '../types.js';
@@ -21,7 +22,7 @@ export async function pullImages(
   if (auth) args.authconfig = auth;
   if (platform) args.platform = platform;
 
-  logger.info('Pull docker images');
+  logger().info('Pull docker images');
   // TODO Replace with `import from`
   const { default: yoctoSpinner } = await import('yocto-spinner');
   for (const image of images) {
@@ -61,7 +62,17 @@ export async function buildImage(imageName: string, dockerfile: string): Promise
   const images = await docker.listImages({ filters: { label: [`creevey=${imageName}`] } });
 
   if (images.at(0)) {
-    logger.info(`Image ${imageName} already exists`);
+    await Promise.all(
+      (await docker.listContainers({ all: true, filters: { label: [`creevey=${imageName}`] } })).map(async (info) => {
+        const container = docker.getContainer(info.Id);
+        try {
+          await container.remove({ force: true });
+        } catch {
+          /* noop */
+        }
+      }),
+    );
+    logger().info(`Image ${imageName} already exists`);
     return;
   }
 
@@ -70,15 +81,20 @@ export async function buildImage(imageName: string, dockerfile: string): Promise
   pack.finalize();
 
   const { default: yoctoSpinner } = await import('yocto-spinner');
-  const spinner = yoctoSpinner({ text: `${imageName}: Build start` }).start();
+  const spinner = yoctoSpinner({ text: `${imageName}: Build start` });
+  if (logger().getLevel() > Logger.levels.DEBUG) {
+    spinner.start();
+  }
+  let isFailed = false;
   await new Promise<void>((resolve, reject) => {
     void docker.buildImage(
       // @ts-expect-error Type incompatibility AsyncIterator and AsyncIterableIterator
       pack,
-      { t: imageName, labels: { creevey: imageName } },
+      // TODO Support buildkit decode grpc (version: '2')
+      { t: imageName, labels: { creevey: imageName }, version: '1' },
       (buildError: Error | null, stream) => {
         if (buildError || !stream) {
-          spinner.error(buildError?.message);
+          // spinner.error(buildError?.message);
           reject(buildError ?? new Error('Unknown error'));
           return;
         }
@@ -86,6 +102,8 @@ export async function buildImage(imageName: string, dockerfile: string): Promise
         docker.modem.followProgress(stream, onFinished, onProgress);
 
         function onFinished(error: Error | null): void {
+          if (isFailed) return;
+
           if (error) {
             spinner.error(error.message);
             reject(error);
@@ -95,10 +113,23 @@ export async function buildImage(imageName: string, dockerfile: string): Promise
           resolve();
         }
 
-        function onProgress(event: { id: string; status: string; progress?: string }): void {
-          if (!/^[a-z0-9]{12}$/i.test(event.id)) return;
-
-          spinner.text = `${imageName}: [${event.id}] ${event.status} ${event.progress ? event.progress : ''}`;
+        function onProgress(
+          event:
+            | { stream: string }
+            | { errorDetail: { code: number; message: string }; error: string }
+            | { id: string; aux: string }, // NOTE: Only with `version: '2'`
+        ): void {
+          if ('stream' in event) {
+            if (logger().getLevel() <= Logger.levels.DEBUG) {
+              logger().debug(event.stream.trim());
+            } else {
+              spinner.text = `${imageName}: [Build] - ${event.stream}`;
+            }
+          } else if ('errorDetail' in event) {
+            isFailed = true;
+            spinner.error(event.error);
+            reject(new Error(event.error));
+          }
         }
       },
     );
@@ -111,18 +142,6 @@ export async function runImage(
   options: Record<string, unknown>,
   debug: boolean,
 ): Promise<string> {
-  await Promise.all(
-    (await docker.listContainers({ all: true, filters: { ancestor: [image] } })).map(async (info) => {
-      const container = docker.getContainer(info.Id);
-      try {
-        await container.stop();
-      } catch {
-        /* noop */
-      }
-      await container.remove();
-    }),
-  );
-
   const hub = docker.run(image, args, debug ? process.stdout : new DevNull(), options, (error) => {
     if (error) throw error;
   });
@@ -132,8 +151,7 @@ export async function runImage(
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       subscribeOn('shutdown', async () => {
         try {
-          await container.stop();
-          await container.remove();
+          await container.remove({ force: true });
         } catch {
           /* noop */
         }