creevey 0.9.1 → 0.10.0-beta.0

package/src/server/playwright/webdriver.ts

@@ -0,0 +1,126 @@
+import { Args } from '@storybook/csf';
+import { Config, Options, StoriesRaw, StoryInput } from '../../types';
+import { logger } from '../logger';
+import { subscribeOn } from '../messages';
+import { CreeveyWebdriverBase } from '../webdriver';
+import type { InternalBrowser } from './internal';
+
+export class PlaywrightWebdriver extends CreeveyWebdriverBase {
+  #browser: InternalBrowser | null = null;
+  #browserName: string;
+  #gridUrl: string;
+  #config: Config;
+  #options: Options;
+  constructor(browser: string, gridUrl: string, config: Config, options: Options) {
+    super();
+
+    this.#browserName = browser;
+    this.#gridUrl = gridUrl;
+    this.#config = config;
+    this.#options = options;
+
+    subscribeOn('shutdown', () => {
+      void this.#browser?.closeBrowser().finally(() => process.exit());
+      this.#browser = null;
+    });
+  }
+
+  get browser() {
+    return this.#browser?.browser;
+  }
+
+  getSessionId(): Promise<string> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return Promise.resolve(this.#browser.sessionId);
+  }
+
+  async openBrowser(fresh = false): Promise<PlaywrightWebdriver | null> {
+    if (this.#browser) {
+      if (fresh) {
+        await this.#browser.closeBrowser();
+        this.#browser = null;
+      } else {
+        return this;
+      }
+    }
+
+    const internalModule = await (async () => {
+      try {
+        return await import('./internal.js');
+      } catch (error) {
+        logger.error(error);
+        return null;
+      }
+    })();
+
+    if (!internalModule) return null;
+
+    const { InternalBrowser } = internalModule;
+    const browser = await InternalBrowser.getBrowser(this.#browserName, this.#gridUrl, this.#config, this.#options);
+
+    if (!browser) return null;
+
+    this.#browser = browser;
+
+    return this;
+  }
+
+  async closeBrowser(): Promise<void> {
+    if (this.#browser) {
+      await this.#browser.closeBrowser();
+      this.#browser = null;
+    }
+  }
+
+  async loadStoriesFromBrowser(): Promise<StoriesRaw> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.loadStoriesFromBrowser();
+  }
+
+  protected async takeScreenshot(
+    captureElement: string | null,
+    ignoreElements?: string | string[] | null,
+  ): Promise<Buffer> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.takeScreenshot(captureElement, ignoreElements);
+  }
+
+  protected waitForComplete(callback: (isCompleted: boolean) => void): void {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    this.#browser.waitForComplete(callback);
+  }
+
+  protected async selectStory(id: string, waitForReady?: boolean): Promise<boolean> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.selectStory(id, waitForReady);
+  }
+
+  protected async updateStoryArgs(story: StoryInput, updatedArgs: Args): Promise<void> {
+    if (!this.#browser) {
+      // TODO Describe the error
+      throw new Error('Browser is not initialized');
+    }
+
+    return this.#browser.updateStoryArgs(story, updatedArgs);
+  }
+}

package/src/server/{storybook/providers → providers}/browser.ts

@@ -1,12 +1,11 @@
 import cluster from 'cluster';
-import type { CreeveyStory, StoriesProvider, StoriesRaw } from '../../../types.js';
-import { loadStoriesFromBrowser } from '../../selenium/index.js';
-import { emitStoriesMessage, sendStoriesMessage, subscribeOn, subscribeOnWorker } from '../../messages.js';
-import { isDefined } from '../../../types.js';
-import { logger } from '../../logger.js';
-import { deserializeRawStories } from '../../../shared/index.js';
+import type { CreeveyStory, StoriesProvider, StoriesRaw } from '../../types.js';
+import { emitStoriesMessage, sendStoriesMessage, subscribeOn, subscribeOnWorker } from '../messages.js';
+import { isDefined } from '../../types.js';
+import { logger } from '../logger.js';
+import { deserializeRawStories } from '../../shared/index.js';
 
