creevey 0.10.0-beta.8 → 0.10.0-rc.0

package/src/server/playwright/internal.ts

@@ -1,22 +1,39 @@
-import { Browser, BrowserType, Page, chromium, firefox, webkit } from 'playwright-core';
+import path from 'path';
+import assert from 'assert';
+import {
+  Browser,
+  BrowserContext,
+  BrowserContextOptions,
+  BrowserType,
+  Page,
+  chromium,
+  firefox,
+  webkit,
+} from 'playwright-core';
 import chalk from 'chalk';
 import { v4 } from 'uuid';
+import Logger from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
+import type { Args } from 'storybook/internal/types';
 import {
   BrowserConfigObject,
   Config,
-  Options,
   StoriesRaw,
   StoryInput,
   StorybookEvents,
   StorybookGlobals,
-  noop,
+  WorkerOptions,
 } from '../../types';
-import { subscribeOn } from '../messages';
 import { appendIframePath, getAddresses, LOCALHOST_REGEXP, resolveStorybookUrl, storybookRootID } from '../webdriver';
-import { isShuttingDown, runSequence } from '../utils';
+import { getCreeveyCache, isShuttingDown, resolvePlaywrightBrowserType, runSequence } from '../utils';
 import { colors, logger } from '../logger';
-import { Args } from '@storybook/csf';
+import { removeWorkerContainer } from '../worker/context';
+
+const browsers = {
+  chromium,
+  firefox,
+  webkit,
+};
 
 async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser | null> {
   let timeout: NodeJS.Timeout | null = null;
@@ -49,23 +66,59 @@ async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser |
   ]);
 }
 
+async function tryCreateBrowserContext(
+  browser: Browser,
+  options: BrowserContextOptions,
+): Promise<{ context: BrowserContext; page: Page }> {
+  try {
+    const context = await browser.newContext(options);
+    const page = await context.newPage();
+    return { context, page };
+  } catch (error) {
+    if (error instanceof Error && error.message.includes('ffmpeg')) {
+      logger().warn('Failed to create browser context with video recording. Video recording will be disabled.');
+      logger().warn(error);
+      const context = await browser.newContext({
+        ...options,
+        recordVideo: undefined,
+      });
+      const page = await context.newPage();
+      return { context, page };
+    }
+    throw error;
+  }
+}
+
 export class InternalBrowser {
   #isShuttingDown = false;
   #browser: Browser;
+  #context: BrowserContext;
   #page: Page;
+  #traceDir: string;
   #sessionId: string = v4();
   #serverHost: string | null = null;
   #serverPort: number;
-  #unsubscribe: () => void = noop;
-  constructor(browser: Browser, page: Page, port: number) {
+  #debug: boolean;
+  #storybookGlobals?: StorybookGlobals;
+  constructor(
+    browser: Browser,
+    context: BrowserContext,
+    page: Page,
+    traceDir: string,
+    port: number,
+    debug = false,
+    storybookGlobals?: StorybookGlobals,
+  ) {
     this.#browser = browser;
+    this.#context = context;
     this.#page = page;
+    this.#traceDir = traceDir;
     this.#serverPort = port;
-    this.#unsubscribe = subscribeOn('shutdown', () => {
-      void this.closeBrowser();
-    });
+    this.#debug = debug;
+    this.#storybookGlobals = storybookGlobals;
   }
 
+  // TODO Expose #browser and #context in tests
   get browser() {
     return this.#page;
   }
