creevey 0.10.0-beta.23 → 0.10.0-beta.25

package/src/server/playwright/internal.ts

@@ -14,9 +14,15 @@ import {
 } from '../../types';
 import { subscribeOn } from '../messages';
 import { appendIframePath, getAddresses, LOCALHOST_REGEXP, resolveStorybookUrl, storybookRootID } from '../webdriver';
-import { isShuttingDown, runSequence } from '../utils';
+import { isShuttingDown, resolvePlaywrightBrowserType, runSequence } from '../utils';
 import { colors, logger } from '../logger';
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
+
+const browsers = {
+  chromium,
+  firefox,
+  webkit,
+};
 
 async function tryConnect(type: BrowserType, gridUrl: string): Promise<Browser | null> {
   let timeout: NodeJS.Timeout | null = null;
@@ -157,20 +163,12 @@ 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(
@@ -190,25 +188,13 @@ export class InternalBrowser {
 
     let browser: Browser | null = null;
 
-    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;
-
-        default:
-          logger().error(
-            `Unknown browser ${browserConfig.browserName}. Playwright supports browsers: chromium, firefox, webkit`,
-          );
-      }
+    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);
     } else {
-      if (browserConfig.browserName != 'chrome') {
+      if (browserConfig.browserName !== 'chrome') {
         logger().error("Playwright's Selenium Grid feature supports only chrome browser");
         return null;
       }
@@ -223,7 +209,13 @@ export class InternalBrowser {
       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);
+    // }
 
     // TODO Add debug output
 
@@ -278,6 +270,7 @@ export class InternalBrowser {
       [
         () => this.openStorybookPage(storybookUrl, resolveStorybookUrl),
         () => this.waitForStorybook(),
+        () => this.triggerViteReload(),
         () => this.updateStorybookGlobals(),
         () => this.resolveCreeveyHost(),
         () => this.updateBrowserGlobalVariables(),
@@ -304,7 +297,8 @@ export class InternalBrowser {
         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 : '');
@@ -313,15 +307,18 @@ 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();
     }
   }
 
@@ -340,6 +337,7 @@ 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;
@@ -348,6 +346,7 @@ export class InternalBrowser {
           } catch (e: unknown) {
             logger().debug('An error has been caught during the script:', e);
           }
+          if (wait) await new Promise((resolve) => setTimeout(resolve, 1000));
         } while (wait);
         return false;
       })(),
@@ -357,6 +356,18 @@ export class InternalBrowser {
     if (isTimeout) throw new Error('Failed to wait `setStories` event');
   }
 