-export const loadStories: StoriesProvider = async (_config, _options, storiesListener) => {
+export const loadStories: StoriesProvider = async (_config, storiesListener, webdriver) => {
   if (cluster.isPrimary) {
     return new Promise<StoriesRaw>((resolve) => {
       const worker = Object.values(cluster.workers ?? {})
@@ -40,7 +39,7 @@ export const loadStories: StoriesProvider = async (_config, _options, storiesLis
         emitStoriesMessage({ type: 'set', payload: { stories, oldTests: storiesWithOldTests } });
       if (message.type == 'update') storiesListener(new Map(message.payload));
     });
-    const stories = deserializeRawStories(await loadStoriesFromBrowser());
+    const stories = deserializeRawStories((await webdriver?.loadStoriesFromBrowser()) ?? {});
 
     const storiesWithOldTests: string[] = [];
 

package/src/server/{storybook/providers → providers}/hybrid.ts

@@ -1,17 +1,13 @@
 import chokidar from 'chokidar';
 
 import { loadStories as browserProvider } from './browser.js';
-import type { Config, StoryInput, CreeveyStoryParams, CreeveyStory, StoriesProvider } from '../../../types.js';
-import { logger } from '../../logger.js';
-import parse, { CreeveyParamsByStoryId } from '../../testsFiles/parser.js';
-import { readDirRecursive } from '../../utils.js';
-import { combineParameters } from '../../../shared/index.js';
+import type { Config, CreeveyStoryParams, CreeveyStory, StoriesProvider } from '../../types.js';
+import { logger } from '../logger.js';
+import parse, { CreeveyParamsByStoryId } from '../testsFiles/parser.js';
+import { readDirRecursive } from '../utils.js';
+import { combineParameters } from '../../shared/index.js';
 
-export const loadStories: StoriesProvider = async (
-  _config: Config,
-  _options,
-  storiesListener: (stories: Map<string, StoryInput[]>) => void,
-) => {
+export const loadStories: StoriesProvider = async (config, storiesListener, webdriver) => {
   let creeveyParamsByStoryId: Partial<CreeveyParamsByStoryId> = {};
 
   const mergeParamsFromTestsToStory = (story: CreeveyStory, creeveyParams: CreeveyStoryParams): void => {
@@ -20,18 +16,22 @@ export const loadStories: StoriesProvider = async (
     }
   };
 
-  const stories = await browserProvider(_config, {}, (updatedStoriesByFiles) => {
-    Array.from(updatedStoriesByFiles.entries()).forEach(([, storiesArray]) => {
-      storiesArray.forEach((story) => {
-        const creeveyParams = creeveyParamsByStoryId[story.id];
-        if (creeveyParams) mergeParamsFromTestsToStory(story, creeveyParams);
+  const stories = await browserProvider(
+    config,
+    (updatedStoriesByFiles) => {
+      Array.from(updatedStoriesByFiles.entries()).forEach(([, storiesArray]) => {
+        storiesArray.forEach((story) => {
+          const creeveyParams = creeveyParamsByStoryId[story.id];
+          if (creeveyParams) mergeParamsFromTestsToStory(story, creeveyParams);
+        });
       });
-    });
-    storiesListener(updatedStoriesByFiles);
-  });
+      storiesListener(updatedStoriesByFiles);
+    },
+    webdriver,
+  );
 
   // TODO fix test files hot reloading
-  creeveyParamsByStoryId = await parseParams(_config /*, (data) => console.log(data) */);
+  creeveyParamsByStoryId = await parseParams(config /*, (data) => console.log(data) */);
 
   Object.entries(stories).forEach(([storyId, story]) => {
     const creeveyParams = creeveyParamsByStoryId[storyId];

package/src/server/{worker/reporter.ts → reporter.ts}

@@ -1,13 +1,13 @@
 import chalk from 'chalk';
 import Logger from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
-import { Runner, reporters, MochaOptions } from 'mocha';
-import { Images, isDefined, isImageError } from '../../types.js';
+import { FakeTest, Images, isDefined, isImageError, TEST_EVENTS } from '../types.js';
+import EventEmitter from 'events';
 
 interface ReporterOptions {
   reportDir: string;
   sessionId: string;
-  topLevelSuite: string;
+  browserName: string;
   willRetry: boolean;
   images: Partial<Record<string, Partial<Images>>>;
 }
@@ -18,62 +18,73 @@ const testLevels: Record<string, string> = {
   ERROR: chalk.red('FAIL'),
 };
 
-export class CreeveyReporter extends reporters.Base {
+export class CreeveyReporter {
   // TODO Output in better way, like vitest, maybe
-  constructor(runner: Runner, options: MochaOptions) {
-    super(runner);
-
-    const { sessionId, topLevelSuite } = options.reporterOptions as ReporterOptions;
-    const testLogger = Logger.getLogger(topLevelSuite);
+  constructor(runner: EventEmitter, options: { reporterOptions: { creevey: ReporterOptions } }) {
+    const { sessionId, browserName } = options.reporterOptions.creevey;
+    const testLogger = Logger.getLogger(browserName);
 
     prefix.apply(testLogger, {
       format(level) {
-        return `${testLevels[level]} => (${topLevelSuite}:${chalk.gray(sessionId)})`;
+        return `${testLevels[level]} => (${browserName}:${chalk.gray(sessionId)})`;
       },
     });
 
-    runner.on('test', (test) => {
+    runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
       testLogger.warn(chalk.cyan(test.titlePath().join('/')));
     });
-    runner.on('pass', (test) => {
+    runner.on(TEST_EVENTS.TEST_PASS, (test: FakeTest) => {
       testLogger.info(chalk.cyan(test.titlePath().join('/')));
     });
-    runner.on('fail', (test, error) => {
+    runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error) => {
       testLogger.error(
         chalk.cyan(test.titlePath().join('/')),
         '\n  ',
-        getErrors(
+        this.getErrors(
           error,
-          (error, imageName) => `${chalk.bold(imageName ?? topLevelSuite)}:${error}`,
+          (error, imageName) => `${chalk.bold(imageName ?? browserName)}:${error}`,
           (error) => error.stack ?? error.message,
         ).join('\n  '),
       );
     });
   }
+  private getErrors(
+    error: unknown,
+    imageErrorToString: (error: string, imageName?: string) => string,
+    errorToString: (error: Error) => string,
+  ): string[] {
+    const errors = [];
+    if (!(error instanceof Error)) {
+      errors.push(error as string);
+    } else if (!isImageError(error)) {
+      errors.push(errorToString(error));
+    } else if (typeof error.images == 'string') {
+      errors.push(imageErrorToString(error.images));
+    } else {
+      const imageErrors = error.images ?? {};
+      Object.keys(imageErrors).forEach((imageName) => {
+        errors.push(imageErrorToString(imageErrors[imageName] ?? '', imageName));
+      });
+    }
+    return errors;
+  }
 }
 
-export class TeamcityReporter extends reporters.Base {
-  constructor(runner: Runner, options: MochaOptions) {
-    super(runner);
-
-    const topLevelSuite = this.escape((options.reporterOptions as ReporterOptions).topLevelSuite);
-    const reporterOptions = options.reporterOptions as ReporterOptions;
-
-    runner.on('suite', (suite) => {
-      if (suite.root) console.log(`##teamcity[testSuiteStarted name='${topLevelSuite}' flowId='${process.pid}']`);
-      else console.log(`##teamcity[testSuiteStarted name='${this.escape(suite.title)}' flowId='${process.pid}']`);
-    });
+export class TeamcityReporter {
+  constructor(runner: EventEmitter, options: { reporterOptions: { creevey: ReporterOptions } }) {
+    const browserName = this.escape(options.reporterOptions.creevey.browserName);
+    const reporterOptions = options.reporterOptions.creevey;
 
-    runner.on('test', (test) => {
+    runner.on(TEST_EVENTS.TEST_BEGIN, (test: FakeTest) => {
       console.log(`##teamcity[testStarted name='${this.escape(test.title)}' flowId='${process.pid}']`);
     });
 
-    runner.on('fail', (test, error: Error) => {
+    runner.on(TEST_EVENTS.TEST_FAIL, (test: FakeTest, error: Error) => {
       Object.entries(reporterOptions.images).forEach(([name, image]) => {
         if (!image) return;
         const filePath = test
           .titlePath()
-          .concat(name == topLevelSuite ? [] : [topLevelSuite])
+          .concat(name == browserName ? [] : [browserName])
           .map(this.escape)
           .join('/');
 
@@ -104,27 +115,6 @@ export class TeamcityReporter extends reporters.Base {
           )}' details='${this.escape(error.stack ?? '')}' flowId='${process.pid}']`,
         );
     });
-
-    runner.on('pending', (test) => {
-      console.log(
-        `##teamcity[testIgnored name='${this.escape(test.title)}' message='${this.escape(
-          typeof test.skipReason == 'boolean' ? test.title : test.skipReason,
-        )}' flowId='${process.pid}']`,
-      );
-    });
-
-    runner.on('test end', (test) => {
-      console.log(`##teamcity[testFinished name='${this.escape(test.title)}' flowId='${process.pid}']`);
-    });
-
-    runner.on('suite end', (suite) => {
-      if (!suite.root)
-        console.log(`##teamcity[testSuiteFinished name='${this.escape(suite.title)}' flowId='${process.pid}']`);
-    });
-
-    runner.on('end', () => {
-      console.log(`##teamcity[testSuiteFinished name='${topLevelSuite}' flowId='${process.pid}']`);
-    });
   }
 
   private escape = (str: string): string => {
@@ -146,25 +136,3 @@ export class TeamcityReporter extends reporters.Base {
     );
   };
 }
-
-function getErrors(
-  error: unknown,
-  imageErrorToString: (error: string, imageName?: string) => string,
-  errorToString: (error: Error) => string,
-): string[] {
-  const errors = [];
-  if (!(error instanceof Error)) {
-    errors.push(error as string);
-  } else if (!isImageError(error)) {
-    errors.push(errorToString(error));
-  } else if (typeof error.images == 'string') {
-    errors.push(imageErrorToString(error.images));
-  } else {
-    const imageErrors = error.images;
-    Object.keys(imageErrors).forEach((imageName) => {
-      errors.push(imageErrorToString(imageErrors[imageName] ?? '', imageName));
-    });
-  }
-
-  return errors;
-}