creevey 0.10.0-beta.0 → 0.10.0-beta.10

package/src/server/webdriver.ts

@@ -1,7 +1,6 @@
-import Logger from 'loglevel';
 import chalk from 'chalk';
 import { networkInterfaces } from 'os';
-import { logger as defaultLogger } from './logger.js';
+import { logger } from './logger.js';
 import { Args } from '@storybook/csf';
 import {
   isDefined,
@@ -11,6 +10,7 @@ import {
   CreeveyStoryParams,
   StoriesRaw,
   CreeveyWebdriver,
+  ServerTest,
 } from '../types.js';
 import { emitStoriesMessage, subscribeOn } from './messages.js';
 
@@ -21,15 +21,15 @@ const DOCKER_INTERNAL = 'host.docker.internal';
 export async function resolveStorybookUrl(
   storybookUrl: string,
   checkUrl: (url: string) => Promise<boolean>,
-  logger: Logger.Logger = defaultLogger,
 ): Promise<string> {
-  logger.debug('Resolving storybook url');
+  logger().debug('Resolving storybook url');
   const addresses = getAddresses();
+  // TODO Use Promise.race?
   for (const ip of addresses) {
     const resolvedUrl = storybookUrl.replace(LOCALHOST_REGEXP, ip);
-    logger.debug(`Checking storybook availability on ${chalk.magenta(resolvedUrl)}`);
+    logger().debug(`Checking storybook availability on ${chalk.magenta(resolvedUrl)}`);
     if (await checkUrl(resolvedUrl)) {
-      logger.debug(`Resolved storybook url ${chalk.magenta(resolvedUrl)}`);
+      logger().debug(`Resolved storybook url ${chalk.magenta(resolvedUrl)}`);
       return resolvedUrl;
     }
   }
@@ -71,11 +71,9 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
 
   abstract loadStoriesFromBrowser(): Promise<StoriesRaw>;
 
-  async switchStory(
-    story: StoryInput,
-    context: BaseCreeveyTestContext,
-    logger: Logger.Logger,
-  ): Promise<CreeveyTestContext> {
+  abstract afterTest(test: ServerTest): Promise<void>;
+
+  async switchStory(story: StoryInput, context: BaseCreeveyTestContext): Promise<CreeveyTestContext> {
     const { id, title, name, parameters } = story;
     const {
       captureElement = `#${storybookRootID}`,
@@ -83,7 +81,7 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
       ignoreElements,
     } = (parameters.creevey ?? {}) as CreeveyStoryParams;
 
-    logger.debug(`Switching to story ${chalk.cyan(title)}/${chalk.cyan(name)} by id ${chalk.magenta(id)}`);
+    logger().debug(`Switching to story ${chalk.cyan(title)}/${chalk.cyan(name)} by id ${chalk.magenta(id)}`);
 
     let storyPlayResolver: (isCompleted: boolean) => void;
     let waitForComplete = new Promise<boolean>((resolve) => (storyPlayResolver = resolve));
@@ -104,7 +102,7 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
     const isCaptureCalled = await this.selectStory(id, waitForReady);
 
     if (isCaptureCalled) {
-      logger.debug(`Capturing screenshots from ${chalk.magenta(id)} story's \`play()\` function`);
+      logger().debug(`Capturing screenshots from ${chalk.magenta(id)} story's \`play()\` function`);
       while (!(await waitForComplete)) {
         waitForComplete = new Promise<boolean>((resolve) => (storyPlayResolver = resolve));
       }
@@ -112,8 +110,8 @@ export abstract class CreeveyWebdriverBase implements CreeveyWebdriver {
 
     unsubscribe();
 
-    if (isCaptureCalled) logger.debug(`Story ${chalk.magenta(id)} completed capturing`);
-    else logger.debug(`Story ${chalk.magenta(id)} ready for capturing`);
+    if (isCaptureCalled) logger().debug(`Story ${chalk.magenta(id)} completed capturing`);
+    else logger().debug(`Story ${chalk.magenta(id)} ready for capturing`);
 
     return Object.assign(
       {

package/src/server/worker/chai-image.ts

@@ -1,8 +1,8 @@
-import Logger from 'loglevel';
+import { logger } from '../logger';
+
 export default function (
   matchImage: (image: Buffer, imageName?: string) => Promise<void>,
   matchImages: (images: Record<string, Buffer>) => Promise<void>,
-  logger: Logger.Logger,
 ) {
   let isWarningShown = false;
   return function chaiImage({ Assertion }: Chai.ChaiStatic, utils: Chai.ChaiUtils): void {
@@ -11,7 +11,7 @@ export default function (
       'matchImage',
       async function (this: Record<string, unknown>, imageName?: string) {
         if (!isWarningShown) {
-          logger.warn(
+          logger().warn(
             '`expect(...).to.matchImage()` is deprecated and will be removed in the next major release. Please use `context.matchImage()` instead.',
           );
           isWarningShown = true;
@@ -23,7 +23,7 @@ export default function (
 
     utils.addMethod(Assertion.prototype, 'matchImages', async function (this: Record<string, unknown>) {
       if (!isWarningShown) {
-        logger.warn(
+        logger().warn(
           '`expect(...).to.matchImages()` is deprecated and will be removed in the next major release. Please use `context.matchImages()` instead.',
         );
         isWarningShown = true;

package/src/server/worker/start.ts

@@ -1,8 +1,5 @@
 import chai from 'chai';
-import chalk from 'chalk';
-import Logger from 'loglevel';
 import EventEmitter from 'events';
-import { Key, until, WebDriver } from 'selenium-webdriver';
 import {
   BaseCreeveyTestContext,
   Config,
@@ -19,7 +16,6 @@ import {
 } from '../../types.js';
 import { subscribeOn, emitTestMessage, emitWorkerMessage } from '../messages.js';
 import chaiImage from './chai-image.js';
-import { SeleniumWebdriver } from '../selenium/webdriver.js';
 import { getMatchers, getOdiffMatchers, ImageContext } from './match-image.js';
 import { loadTestsFromStories } from '../stories.js';
 import { logger } from '../logger.js';
@@ -49,22 +45,6 @@ async function getTestsFromStories(
   return testsById;
 }
 
-async function outputTraceLogs(browser: WebDriver, test: ServerTest, logger: Logger.Logger): Promise<void> {
-  const output: string[] = [];
-  const types = await browser.manage().logs().getAvailableLogTypes();
-  for (const type of types) {
-    const logs = await browser.manage().logs().get(type);
-    output.push(logs.map((log) => JSON.stringify(log.toJSON(), null, 2)).join('\n'));
-  }
-  logger.debug(
-    '----------',
-    getTestPath(test).join('/'),
-    '----------\n',
-    output.join('\n'),
-    '\n----------------------------------------------------------------------------------------------------',
-  );
-}
-
 function runHandler(browserName: string, images: Partial<Record<string, Images>>, error?: unknown): void {
   // TODO How handle browser corruption?
   if (isImageError(error)) {
@@ -104,7 +84,7 @@ function runHandler(browserName: string, images: Partial<Record<string, Images>>
 
 async function setupWebdriver(webdriver: CreeveyWebdriver): Promise<[string, CreeveyWebdriver] | undefined> {
   if ((await webdriver.openBrowser(true)) == null) {
-    logger.error('Failed to start browser');
+    logger().error('Failed to start browser');
     emitWorkerMessage({
       type: 'error',
       payload: { subtype: 'browser', error: 'Failed to start browser' },
@@ -143,8 +123,6 @@ export async function start(browser: string, gridUrl: string, config: Config, op
 
   if (!webdriver || !sessionId) return;
 
-  const workerLogger = Logger.getLogger(`${browser}:${chalk.gray(sessionId)}`);
-
   const reporterOptions = {
     ...config.reporterOptions,
     creevey: {
@@ -168,13 +146,13 @@ export async function start(browser: string, gridUrl: string, config: Config, op
   const { matchImage, matchImages } = options.odiff
     ? getOdiffMatchers(imagesContext, config)
     : await getMatchers(imagesContext, config);
-  chai.use(chaiImage(matchImage, matchImages, workerLogger));
+  chai.use(chaiImage(matchImage, matchImages));
 
   const tests = await (async () => {
     try {
       return await getTestsFromStories(config, browser, webdriver);
     } catch (error) {
-      workerLogger.error('Failed to get tests from stories:', error);
+      logger().error('Failed to get tests from stories:', error);
       emitWorkerMessage({
         type: 'error',
         payload: { subtype: 'browser', error: serializeError(error) },
@@ -192,7 +170,7 @@ export async function start(browser: string, gridUrl: string, config: Config, op
 
     if (!test) {
       const error = `Test with id ${message.payload.id} not found`;
-      workerLogger.error(error);
+      logger().error(error);
       emitWorkerMessage({
         type: 'error',
         payload: { subtype: 'test', error },
@@ -202,8 +180,9 @@ export async function start(browser: string, gridUrl: string, config: Config, op
 
     const baseContext: BaseCreeveyTestContext = {
       browserName: browser,
-      // TODO Pass browser instance to test
-      // browser: browser,
+      // @ts-expect-error We defined separate d.ts declarations for each webdriver
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      webdriver: webdriver.browser,
       screenshots: [],
 
       matchImage: matchImage,
@@ -211,9 +190,6 @@ export async function start(browser: string, gridUrl: string, config: Config, op
 
       // NOTE: Deprecated
       expect: chai.expect,
-      //TODO Move things below to the separate module
-      until: until,
-      keys: Key,
     };
 
     imagesContext.attachments = [];
@@ -246,16 +222,20 @@ export async function start(browser: string, gridUrl: string, config: Config, op
       runner.emit(TEST_EVENTS.RUN_BEGIN);
       runner.emit(TEST_EVENTS.TEST_BEGIN, fakeTest);
 
+      let timeout;
+      let isRejected = false;
       const start = Date.now();
       try {
         await Promise.race([
-          new Promise((reject) =>
-            setTimeout(() => {
-              reject(`Timeout of ${config.testTimeout}ms exceeded`);
-            }, config.testTimeout),
+          new Promise(
+            (_, reject) =>
+              (timeout = setTimeout(() => {
+                isRejected = true;
+                reject(new Error(`Timeout of ${config.testTimeout}ms exceeded`));
+              }, config.testTimeout)),
           ),
           (async () => {
-            const context = await webdriver.switchStory(test.story, baseContext, workerLogger);
+            const context = await webdriver.switchStory(test.story, baseContext);
             await test.fn(context);
           })(),
         ]);
@@ -264,6 +244,7 @@ export async function start(browser: string, gridUrl: string, config: Config, op
         fakeTest.err = error;
       }
       const duration = Date.now() - start;
+      clearTimeout(timeout);
       fakeTest.attachments = imagesContext.attachments;
       fakeTest.state = error ? 'failed' : 'passed';
       fakeTest.duration = duration;
@@ -277,19 +258,19 @@ export async function start(browser: string, gridUrl: string, config: Config, op
       runner.emit(TEST_EVENTS.TEST_END, fakeTest);
       runner.emit(TEST_EVENTS.RUN_END);
 
-      if (options.trace) {
-        try {
-          if (webdriver instanceof SeleniumWebdriver && webdriver.browser) {
-            await outputTraceLogs(webdriver.browser, test, workerLogger);
-          }
-        } catch (_) {
-          /* noop */
-        }
-      }
+      await webdriver.afterTest(test);
 
-      runHandler(baseContext.browserName, imagesContext.images, error);
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (isRejected) {
+        emitWorkerMessage({
+          type: 'error',
+          payload: { subtype: 'unknown', error: serializeError(error) },
+        });
+      } else {
+        runHandler(baseContext.browserName, imagesContext.images, error);
+      }
     })().catch((error: unknown) => {
-      workerLogger.error('Unexpected error:', error);
+      logger().error('Unexpected error:', error);
       emitWorkerMessage({
         type: 'error',
         payload: { subtype: 'test', error: serializeError(error) },
@@ -297,7 +278,7 @@ export async function start(browser: string, gridUrl: string, config: Config, op
     });
   });
 
-  workerLogger.info('Browser is ready');
+  logger().info('Browser is ready');
 
   emitWorkerMessage({ type: 'ready' });
 }

package/src/types.ts

@@ -1,12 +1,10 @@
 import type { StoryContextForEnhancers, DecoratorFunction } from '@storybook/csf';
-import type { IKey } from 'selenium-webdriver/lib/input.js';
 import type { Worker as ClusterWorker } from 'cluster';
-import type { /*Builder,*/ until } from 'selenium-webdriver';
 import type Pixelmatch from 'pixelmatch';
 import type { ODiffOptions } from 'odiff-bin';
 import type { expect } from 'chai';
 import type EventEmitter from 'events';
-import type Logger from 'loglevel';
+import { LaunchOptions } from 'playwright-core';
 // import type { Browser } from 'playwright-core';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -43,6 +41,18 @@ export interface StoryMeta {
   };
 }
 
+export enum StorybookEvents {
+  SET_STORIES = 'setStories',
+  SET_CURRENT_STORY = 'setCurrentStory',
+  FORCE_REMOUNT = 'forceRemount',
+  STORY_RENDERED = 'storyRendered',
+  STORY_ERRORED = 'storyErrored',
+  STORY_THREW_EXCEPTION = 'storyThrewException',
+  UPDATE_STORY_ARGS = 'updateStoryArgs',
+  SET_GLOBALS = 'setGlobals',
+  UPDATE_GLOBALS = 'updateGlobals',
+}
+
 export interface CreeveyMeta {
   parameters?: {
     creevey?: CreeveyStoryParams;
@@ -93,14 +103,6 @@ export class ChromeConfig {
 */
 export interface BrowserConfigObject {
   browserName: string;
-  /**
-   * Browser version. Ignored with Playwright webdriver
-   */
-  browserVersion?: string;
-  /**
-   * Operation system name. Ignored with Playwright webdriver
-   */
-  platformName?: string;
   // customizeBuilder?: (builder: Builder) => Builder;
   limit?: number;
   /**
@@ -124,15 +126,25 @@ export interface BrowserConfigObject {
    * Used only with `useDocker == false`
    */
   webdriverCommand?: string[];
-  // TODO Check version compatibility
-  // playwrightVersion?: string;
   // /**
   //  * Use to start standalone playwright browser
   //  */
   // playwrightBrowser?: () => Promise<Browser>;
   viewport?: { width: number; height: number };
 
-  [name: string]: unknown;
+  seleniumCapabilities?: {
+    /**
+     * Browser version. Ignored with Playwright webdriver
+     */
+    browserVersion?: string;
+    /**
+     * Operation system name. Ignored with Playwright webdriver
+     */
+    platformName?: string;
+    [name: string]: unknown;
+  };
+
+  playwrightOptions?: Omit<LaunchOptions, 'logger'>;
 }
 
 export type StorybookGlobals = Record<string, unknown>;
@@ -151,7 +163,8 @@ export interface CreeveyWebdriver {
   openBrowser(fresh?: boolean): Promise<CreeveyWebdriver | null>;
   closeBrowser(): Promise<void>;
   loadStoriesFromBrowser(): Promise<StoriesRaw>;
-  switchStory(story: StoryInput, context: BaseCreeveyTestContext, logger: Logger.Logger): Promise<CreeveyTestContext>;
+  switchStory(story: StoryInput, context: BaseCreeveyTestContext): Promise<CreeveyTestContext>;
+  afterTest(test: ServerTest): Promise<void>;
 }
 
 export interface HookConfig {
@@ -293,6 +306,11 @@ export interface Config {
    * The `--ui` CLI option ignores this option
    */
   failFast: boolean;
+  /**
+   * Start workers in sequential queue
+   * @default false
+   */
+  useWorkerQueue: boolean;
   /**
    * Specify platform for docker images
    */
@@ -413,14 +431,8 @@ export interface TestData extends TestMeta {
 
 export interface BaseCreeveyTestContext {
   browserName: string;
-  /**
-   * @deprecated In near future Creevey will additionally support Playwright as a webdriver, so any Selenium specific things might not be available. Please import `until` explicitly
-   */
-  until: typeof until;
-  /**
-   * @deprecated In near future Creevey will additionally support Playwright as a webdriver, so any Selenium specific things might not be available. Please import `keys` explicitly
-   */
-  keys: IKey;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  webdriver: any;
   /**
    * @deprecated Usually for screenshot testing you don't need other type of assertions except matching images, but if you really need it, please use external `expect` libs
    */

package/types/playwright-context.d.ts

@@ -0,0 +1,7 @@
+import { Page } from 'playwright-core';
+
+declare module 'creevey' {
+  interface CreeveyTestContext {
+    webdriver: Page;
+  }
+}

package/types/selenium-context.d.ts

@@ -0,0 +1,7 @@
+import { WebDriver } from 'selenium-webdriver';
+
+declare module 'creevey' {
+  interface CreeveyTestContext {
+    webdriver: WebDriver;
+  }
+}

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/chromatic.config.json

@@ -1,5 +0,0 @@
-{
-  "onlyChanged": true,
-  "projectId": "Project:5fd73972015e660021b97564",
-  "zip": true
-}