@@ -78,32 +131,41 @@ export class InternalBrowser {
     if (this.#isShuttingDown) return;
 
     this.#isShuttingDown = true;
-    this.#unsubscribe();
 
-    try {
-      await this.#page.close();
-      await this.#browser.close();
-    } catch (_) {
-      /* noop */
+    const teardown = [
+      this.#debug ? () => this.#context.tracing.stop({ path: path.join(this.#traceDir, 'trace.zip') }) : null,
+      () => this.#page.close(),
+      this.#debug ? () => this.#page.video()?.saveAs(path.join(this.#traceDir, 'video.webm')) : null,
+      () => this.#context.close(),
+      () => this.#browser.close(),
+      () => removeWorkerContainer(),
+    ];
+
+    for (const fn of teardown) {
+      try {
+        if (fn) await fn();
+      } catch {
+        /* noop */
+      }
     }
   }
 
   async takeScreenshot(captureElement?: string | null, ignoreElements?: string | string[] | null): Promise<Buffer> {
-    // TODO Implement features from selenium `takeScreenshot`
-    // TODO Do we need scroll bar hack from selenium?
     const ignore = Array.isArray(ignoreElements) ? ignoreElements : ignoreElements ? [ignoreElements] : [];
     const mask = ignore.map((el) => this.#page.locator(el));
     if (captureElement) {
       const element = await this.#page.$(captureElement);
       if (!element) throw new Error(`Element with selector ${captureElement} not found`);
 
+      logger().debug(`Capturing ${chalk.cyan(captureElement)} element`);
       return element.screenshot({
+        style: ':root { overflow: hidden !important; }',
         animations: 'disabled',
         mask,
-        style: ':root { overflow: hidden !important; }',
       });
     }
-    return this.#page.screenshot({ animations: 'disabled', mask, fullPage: true });
+    logger().debug('Capturing viewport screenshot');
+    return this.#page.screenshot({ animations: 'disabled', mask });
   }
 
   waitForComplete(callback: (isCompleted: boolean) => void): void {
@@ -112,6 +174,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();
 
@@ -122,6 +185,7 @@ export class InternalBrowser {
       [id: string, shouldWaitForReady: boolean]
     >(
       ([id, shouldWaitForReady]) => {
+        // TODO: Don't use creevey related global variables, inline this function to simplify support
         if (typeof window.__CREEVEY_SELECT_STORY__ == 'undefined') {
           return [
             "Creevey can't switch story. This may happened if forget to add `creevey` addon to your storybook config, or storybook not loaded in browser due syntax error.",
@@ -154,58 +218,50 @@ export class InternalBrowser {
     );
   }
 
-  async loadStoriesFromBrowser(retry = false): Promise<StoriesRaw> {
-    try {
-      const stories = await this.#page.evaluate<StoriesRaw | undefined>(() => window.__CREEVEY_GET_STORIES__());
+  async loadStoriesFromBrowser(): Promise<StoriesRaw> {
+    const stories = await this.#page.evaluate<StoriesRaw | undefined>(() => window.__CREEVEY_GET_STORIES__());
 
-      if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
+    if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
 
-      return stories;
-    } catch (error) {
-      // TODO Check how other solutions with playwright get stories from storybook
-      if (retry) throw error;
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      // NOTE: Try one more time because of dynamic nature of vite and storybook
-      return this.loadStoriesFromBrowser(true);
-    }
+    return stories;
   }
 
   static async getBrowser(
     browserName: string,
     gridUrl: string,
     config: Config,
-    options: Options,
+    options: WorkerOptions,
   ): Promise<InternalBrowser | null> {
     const browserConfig = config.browsers[browserName] as BrowserConfigObject;
     const {
       storybookUrl: address = config.storybookUrl,
       viewport,
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       _storybookGlobals,
+      storybookGlobals = _storybookGlobals,
       seleniumCapabilities,
       playwrightOptions,
     } = browserConfig;
+    const parsedUrl = new URL(gridUrl);
+    const tracesDir = path.join(
+      playwrightOptions?.tracesDir ?? path.join(config.reportDir, 'traces'),
+      process.pid.toString(),
+    );
+    const cacheDir = await getCreeveyCache();
 
-    let browser: Browser | null = null;
+    assert(cacheDir, "Couldn't get cache directory");
 
-    if (new URL(gridUrl).protocol === 'ws:') {
-      switch (browserConfig.browserName) {
-        case 'chromium':
-          browser = await tryConnect(chromium, gridUrl);
-          break;
-        case 'firefox':
-          browser = await tryConnect(firefox, gridUrl);
-          break;
-        case 'webkit':
-          browser = await tryConnect(webkit, gridUrl);
-          break;
+    let browser: Browser | null = null;
 
-        default:
-          logger().error(
-            `Unknown browser ${browserConfig.browserName}. Playwright supports browsers: chromium, firefox, webkit`,
-          );
-      }
+    if (parsedUrl.protocol === 'ws:') {
+      browser = await tryConnect(browsers[resolvePlaywrightBrowserType(browserConfig.browserName)], gridUrl);
+    } else if (parsedUrl.protocol === 'creevey:') {
+      browser = await browsers[resolvePlaywrightBrowserType(browserConfig.browserName)].launch({
+        ...playwrightOptions,
+        tracesDir: path.join(cacheDir, `${process.pid}`),
+      });
     } else {
-      if (browserConfig.browserName != 'chrome') {
+      if (browserConfig.browserName !== 'chrome') {
         logger().error("Playwright's Selenium Grid feature supports only chrome browser");
         return null;
       }
@@ -213,27 +269,50 @@ export class InternalBrowser {
       process.env.SELENIUM_REMOTE_URL = gridUrl;
       process.env.SELENIUM_REMOTE_CAPABILITIES = JSON.stringify(seleniumCapabilities);
 
-      browser = await chromium.launch(playwrightOptions);
+      browser = await chromium.launch({ ...playwrightOptions, tracesDir: path.join(cacheDir, `${process.pid}`) });
     }
 
     if (!browser) {
       return null;
     }
 
-    const page = await browser.newPage();
+    const { context, page } = await tryCreateBrowserContext(browser, {
+      recordVideo: options.debug
+        ? {
+            dir: path.join(cacheDir, `${process.pid}`),
+            size: viewport,
+          }
+        : undefined,
+      screen: viewport,
+      viewport,
+    });
+    if (options.debug) {
+      await context.tracing.start(
+        Object.assign({ screenshots: true, snapshots: true, sources: true }, playwrightOptions?.trace),
+      );
+    }
 
-    // TODO Add debug output
+    if (logger().getLevel() <= Logger.levels.DEBUG) {
+      page.on('console', (msg) => {
+        logger().debug(`Console message: ${msg.text()}`);
+      });
+    }
 
-    const internalBrowser = new InternalBrowser(browser, page, options.port);
+    const internalBrowser = new InternalBrowser(
+      browser,
+      context,
+      page,
+      tracesDir,
+      options.port,
+      options.debug,
+      storybookGlobals,
+    );
 
     try {
       if (isShuttingDown.current) return null;
       const done = await internalBrowser.init({
         browserName,
-        viewport,
         storybookUrl: address,
-        storybookGlobals: _storybookGlobals,
-        resolveStorybookUrl: config.resolveStorybookUrl,
       });
 
       return done ? internalBrowser : null;
@@ -250,19 +329,7 @@ export class InternalBrowser {
     }
   }
 
-  private async init({
-    browserName,
-    viewport,
-    storybookUrl,
-    storybookGlobals,
-    resolveStorybookUrl,
-  }: {
-    browserName: string;
-    viewport?: { width: number; height: number };
-    storybookUrl: string;
-    storybookGlobals?: StorybookGlobals;
-    resolveStorybookUrl?: () => Promise<string>;
-  }) {
+  private async init({ browserName, storybookUrl }: { browserName: string; storybookUrl: string }) {
     const sessionId = this.#sessionId;
 
     prefix.apply(logger(), {
@@ -276,36 +343,26 @@ export class InternalBrowser {
 
     return await runSequence(
       [
-        () => this.openStorybookPage(storybookUrl, resolveStorybookUrl),
+        () => this.openStorybookPage(storybookUrl),
         () => this.waitForStorybook(),
-        () => this.updateStorybookGlobals(storybookGlobals),
+        () => this.triggerViteReload(),
+        () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
-        () => this.resizeViewport(viewport),
       ],
       () => !this.#isShuttingDown,
     );
   }
 
-  private async openStorybookPage(storybookUrl: string, resolver?: () => Promise<string>): Promise<void> {
+  private async openStorybookPage(storybookUrl: string): Promise<void> {
     if (!LOCALHOST_REGEXP.test(storybookUrl)) {
       await this.#page.goto(appendIframePath(storybookUrl));
       return;
     }
 
     try {
-      if (resolver) {
-        logger().debug('Resolving storybook url with custom resolver');
-
-        const resolvedUrl = await resolver();
-
-        logger().debug(`Resolver storybook url ${resolvedUrl}`);
-
-        await this.#page.goto(appendIframePath(resolvedUrl));
-      } else {
-        // TODO this.#page.setDefaultNavigationTimeout(10000);
-        await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
-      }
+      const resolvedUrl = await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
+      await this.#page.goto(resolvedUrl);
     } catch (error) {
       logger().error('Failed to resolve storybook URL', error instanceof Error ? error.message : '');
       throw error;
@@ -313,21 +370,23 @@ export class InternalBrowser {
   }
 
   private async checkUrl(url: string): Promise<boolean> {
+    const page = await this.#browser.newPage();
     try {
       logger().debug(`Opening ${chalk.magenta(url)} and checking the page source`);
-      const response = await this.#page.goto(url, { waitUntil: 'commit' });
+      const response = await page.goto(url, { waitUntil: 'commit' });
       const source = await response?.text();
 
       logger().debug(`Checking ${chalk.cyan(`#${storybookRootID}`)} existence on ${chalk.magenta(url)}`);
       return source?.includes(`id="${storybookRootID}"`) ?? false;
     } catch {
       return false;
+    } finally {
+      await page.close();
     }
   }
 
   private async waitForStorybook(): Promise<void> {
-    // TODO Duplicated code with selenium
-    logger().debug('Waiting for `setStories` event to make sure that storybook is initiated');
+    logger().debug('Waiting for Storybook to initiate');
 
     const isTimeout = await Promise.race([
       new Promise<boolean>((resolve) => {
@@ -338,6 +397,7 @@ export class InternalBrowser {
       (async () => {
         let wait = true;
         do {
+          if (this.#page.isClosed()) return false;
           try {
             // TODO Research a different way to ensure storybook is initiated
             wait = await this.#page.evaluate((SET_GLOBALS: string) => {
@@ -347,27 +407,43 @@ export class InternalBrowser {
             }, StorybookEvents.SET_GLOBALS);
           } catch (e: unknown) {
             logger().debug('An error has been caught during the script:', e);
+            if (this.#page.isClosed()) throw e;
           }
+          if (wait) await new Promise((resolve) => setTimeout(resolve, 1000));
         } while (wait);
         return false;
       })(),
     ]);
 
-    // TODO Change the message to describe a reason why it might happen
-    if (isTimeout) throw new Error('Failed to wait `setStories` event');
+    if (isTimeout) throw new Error('Failed to wait Storybook init');
+  }
+
+  // TODO Doesn't work for some reason, maybe because of race-condition
+  private async triggerViteReload(): Promise<void> {
+    // NOTE: On the first load, Vite might try to optimize some dependencies and reload the page
+    // We need to trigger reload earlier to avoid unnecessary reloads further
+    try {
+      await this.#page.evaluate(async () => {
+        await window.__STORYBOOK_PREVIEW__.extract();
+      });
+    } catch {
+      await this.waitForStorybook();
+    }
   }
 
-  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> {
-    const addresses = getAddresses();
+    const storybookUrl = this.#page.url();
+    const storybookHost = new URL(storybookUrl).hostname;
+    const addresses = [storybookHost, ...getAddresses()];
 
     this.#serverHost = await this.#page.evaluate(
       ([hosts, port]) => {
@@ -392,8 +468,10 @@ export class InternalBrowser {
   }
 
   private async updateBrowserGlobalVariables() {
+    logger().debug('Updating browser global variables');
     await this.#page.evaluate(
       ([workerId, creeveyHost, creeveyPort]) => {
+        window.__CREEVEY_ENV__ = true;
         window.__CREEVEY_WORKER_ID__ = workerId;
         window.__CREEVEY_SERVER_HOST__ = creeveyHost ?? 'localhost';
         window.__CREEVEY_SERVER_PORT__ = creeveyPort;
@@ -402,13 +480,8 @@ export class InternalBrowser {
     );
   }
 
-  private async resizeViewport(viewport?: { width: number; height: number }): Promise<void> {
-    if (!viewport) return;
-
-    await this.#page.setViewportSize(viewport);
-  }
-
   private async resetMousePosition(): Promise<void> {
+    logger().debug('Resetting mouse position to (0, 0)');
     await this.#page.mouse.move(0, 0);
   }
 }

package/src/server/playwright/webdriver.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../../types/playwright-context" />
-import { Args } from '@storybook/csf';
-import { Config, Options, ServerTest, StoriesRaw, StoryInput } from '../../types';
+import type { Args } from 'storybook/internal/types';
+import { Config, ServerTest, StoriesRaw, StoryInput, WorkerOptions } from '../../types';
 import { logger } from '../logger';
 import { subscribeOn } from '../messages';
 import { CreeveyWebdriverBase } from '../webdriver';
@@ -11,8 +11,8 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
   #browserName: string;
   #gridUrl: string;
   #config: Config;
-  #options: Options;
-  constructor(browser: string, gridUrl: string, config: Config, options: Options) {
+  #options: WorkerOptions;
+  constructor(browser: string, gridUrl: string, config: Config, options: WorkerOptions) {
     super();
 
     this.#browserName = browser;
@@ -32,7 +32,6 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
 
   getSessionId(): Promise<string> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -79,7 +78,6 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
 
   async loadStoriesFromBrowser(): Promise<StoriesRaw> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -95,7 +93,6 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
     ignoreElements?: string | string[] | null,
   ): Promise<Buffer> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -104,7 +101,6 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
 
   protected waitForComplete(callback: (isCompleted: boolean) => void): void {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -113,7 +109,6 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
 
   protected async selectStory(id: string, waitForReady?: boolean): Promise<boolean> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -122,7 +117,6 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
 
   protected async updateStoryArgs(story: StoryInput, updatedArgs: Args): Promise<void> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 

package/src/server/providers/browser.ts

@@ -24,7 +24,7 @@ export const loadStories: StoriesProvider = async (_config, storiesListener, web
                   oldTests.join('\n'),
               );
             unsubscribe();
-            resolve(stories);
+            resolve(deserializeRawStories(stories));
           }
         });
         sendStoriesMessage(worker, { type: 'get' });
@@ -37,10 +37,11 @@ export const loadStories: StoriesProvider = async (_config, storiesListener, web
   } else {
     subscribeOn('stories', (message) => {
       if (message.type == 'get')
-        emitStoriesMessage({ type: 'set', payload: { stories, oldTests: storiesWithOldTests } });
+        emitStoriesMessage({ type: 'set', payload: { stories: rawStories, oldTests: storiesWithOldTests } });
       if (message.type == 'update') storiesListener(new Map(message.payload));
     });
-    const stories = deserializeRawStories((await webdriver?.loadStoriesFromBrowser()) ?? {});
+    const rawStories = (await webdriver?.loadStoriesFromBrowser()) ?? {};
+    const stories = deserializeRawStories(rawStories);
 
     const storiesWithOldTests: string[] = [];
 

package/src/server/providers/hybrid.ts

@@ -1,5 +1,4 @@
-import chokidar from 'chokidar';
-
+import { watch } from 'chokidar';
 import { loadStories as browserProvider } from './browser.js';
 import type { Config, CreeveyStoryParams, CreeveyStory, StoriesProvider } from '../../types.js';
 import { logger } from '../logger.js';
@@ -53,7 +52,7 @@ async function parseParams(
   const testFiles = readDirRecursive(config.testsDir).filter((file) => config.testsRegex?.test(file));
 
   if (listener) {
-    chokidar.watch(testFiles).on('change', (filePath) => {
+    watch(testFiles).on('change', (filePath) => {
       logger().debug(`changed: ${filePath}`);
 
       // doesn't work, always returns {} due modules caching

package/src/server/report.ts

@@ -0,0 +1,51 @@
+import open from 'open';
+import { Config } from '../types.js';
+import { logger } from './logger.js';
+import { TestsManager } from './master/testsManager.js';
+import { start as startServer } from './master/server.js';
+import { CreeveyApi } from './master/api.js';
+import { shutdownWorkers } from './utils.js';
+
+/**
+ * UI Update Mode implementation.
+ * This mode allows users to review and approve screenshots from the browser interface.
+ * It combines the functionality of both --ui and --update flags.
+ *
+ * @param config Creevey configuration
+ * @param port Port to run the server on
+ */
+export function report(config: Config, reportDir: string, port: number): void {
+  logger().info('Starting UI Update Mode');
+
+  process.on('SIGINT', () => void shutdownWorkers());
+
+  const url = `http://localhost:${port}`;
+
+  // Initialize TestsManager with the configured directories
+  const testsManager = new TestsManager(config.screenDir, reportDir);
+
+  // Load tests from the report
+  const testsFromReport = testsManager.loadTestsFromReport();
+
+  if (Object.keys(testsFromReport).length === 0) {
+    logger().warn('No tests found in report. Run tests first to generate report data.');
+    return;
+  }
+
+  // Set tests in the manager
+  testsManager.updateTests(testsFromReport);
+
+  // Start API server with UI enabled
+  const resolveApi = startServer(reportDir, port, true);
+
+  // Initialize API
+  const api = new CreeveyApi(testsManager);
+
+  // Resolve the API for the server
+  resolveApi(api);
+
+  logger().info(`UI Update Mode started on ${url}`);
+  logger().info('You can now review and approve screenshots from the browser.');
+
+  void open(url);
+}