+  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(): Promise<void> {
     if (!this.#storybookGlobals) return;
 
@@ -392,6 +403,7 @@ export class InternalBrowser {
   }
 
   private async updateBrowserGlobalVariables() {
+    logger().debug('Updating browser global variables');
     await this.#page.evaluate(
       ([workerId, creeveyHost, creeveyPort]) => {
         window.__CREEVEY_ENV__ = true;
@@ -406,10 +418,12 @@ 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/testsFiles/parser.ts

@@ -1,8 +1,58 @@
 import { pathToFileURL } from 'url';
-import { toId, storyNameFromExport } from '@storybook/csf';
 import { CreeveyStoryParams, CreeveyTestFunction } from '../../types.js';
 import { loadThroughTSX } from '../utils.js';
 
+// NOTE: Copy-pasted from @storybook/csf
+function toStartCaseStr(str: string) {
+  return str
+    .replace(/_/g, ' ')
+    .replace(/-/g, ' ')
+    .replace(/\./g, ' ')
+    .replace(/([^\n])([A-Z])([a-z])/g, (_, $1, $2, $3) => `${$1} ${$2}${$3}`)
+    .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
+    .replace(/([a-z])([0-9])/gi, (_, $1, $2) => `${$1} ${$2}`)
+    .replace(/([0-9])([a-z])/gi, (_, $1, $2) => `${$1} ${$2}`)
+    .replace(/(\s|^)(\w)/g, (_, $1, $2: string) => `${$1}${$2.toUpperCase()}`)
+    .replace(/ +/g, ' ')
+    .trim();
+}
+
+/**
+ * Remove punctuation and illegal characters from a story ID.
+ *
+ * See https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
+ */
+const sanitize = (string: string) => {
+  return (
+    string
+      .toLowerCase()
+      // eslint-disable-next-line no-useless-escape
+      .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-+/, '')
+      .replace(/-+$/, '')
+  );
+};
+
+const sanitizeSafe = (string: string, part: string) => {
+  const sanitized = sanitize(string);
+  if (sanitized === '') {
+    throw new Error(`Invalid ${part} '${string}', must include alphanumeric characters`);
+  }
+  return sanitized;
+};
+
+/**
+ * Generate a storybook ID from a component/kind and story name.
+ */
+const toId = (kind: string, name?: string) =>
+  `${sanitizeSafe(kind, 'kind')}${name ? `--${sanitizeSafe(name, 'name')}` : ''}`;
+
+/**
+ * Transform a CSF named export into a readable story name
+ */
+const storyNameFromExport = (key: string) => toStartCaseStr(key);
+
 export type CreeveyParamsByStoryId = Record<string, CreeveyStoryParams>;
 
 export default async function parse(files: string[]): Promise<CreeveyParamsByStoryId> {

package/src/server/utils.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
-import { get } from 'https';
+import https from 'https';
+import http from 'http';
 import cluster from 'cluster';
 import { dirname } from 'path';
 import { fileURLToPath, pathToFileURL } from 'url';
@@ -7,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 assert from 'assert';
 
 const importMetaUrl = pathToFileURL(__filename).href;
 
@@ -14,6 +16,19 @@ export const isShuttingDown = { current: false };
 
 export const configExt = ['.js', '.mjs', '.ts', '.cjs', '.mts', '.cts'];
 
+const browserTypes = {
+  chromium: 'chromium',
+  'chromium-headless-shell': 'chromium',
+  chrome: 'chromium',
+  'chrome-beta': 'chromium',
+  msedge: 'chromium',
+  'msedge-beta': 'chromium',
+  'msedge-dev': 'chromium',
+  'bidi-chromium': 'chromium',
+  firefox: 'firefox',
+  webkit: 'webkit',
+} as const;
+
 export const skipOptionKeys = ['in', 'kinds', 'stories', 'tests', 'reason'];
 
 function matchBy(pattern: string | string[] | RegExp | undefined, value: string): boolean {
@@ -106,6 +121,23 @@ export function gracefullyKill(worker: Worker): void {
   sendShutdownMessage(worker);
 }
 
+export function shutdown(): void {
+  process.exit();
+}
+
+export function shutdownWithError(): void {
+  process.exit(1);
+}
+
+export function resolvePlaywrightBrowserType(browserName: string): (typeof browserTypes)[keyof typeof browserTypes] {
+  assert(
+    browserName in browserTypes,
+    new Error(`Failed to match browser name "${browserName}" to playwright browserType`),
+  );
+
+  return browserTypes[browserName as keyof typeof browserTypes];
+}
+
 export async function getCreeveyCache(): Promise<string | undefined> {
   const { default: findCacheDir } = await import('find-cache-dir');
   return findCacheDir({ name: 'creevey', cwd: dirname(fileURLToPath(importMetaUrl)) });
@@ -141,11 +173,12 @@ export function testsToImages(tests: (TestData | undefined)[]): Set<string> {
 
 // https://tuhrig.de/how-to-know-you-are-inside-a-docker-container/
 export const isInsideDocker =
-  fs.existsSync('/proc/1/cgroup') && fs.readFileSync('/proc/1/cgroup', 'utf-8').includes('docker');
+  (fs.existsSync('/proc/1/cgroup') && fs.readFileSync('/proc/1/cgroup', 'utf-8').includes('docker')) ||
+  process.env.DOCKER === 'true';
 
 export const downloadBinary = (downloadUrl: string, destination: string): Promise<void> =>
   new Promise((resolve, reject) =>
-    get(downloadUrl, (response) => {
+    https.get(downloadUrl, (response) => {
       if (response.statusCode == 302) {
         const { location } = response.headers;
         if (!location) {
@@ -214,3 +247,26 @@ export async function loadThroughTSX<T>(
 
   return result;
 }
+
+export function waitOnUrl(url: string, timeout: number, delay: number) {
+  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);
+  });
+}

package/src/types.ts

@@ -4,7 +4,7 @@ import type Pixelmatch from 'pixelmatch';
 import type { ODiffOptions } from 'odiff-bin';
 import type { expect } from 'chai';
 import type EventEmitter from 'events';
-import { LaunchOptions } from 'playwright-core';
+import type { LaunchOptions } from 'playwright-core';
 // import type { Browser } from 'playwright-core';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -145,7 +145,14 @@ export interface BrowserConfigObject {
     [name: string]: unknown;
   };
 
-  playwrightOptions?: Omit<LaunchOptions, 'logger'>;
+  playwrightOptions?: Omit<LaunchOptions, 'logger'> & {
+    trace?: {
+      screenshots?: boolean;
+      snapshots?: boolean;
+      sources?: boolean;
+      path: string;
+    };
+  };
 }
 
 export type StorybookGlobals = Record<string, unknown>;
@@ -200,6 +207,11 @@ export interface Config {
    * Url where storybook hosted on
    */
   resolveStorybookUrl?: () => Promise<string>;
+  /**
+   * Command to automatically start Storybook if it is not running.
+   * For example, `npm run storybook`, `yarn run storybook` etc.
+   */
+  storybookAutorunCmd?: string;
   /**
    * Absolute path to directory with reference images
    * @default path.join(process.cwd(), './images')
@@ -354,8 +366,11 @@ export interface Options {
   reportDir?: string;
   gridUrl?: string;
   storybookUrl?: string;
+  storybookAutorunCmd?: string;
+  saveReport: boolean;
   failFast?: boolean;
   odiff?: boolean;
+  noDocker?: boolean;
 }
 
 export type WorkerError = 'browser' | 'test' | 'unknown';