creevey 0.10.0-beta.31 → 0.10.0-beta.33

package/src/server/playwright/internal.ts

@@ -1,8 +1,10 @@
-import { Browser, BrowserType, Page, chromium, firefox, webkit } from 'playwright-core';
+import path from 'path';
+import { Browser, BrowserContext, 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/csf';
 import {
   BrowserConfigObject,
   Config,
@@ -11,13 +13,18 @@ import {
   StoryInput,
   StorybookEvents,
   StorybookGlobals,
-  noop,
 } from '../../types';
-import { subscribeOn } from '../messages';
-import { appendIframePath, getAddresses, LOCALHOST_REGEXP, resolveStorybookUrl, storybookRootID } from '../webdriver';
-import { isShuttingDown, resolvePlaywrightBrowserType, runSequence } from '../utils';
+import {
+  appendIframePath,
+  getAddresses,
+  LOCALHOST_REGEXP,
+  openBrowser,
+  resolveStorybookUrl,
+  storybookRootID,
+} from '../webdriver';
+import { getCreeveyCache, isShuttingDown, resolvePlaywrightBrowserType, runSequence } from '../utils';
 import { colors, logger } from '../logger';
-import type { Args } from '@storybook/csf';
+import assert from 'assert';
 
 const browsers = {
   chromium,
@@ -59,22 +66,34 @@ async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser |
 export class InternalBrowser {
   #isShuttingDown = false;
   #browser: Browser;
+  #context: BrowserContext;
   #page: Page;
+  #traceDir: string;
   #sessionId: string = v4();
   #serverHost: string | null = null;
   #serverPort: number;
+  #debug: boolean;
   #storybookGlobals?: StorybookGlobals;
-  #unsubscribe: () => void = noop;
-  constructor(browser: Browser, page: Page, port: number, storybookGlobals?: StorybookGlobals) {
+  #closeBrowser = openBrowser();
+  constructor(
+    browser: Browser,
+    context: BrowserContext,
+    page: Page,
+    traceDir: string,
+    port: number,
+    debug: boolean,
+    storybookGlobals?: StorybookGlobals,
+  ) {
     this.#browser = browser;
+    this.#context = context;
     this.#page = page;
+    this.#traceDir = traceDir;
     this.#serverPort = port;
+    this.#debug = debug;
     this.#storybookGlobals = storybookGlobals;
-    this.#unsubscribe = subscribeOn('shutdown', () => {
-      void this.closeBrowser();
-    });
   }
 
+  // TODO Expose #browser and #context in tests
   get browser() {
     return this.#page;
   }
@@ -87,19 +106,21 @@ export class InternalBrowser {
     if (this.#isShuttingDown) return;
 
     this.#isShuttingDown = true;
-    this.#unsubscribe();
 
     try {
+      if (this.#debug) await this.#context.tracing.stop({ path: path.join(this.#traceDir, 'trace.zip') });
       await this.#page.close();
+      if (this.#debug) await this.#page.video()?.saveAs(path.join(this.#traceDir, 'video.webm'));
+      await this.#context.close();
       await this.#browser.close();
-    } catch (_) {
+    } catch {
       /* noop */
+    } finally {
+      this.#closeBrowser();
     }
   }
 
   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) {
@@ -186,14 +207,24 @@ export class InternalBrowser {
       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();
+
+    assert(cacheDir, "Couldn't get cache directory");
 
     let browser: Browser | null = null;
 
-    const parsedUrl = new URL(gridUrl);
     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);
+      browser = await browsers[resolvePlaywrightBrowserType(browserConfig.browserName)].launch({
+        ...playwrightOptions,
+        tracesDir: path.join(cacheDir, `${process.pid}`),
+      });
     } else {
       if (browserConfig.browserName !== 'chrome') {
         logger().error("Playwright's Selenium Grid feature supports only chrome browser");
@@ -203,20 +234,29 @@ 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;
     }
 
-    // TODO Record video
-    const page = await browser.newPage();
-    // TODO Support tracing
-    // if (playwrightOptions?.trace) {
-    //   const context = page.context();
-    //   await context.tracing.start(playwrightOptions.trace);
-    // }
+    const context = await browser.newContext({
+      recordVideo: options.debug
+        ? {
+            dir: path.join(cacheDir, `${process.pid}`),
+            size: viewport,
+          }
+        : undefined,
+      screen: viewport,
+      viewport,
+    });
+    const page = await context.newPage();
+    if (options.debug) {
+      await context.tracing.start(
+        Object.assign({ screenshots: true, snapshots: true, sources: true }, playwrightOptions?.trace),
+      );
+    }
 
     if (logger().getLevel() <= Logger.levels.DEBUG) {
       page.on('console', (msg) => {
@@ -224,15 +264,20 @@ export class InternalBrowser {
       });
     }
 
-    // TODO Add debug output
-
-    const internalBrowser = new InternalBrowser(browser, page, options.port, _storybookGlobals);
+    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,
       });
 
@@ -250,15 +295,7 @@ export class InternalBrowser {
     }
   }
 
-  private async init({
-    browserName,
-    viewport,
-    storybookUrl,
-  }: {
-    browserName: string;
-    viewport?: { width: number; height: number };
-    storybookUrl: string;
-  }) {
+  private async init({ browserName, storybookUrl }: { browserName: string; storybookUrl: string }) {
     const sessionId = this.#sessionId;
 
     prefix.apply(logger(), {
@@ -278,7 +315,6 @@ export class InternalBrowser {
         () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
-        () => this.resizeViewport(viewport),
       ],
       () => !this.#isShuttingDown,
     );
@@ -291,7 +327,6 @@ export class InternalBrowser {
     }
 
     try {
-      // TODO this.#page.setDefaultNavigationTimeout(10000);
       const resolvedUrl = await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
       await this.#page.goto(resolvedUrl);
     } catch (error) {
@@ -317,8 +352,7 @@ export class InternalBrowser {
   }
 
   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) => {
@@ -331,7 +365,6 @@ export class InternalBrowser {
         do {
           try {
             // TODO Research a different way to ensure storybook is initiated
-            // TODO Maybe use `__STORYBOOK_PREVIEW__.extract()`
             wait = await this.#page.evaluate((SET_GLOBALS: string) => {
               if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return true;
               if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_GLOBALS) == undefined) return true;
@@ -347,10 +380,10 @@ export class InternalBrowser {
       })(),
     ]);
 
-    // 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
@@ -410,13 +443,6 @@ export class InternalBrowser {
     );
   }
 
-  private async resizeViewport(viewport?: { width: number; height: number }): Promise<void> {
-    if (!viewport) return;
-
-    logger().debug('Resizing viewport to', viewport);
-    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

@@ -5,6 +5,7 @@ import { logger } from '../logger';
 import { subscribeOn } from '../messages';
 import { CreeveyWebdriverBase } from '../webdriver';
 import type { InternalBrowser } from './internal';
+import { removeWorkerContainer } from '../worker/context.js'; // Import container context
 
 export class PlaywrightWebdriver extends CreeveyWebdriverBase {
   #browser: InternalBrowser | null = null;
@@ -21,7 +22,9 @@ export class PlaywrightWebdriver extends CreeveyWebdriverBase {
     this.#options = options;
 
     subscribeOn('shutdown', () => {
-      void this.#browser?.closeBrowser().finally(() => process.exit());
+      void this.#browser?.closeBrowser().finally(() => {
+        void removeWorkerContainer().finally(() => () => process.exit());
+      });
       this.#browser = null;
     });
   }
@@ -32,7 +35,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 +81,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 +96,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 +104,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 +112,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 +120,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/selenium/internal.ts

@@ -249,7 +249,7 @@ export class InternalBrowser {
         const rects = await this.#browser.executeScript<
           { elementRect: ElementRect; windowRect: ElementRect } | undefined
         >(function (selector: string): { elementRect: ElementRect; windowRect: ElementRect } | undefined {
-          window.scrollTo(0, 0); // TODO Maybe we should remove same code from `resetMousePosition`
+          window.scrollTo(0, 0);
           // eslint-disable-next-line no-var
           var element = document.querySelector(selector);
           if (!element) return;
@@ -297,12 +297,10 @@ export class InternalBrowser {
         //   ? context
         //     ? await context.captureElementScreenshot(await element.getId())
         //     : await browser.findElement(By.css(captureElement)).takeScreenshot()
-        //   : // TODO pointer-events: none, need to research
-        //     await takeCompositeScreenshot(browser, windowRect, elementRect);
+        //   : await takeCompositeScreenshot(browser, windowRect, elementRect);
         screenshot = isFitIntoViewport
           ? await this.#browser.findElement(By.css(captureElement)).takeScreenshot()
-          : // TODO pointer-events: none, need to research
-            await this.takeCompositeScreenshot(windowRect, elementRect);
+          : await this.takeCompositeScreenshot(windowRect, elementRect);
 
         logger().debug(`${chalk.cyan(captureElement)} is captured`);
       }
@@ -503,7 +501,6 @@ export class InternalBrowser {
     }
 
     try {
-      // TODO Pageload timeout 10s
       // NOTE: getUrlChecker already calls `browser.get` so we don't need another one
       await resolveStorybookUrl(appendIframePath(storybookUrl), (url) => this.checkUrl(url));
     } catch (error) {
@@ -541,7 +538,7 @@ export class InternalBrowser {
   }
 
   private async waitForStorybook(): Promise<void> {
-    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) => {
@@ -554,9 +551,6 @@ export class InternalBrowser {
         do {
           // TODO Research a different way to ensure storybook is initiated
           wait = await this.#browser.executeScript<boolean>(function (SET_GLOBALS: string): boolean {
-            // TODO Maybe use
-            // import { global } from '@storybook/global';
-            // global.IS_STORYBOOK
             if (typeof window.__STORYBOOK_ADDONS_CHANNEL__ == 'undefined') return true;
             if (window.__STORYBOOK_ADDONS_CHANNEL__.last(SET_GLOBALS) == undefined) return true;
             return false;
@@ -566,8 +560,7 @@ export class InternalBrowser {
       })(),
     ]);
 
-    // 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');
   }
 
   private async updateStorybookGlobals(): Promise<void> {

package/src/server/selenium/webdriver.ts

@@ -5,6 +5,7 @@ import { subscribeOn } from '../messages.js';
 import { CreeveyWebdriverBase } from '../webdriver.js';
 import type { InternalBrowser } from './internal.js';
 import { logger } from '../logger.js';
+import { removeWorkerContainer } from '../worker/context.js';
 
 declare global {
   interface Window {
@@ -31,7 +32,9 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
     this.#options = options;
 
     subscribeOn('shutdown', () => {
-      void this.#browser?.closeBrowser().finally(() => process.exit());
+      void this.#browser?.closeBrowser().finally(() => {
+        void removeWorkerContainer().finally(() => process.exit());
+      });
       this.#browser = null;
     });
   }
@@ -42,7 +45,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   getSessionId(): Promise<string> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -89,7 +91,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   async loadStoriesFromBrowser(): Promise<StoriesRaw> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -98,7 +99,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   afterTest(test: ServerTest): Promise<void> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -110,7 +110,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
     ignoreElements?: string | string[] | null,
   ): Promise<Buffer> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -119,7 +118,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   protected waitForComplete(callback: (isCompleted: boolean) => void): void {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -128,7 +126,6 @@ export class SeleniumWebdriver 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');
     }
 
@@ -137,7 +134,6 @@ export class SeleniumWebdriver 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/telemetry.ts

@@ -181,8 +181,8 @@ export async function sendScreenshotsCount(
   const testsMeta = { runId: uuid, tests };
 
   const fullPathname = buildPathname('tests', testsMeta);
-  // NOTE: Keep request path shorter than 32k symbols
-  const chunksCount = Math.ceil(fullPathname.length / 32_000);
+  // NOTE: Keep request path shorter than 24k symbols
+  const chunksCount = Math.ceil(fullPathname.length / 24_000);
   let chunks: string[] = [];
   if (chunksCount > 1) {
     const testsString = JSON.stringify(tests);

package/src/server/utils.ts

@@ -8,6 +8,7 @@ import { register as esmRegister } from 'tsx/esm/api';
 import { register as cjsRegister } from 'tsx/cjs/api';
 import { SkipOptions, SkipOption, isDefined, TestData, noop, ServerTest, Worker } from '../types.js';
 import { emitShutdownMessage, sendShutdownMessage } from './messages.js';
+import { LOCALHOST_REGEXP } from './webdriver.js';
 import assert from 'assert';
 import pidtree from 'pidtree';
 
@@ -99,7 +100,7 @@ export async function shutdownWorkers(): Promise<void> {
           new Promise<void>((resolve) => {
             const timeout = setTimeout(() => {
               if (worker.process.pid) void killTree(worker.process.pid);
-            }, 10000);
+            }, 10_000);
             worker.on('exit', () => {
               clearTimeout(timeout);
               resolve();
@@ -134,10 +135,6 @@ export async function killTree(rootPid: number): Promise<void> {
   });
 }
 
-export function shutdown(): void {
-  process.exit();
-}
-
 export function shutdownWithError(): void {
   process.exit(1);
 }
@@ -261,25 +258,36 @@ export async function loadThroughTSX<T>(
   return result;
 }
 
-export function waitOnUrl(url: string, timeout: number, delay: number) {
+export function waitOnUrl(waitUrl: string, timeout: number, delay: number) {
+  const urls = [waitUrl];
+  if (!LOCALHOST_REGEXP.test(waitUrl)) {
+    const parsedUrl = new URL(waitUrl);
+    parsedUrl.host = 'localhost';
+    urls.push(parsedUrl.toString());
+  }
   const startTime = Date.now();
-  return new Promise<void>((resolve, reject) => {
-    const interval = setInterval(() => {
-      http
-        .get(url, (response) => {
-          if (response.statusCode === 200) {
-            clearInterval(interval);
-            resolve();
-          }
-        })
-        .on('error', () => {
-          // Ignore HTTP errors
-        });
-
-      if (Date.now() - startTime > timeout) {
-        clearInterval(interval);
-        reject(new Error(`${url} didn't respond within ${timeout / 1000} seconds`));
-      }
-    }, delay);
-  });
+  return Promise.race(
+    urls.map(
+      (url) =>
+        new Promise<void>((resolve, reject) => {
+          const interval = setInterval(() => {
+            http
+              .get(url, (response) => {
+                if (response.statusCode === 200) {
+                  clearInterval(interval);
+                  resolve();
+                }
+              })
+              .on('error', () => {
+                // Ignore HTTP errors
+              });
+
+            if (Date.now() - startTime > timeout) {
+              clearInterval(interval);
+              reject(new Error(`${url} didn't respond within ${timeout / 1000} seconds`));
+            }
+          }, delay);
+        }),
+    ),
+  );
 }

package/src/server/webdriver.ts

@@ -18,6 +18,19 @@ export const storybookRootID = 'storybook-root';
 export const LOCALHOST_REGEXP = /(localhost|127\.0\.0\.1)/i;
 const DOCKER_INTERNAL = 'host.docker.internal';
 
+let browserClosePromise: Promise<void> | null = null;
+
+export const openBrowser = () => {
+  let resolve: () => void;
+  browserClosePromise = new Promise((r) => (resolve = r));
+  return () => {
+    resolve();
+    browserClosePromise = null;
+  };
+};
+
+export const waitForBrowserClose = () => browserClosePromise;
+
 export async function resolveStorybookUrl(
   storybookUrl: string,
   checkUrl: (url: string) => Promise<boolean>,

package/src/server/worker/context.ts

@@ -0,0 +1,14 @@
+import type { Container } from 'dockerode';
+
+let workerContainer: Container | null = null;
+
+export function setWorkerContainer(container: Container): void {
+  workerContainer = container;
+}
+
+export async function removeWorkerContainer(): Promise<void> {
+  if (workerContainer) {
+    await workerContainer.remove({ force: true });
+    workerContainer = null;
+  }
+}

package/src/types.ts

@@ -150,7 +150,6 @@ export interface BrowserConfigObject {
       screenshots?: boolean;
       snapshots?: boolean;
       sources?: boolean;
-      path: string;
     };
   };
 }
@@ -369,7 +368,6 @@ export interface Options {
   storybookUrl?: string;
   storybookPort?: string;
   storybookAutorunCmd?: string;
-  saveReport: boolean;
   failFast?: boolean;
   odiff?: boolean;
   noDocker?: boolean;