creevey 0.9.0-beta.20 → 0.9.0-beta.21

package/src/client/addon/controller.ts

@@ -0,0 +1,224 @@
+import { API } from '@storybook/api';
+import { Addon_TypesEnum } from '@storybook/types';
+import { SET_STORIES, STORY_RENDERED } from '@storybook/core-events';
+import { denormalizeStoryParameters } from '../../shared/index.js';
+import { CreeveyStatus, CreeveyUpdate, isDefined, TestData, TestStatus, StoriesRaw } from '../../types.js';
+import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
+import { calcStatus } from '../shared/helpers.js';
+import { getEmojiByTestStatus } from './utils.js';
+
+export const ADDON_ID = 'creevey';
+
+// TODO Add `useController` hook
+// TODO use `import { useGlobals, useStorybookApi } from '@storybook/manager-api';`
+export class CreeveyController {
+  storyId = '';
+  activeBrowser = '';
+  selectedTestId = '';
+  status: CreeveyStatus = { isRunning: false, tests: {}, browsers: [] };
+  creeveyApi: CreeveyClientApi | null = null;
+  stories: StoriesRaw = {};
+
+  updateStatusListeners: ((update: CreeveyUpdate) => void)[] = [];
+  changeTestListeners: ((testId: string) => void)[] = [];
+  constructor(public storybookApi: API) {
+    this.storybookApi = storybookApi;
+  }
+  initAll = async (): Promise<void> => {
+    this.storybookApi.on(STORY_RENDERED, this.onStoryRendered);
+    this.storybookApi.on(SET_STORIES, this.onSetStories);
+    this.creeveyApi = await initCreeveyClientApi();
+    this.creeveyApi.onUpdate(this.handleCreeveyUpdate);
+    this.status = await this.creeveyApi.status;
+  };
+
+  onUpdateStatus(listener: (update: CreeveyUpdate) => void): () => void {
+    this.updateStatusListeners.push(listener);
+    return () => void (this.updateStatusListeners = this.updateStatusListeners.filter((x) => x != listener));
+  }
+
+  onChangeTest(listener: (testId: string) => void): () => void {
+    this.changeTestListeners.push(listener);
+    return () => void (this.changeTestListeners = this.changeTestListeners.filter((x) => x != listener));
+  }
+
+  handleCreeveyUpdate = (update: CreeveyUpdate): void => {
+    const { tests, removedTests = [], isRunning } = update;
+    if (isDefined(isRunning)) {
+      this.status.isRunning = isRunning;
+    }
+    if (isDefined(tests)) {
+      const prevTests = this.status.tests;
+      const prevStories = this.stories;
+      Object.values(tests)
+        .filter(isDefined)
+        .forEach((update) => {
+          const { id, skip, status, results, approved, storyId } = update;
+          const test = prevTests[id];
+          if (!test) {
+            return (prevTests[id] = update);
+          }
+          if (isDefined(skip)) test.skip = skip;
+          if (isDefined(status)) {
+            test.status = status;
+            if (isDefined(storyId) && isDefined(prevStories[storyId])) {
+              const story = prevStories[storyId];
+              const storyStatus = this.getStoryTests(storyId);
+              const oldStatus = storyStatus
+                .map((x) => (x.id === id ? status : x.status))
+                .reduce((oldStatus, newStatus) => calcStatus(oldStatus, newStatus), undefined);
+
+              story.name = this.addStatusToStoryName(story.name, calcStatus(oldStatus, status), skip ?? false);
+            }
+          }
+          if (isDefined(results)) {
+            if (test.results) test.results.push(...results);
+            else test.results = results;
+          }
+          if (isDefined(approved)) {
+            Object.entries(approved).forEach(
+              ([image, retry]) => retry !== undefined && ((test.approved = test.approved ?? {})[image] = retry),
+            );
+          }
+        });
+      const nextTests: Partial<Record<string, TestData>> = {};
+      const testsToRemove = new Set(removedTests.map(({ id }) => id));
+
+      for (const id in prevTests) {
+        if (testsToRemove.has(id)) continue;
+        nextTests[id] = prevTests[id];
+      }
+
+      this.status.tests = nextTests;
+      this.stories = prevStories;
+      this.setPanelsTitle();
+      // TODO Check setStories method in 6.x and migrate properly
+      this.storybookApi.emit(SET_STORIES, this.stories);
+    }
+    this.updateStatusListeners.forEach((x) => {
+      x(update);
+    });
+  };
+
+  getCurrentTest = (): TestData | undefined => {
+    return this.status.tests[this.selectedTestId];
+  };
+
+  onStoryRendered = (storyId: string): void => {
+    if (this.storyId === '') this.addStatusesToSideBar();
+    if (this.storyId !== storyId) {
+      this.storyId = storyId;
+      this.selectedTestId = this.getTestsByStoryIdAndBrowser(this.activeBrowser)[0]?.id ?? '';
+      this.setPanelsTitle();
+      this.changeTestListeners.forEach((x) => {
+        x(this.selectedTestId);
+      });
+    }
+  };
+
+  onStart = (): void => {
+    this.creeveyApi?.start([this.selectedTestId]);
+  };
+
+  onStop = (): void => {
+    this.creeveyApi?.stop();
+  };
+
+  onImageApprove = (id: string, retry: number, image: string): void => this.creeveyApi?.approve(id, retry, image);
+
+  onStartAllStoryTests = (): void => {
+    const ids: string[] = Object.values(this.status.tests)
+      .filter(isDefined)
+      .filter((x) => x.storyId === this.storyId)
+      .map((x) => x.id);
+    this.creeveyApi?.start(ids);
+  };
+
+  onStartAllTests = (): void => {
+    const ids = Object.values(this.status.tests)
+      .filter(isDefined)
+      .map((x) => x.id);
+    this.creeveyApi?.start(ids);
+  };
+  onSetStories = (data: Parameters<typeof denormalizeStoryParameters>['0']): void => {
+    const stories = data.v ? denormalizeStoryParameters(data) : data.stories;
+    this.stories = stories;
+  };
+
+  setActiveBrowser = (browser: string): void => {
+    this.activeBrowser = browser;
+    this.selectedTestId = this.getTestsByStoryIdAndBrowser(this.activeBrowser)[0]?.id ?? '';
+    this.changeTestListeners.forEach((x) => {
+      x(this.selectedTestId);
+    });
+  };
+
+  setSelectedTestId = (testId: string): void => {
+    this.selectedTestId = testId;
+    this.changeTestListeners.forEach((x) => {
+      x(this.selectedTestId);
+    });
+  };
+
+  getStoryTests = (storyId: string): TestData[] => {
+    return Object.values(this.status.tests)
+      .filter((result) => result?.storyId === storyId)
+      .filter(isDefined);
+  };
+
+  getBrowsers = (): string[] => {
+    return this.status.browsers;
+  };
+
+  getTestsByStoryIdAndBrowser = (browser: string): TestData[] => {
+    return Object.values(this.status.tests)
+      .filter((x) => x?.browser === browser && x.storyId === this.storyId)
+      .filter(isDefined);
+  };
+
+  getTabTitle = (browser: string): string => {
+    const tests = this.getTestsByStoryIdAndBrowser(browser);
+    const browserStatus = tests
+      .map((x) => x.status)
+      .reduce((oldStatus, newStatus) => calcStatus(oldStatus, newStatus), undefined);
+    const browserSkip = tests.length > 0 ? tests.every((x) => x.skip) : false;
+    const emojiStatus = getEmojiByTestStatus(browserStatus, browserSkip);
+    return `${emojiStatus ? `${emojiStatus} ` : ''}Creevey/${browser}`;
+  };
+
+  setPanelsTitle = (): void => {
+    const panels = this.storybookApi.getElements(Addon_TypesEnum.PANEL);
+    let firstPanelBrowser = this.activeBrowser;
+    for (const p in panels) {
+      const panel = panels[p];
+      if (panel.id?.indexOf(ADDON_ID) === 0 && panel.paramKey) {
+        panel.title = this.getTabTitle(panel.paramKey);
+        if (!firstPanelBrowser) firstPanelBrowser = panel.paramKey;
+      }
+    }
+    this.storybookApi.setSelectedPanel(`${ADDON_ID}/panel/${firstPanelBrowser}`);
+  };
+
+  addStatusesToSideBar(): void {
+    if (!Object.keys(this.stories).length) return;
+
+    const stories = this.stories;
+    Object.keys(this.stories).forEach((storyId) => {
+      const storyStatus = this.getStoryTests(storyId);
+      const status = storyStatus
+        .map((x) => x.status)
+        .reduce((oldStatus, newStatus) => calcStatus(oldStatus, newStatus), undefined);
+      const skip = storyStatus.length > 0 ? storyStatus.every((x) => x.skip) : false;
+      this.stories[storyId].name = this.addStatusToStoryName(stories[storyId].name, status, skip);
+    });
+
+    // TODO Check setStories method in 6.x and migrate properly
+    this.storybookApi.emit(SET_STORIES, this.stories);
+  }
+
+  addStatusToStoryName(name: string, status: TestStatus | undefined, skip: string | boolean): string {
+    name = name.replace(/^(❌|✔|🟡|🕗|⏸) /, '');
+    const emojiStatus = getEmojiByTestStatus(status, skip);
+    return `${emojiStatus ? `${emojiStatus} ` : ''} ${name}`;
+  }
+}

package/src/client/addon/decorator.ts

@@ -0,0 +1,3 @@
+import { withCreevey } from './withCreevey.js';
+
+export const decorators = [withCreevey()];

package/src/client/addon/index.ts

@@ -0,0 +1,2 @@
+export * from './withCreevey.js';
+export * from './readyForCapture.js';

package/src/client/addon/manager.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { API } from '@storybook/api';
+import { addons, types } from '@storybook/manager-api';
+import { Addon } from './components/Addon.js';
+import { Tools } from './components/Tools.js';
+import { CreeveyController, ADDON_ID } from './controller.js';
+
+// TODO Take api from `import { useGlobals, useStorybookApi } from '@storybook/manager-api';`
+addons.register(ADDON_ID, (api) => {
+  void registerCreeveyPanels(api);
+});
+
+async function registerCreeveyPanels(storybookApi: API): Promise<void> {
+  const controller = new CreeveyController(storybookApi);
+
+  addons.add(`${ADDON_ID}/panel/run`, {
+    title: `Creevey/Run`,
+    match: ({ viewMode }) => !!(viewMode && /^story$/.exec(viewMode)),
+    type: types.TOOL,
+
+    render: () => React.createElement(Tools, { controller }),
+  });
+  await controller.initAll();
+  const browsers = controller.getBrowsers();
+
+  browsers.forEach((browser) => {
+    const panelId = `${ADDON_ID}/panel/${browser}`;
+    const title = controller.getTabTitle(browser);
+    addons.add(panelId, {
+      title,
+      type: types.PANEL,
+      paramKey: browser,
+
+      // NOTE key = PANEL_ID needs to correct render button in addons panel
+
+      render: ({ active }) =>
+        React.createElement(Addon, {
+          active,
+          controller,
+          browser,
+        }),
+    });
+  });
+}

package/{lib/esm/client/addon/preset.js → src/client/addon/preset.ts}

@@ -1,2 +1,3 @@
 export const previewAnnotations = [require.resolve('./preview')];
-export const managerEntries = [require.resolve('./register')];
+
+export const managerEntries = [require.resolve('./manager')];

package/src/client/addon/preview.ts

@@ -0,0 +1,7 @@
+import { withCreevey } from './withCreevey.js';
+
+const preview = {
+  decorators: [withCreevey()],
+};
+
+export default preview;

package/src/client/addon/readyForCapture.ts

@@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
+  }
+}
+
+export function readyForCapture(): void {
+  window.__CREEVEY_SET_READY_FOR_CAPTURE__?.();
+}

package/src/client/addon/utils.tsx

@@ -0,0 +1,24 @@
+import { TestStatus } from '../../types.js';
+
+export function getEmojiByTestStatus(status: TestStatus | undefined, skip: string | boolean = false): string {
+  switch (status) {
+    case 'failed': {
+      return '❌';
+    }
+    case 'success': {
+      return '✔';
+    }
+    case 'running': {
+      return '🟡';
+    }
+    case 'pending': {
+      return '🕗';
+    }
+    default: {
+      if (skip) return '⏸';
+      return '';
+    }
+  }
+}
+
+export const isInternetExplorer = navigator.userAgent.includes('Trident/');

package/src/client/addon/withCreevey.ts

@@ -0,0 +1,326 @@
+import * as Events from '@storybook/core-events';
+import type { PreviewWeb } from '@storybook/preview-web';
+import type { AnyFramework, StoryContextForEnhancers } from '@storybook/csf';
+import type { StoryStore } from '@storybook/client-api';
+import { makeDecorator } from '@storybook/preview-api';
+import { Channel } from '@storybook/channels';
+import { CaptureOptions, CreeveyStoryParams, isObject, noop, StoriesRaw, StorybookGlobals } from '../../types.js';
+import { serializeRawStories } from '../../shared/index.js';
+import { getConnectionUrl } from '../shared/helpers.js';
+
+declare global {
+  interface Window {
+    __CREEVEY_SERVER_HOST__: string;
+    __CREEVEY_SERVER_PORT__: number;
+    __CREEVEY_WORKER_ID__: number;
+    __CREEVEY_GET_STORIES__: () => Promise<StoriesRaw | undefined>;
+    __CREEVEY_SELECT_STORY__: (
+      storyId: string,
+      shouldWaitForReady: boolean,
+      callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
+    ) => Promise<void>;
+    __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
+    __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
+    __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
+    __CREEVEY_HAS_PLAY_COMPLETED_YET__: (callback: (isPlayCompleted: boolean) => void) => void;
+    __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
+    __STORYBOOK_ADDONS_CHANNEL__: Channel;
+    __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
+    __STORYBOOK_PREVIEW__: PreviewWeb<AnyFramework>;
+  }
+}
+
+interface CreeveyTestsState {
+  setStoriesCounter?: number;
+  creeveyHost?: string;
+  creeveyPort?: number;
+  isTestBrowser?: boolean;
+}
+
+const disableAnimationsStyles = `
+*,
+*:hover,
+*::before,
+*::after {
+  animation-delay: -0.0001ms !important;
+  animation-duration: 0s !important;
+  animation-play-state: paused !important;
+  cursor: none !important;
+  caret-color: transparent !important;
+  transition: 0s !important;
+}
+`;
+
+function catchRenderError(channel: Channel): Promise<void> & { cancel: () => void } {
+  let rejectCallback: (reason?: unknown) => void;
+  const promise = new Promise<void>((_resolve, reject) => (rejectCallback = reject));
+
+  function errorHandler({ title, description }: { title: string; description: string }): void {
+    rejectCallback({
+      message: title,
+      stack: description,
+    });
+  }
+  function exceptionHandler(exception: Error): void {
+    rejectCallback(exception);
+  }
+  function removeHandlers(): void {
+    channel.off(Events.STORY_ERRORED, errorHandler);
+    channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
+  }
+
+  channel.once(Events.STORY_ERRORED, errorHandler);
+  channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
+
+  return Object.assign(promise, { cancel: removeHandlers });
+}
+
+function waitForStoryRendered(channel: Channel): Promise<void> & { cancel: () => void } {
+  let resolveCallback: () => void;
+  const promise = new Promise<void>((resolve) => (resolveCallback = resolve));
+  function renderHandler(): void {
+    resolveCallback();
+  }
+  function removeHandlers(): void {
+    channel.off(Events.STORY_RENDERED, renderHandler);
+  }
+
+  channel.once(Events.STORY_RENDERED, renderHandler);
+
+  return Object.assign(promise, { cancel: removeHandlers });
+}
+
+function waitForFontsLoaded(): Promise<void> | void {
+  // TODO Use document.fonts.ready instead
+  const areFontsLoading = Array.from(document.fonts).some((font) => font.status == 'loading');
+
+  if (areFontsLoading) {
+    return new Promise((resolve) => {
+      const fontsLoadedHandler = (): void => {
+        document.fonts.removeEventListener('loadingdone', fontsLoadedHandler);
+        resolve();
+      };
+      document.fonts.addEventListener('loadingdone', fontsLoadedHandler);
+    });
+  }
+}
+
+function waitForCaptureCall(): Promise<void> {
+  return new Promise((resolve) => (captureResolver = resolve));
+}
+
+function initCreeveyState(): void {
+  const prevState = JSON.parse(window.localStorage.getItem('Creevey_Tests') ?? '{}') as CreeveyTestsState;
+
+  if (prevState.creeveyHost) window.__CREEVEY_SERVER_HOST__ = prevState.creeveyHost;
+  if (prevState.creeveyPort) window.__CREEVEY_SERVER_PORT__ = prevState.creeveyPort;
+  if (prevState.setStoriesCounter) setStoriesCounter = prevState.setStoriesCounter;
+  if (prevState.isTestBrowser) isTestBrowser = prevState.isTestBrowser;
+
+  window.addEventListener('beforeunload', () => {
+    window.localStorage.setItem(
+      'Creevey_Tests',
+      JSON.stringify({
+        creeveyHost: window.__CREEVEY_SERVER_HOST__,
+        creeveyPort: window.__CREEVEY_SERVER_PORT__,
+        setStoriesCounter,
+        isTestBrowser,
+      } as CreeveyTestsState),
+    );
+  });
+}
+
+let isTestBrowser = false;
+let captureResolver: () => void;
+let waitForCreevey: Promise<void>;
+let creeveyReady: () => void;
+let setStoriesCounter = 0;
+
+export function withCreevey(): ReturnType<typeof makeDecorator> {
+  const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
+
+  let isAnimationDisabled = false;
+
+  initCreeveyState();
+
+  function disableAnimation(): void {
+    isAnimationDisabled = true;
+    const style = document.createElement('style');
+    const textNode = document.createTextNode(disableAnimationsStyles);
+    style.setAttribute('type', 'text/css');
+    style.appendChild(textNode);
+    document.head.appendChild(style);
+  }
+
+  async function getStories(): Promise<StoriesRaw | undefined> {
+    const stories = serializeRawStories(await window.__STORYBOOK_PREVIEW__.extract());
+    const storiesByFiles = new Map<string, StoryContextForEnhancers[]>();
+    Object.values(stories).forEach((story) => {
+      const fileName = story.parameters.fileName as string;
+      const storiesFromFile = storiesByFiles.get(fileName);
+      if (storiesFromFile) storiesFromFile.push(story);
+      else storiesByFiles.set(fileName, [story]);
+    });
+    void fetch(`http://${getConnectionUrl()}/stories`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ setStoriesCounter, stories: [...storiesByFiles.entries()] }),
+    });
+    return stories;
+  }
+
+  // TODO Use Events.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
+  // TODO Check other statuses and statuses with play function
+  async function selectStory(
+    storyId: string,
+    shouldWaitForReady: boolean,
+    callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
+  ): Promise<void> {
+    const currentStory = window.__STORYBOOK_PREVIEW__.currentSelection?.storyId ?? '';
+
+    if (!isAnimationDisabled) disableAnimation();
+
+    isTestBrowser = true;
+    const channel = addonsChannel();
+    const waitForReady = shouldWaitForReady
+      ? new Promise<void>((resolve) => (window.__CREEVEY_SET_READY_FOR_CAPTURE__ = resolve))
+      : Promise.resolve();
+
+    let isCaptureCalled = false;
+    const renderPromise = waitForStoryRendered(channel);
+    const errorPromise = catchRenderError(channel);
+    const capturePromise = waitForCaptureCall().then(() => (isCaptureCalled = true));
+
+    setTimeout(() => {
+      if (storyId == currentStory) channel.emit(Events.FORCE_REMOUNT, { storyId });
+      else channel.emit(Events.SET_CURRENT_STORY, { storyId });
+    }, 0);
+
+    try {
+      await Promise.race([
+        (async () => {
+          await Promise.race([renderPromise, capturePromise]);
+          await waitForFontsLoaded();
+          await waitForReady;
+        })(),
+        errorPromise,
+      ]);
+      callback([null, isCaptureCalled]);
+    } catch (reason) {
+      // NOTE Event `STORY_THREW_EXCEPTION` triggered only in react and vue frameworks and return Error instance
+      // NOTE Event `STORY_ERRORED` return error-like object without `name` field
+      const errorMessage =
+        reason instanceof Error
+          ? (reason.stack ?? reason.message)
+          : isObject(reason)
+            ? `${reason.message as string}\n    ${reason.stack as string}`
+            : (reason as string);
+      callback([errorMessage]);
+    } finally {
+      renderPromise.cancel();
+      errorPromise.cancel();
+    }
+  }
+
+  function updateGlobals(globals: StorybookGlobals): void {
+    addonsChannel().emit(Events.UPDATE_GLOBALS, { globals });
+  }
+
+  function insertIgnoreStyles(ignoreSelectors: string[]): HTMLStyleElement {
+    const stylesElement = document.createElement('style');
+    stylesElement.setAttribute('type', 'text/css');
+    document.head.appendChild(stylesElement);
+    ignoreSelectors.forEach((selector) => {
+      stylesElement.innerHTML += `
+        ${selector} {
+          background: #000 !important;
+          box-shadow: none !important;
+          text-shadow: none !important;
+          outline: 0 !important;
+          color: rgba(0,0,0,0) !important;
+        }
+        ${selector} *, ${selector}::before, ${selector}::after {
+          visibility: hidden !important;
+        }
+      `;
+    });
+    return stylesElement;
+  }
+
+  function removeIgnoreStyles(ignoreStyles: HTMLStyleElement): void {
+    ignoreStyles.parentNode?.removeChild(ignoreStyles);
+  }
+
+  function hasPlayCompletedYet(callback: (isPlayCompleted: boolean) => void): void {
+    creeveyReady();
+    let isCaptureCalled = false;
+    let isPlayCompleted = false;
+
+    const channel = addonsChannel();
+    void waitForStoryRendered(channel).then(() => {
+      if (isCaptureCalled) return;
+      isPlayCompleted = true;
+      callback(true);
+    });
+    void waitForCaptureCall().then(() => {
+      if (isPlayCompleted) return;
+      isCaptureCalled = true;
+      callback(false);
+    });
+  }
+
+  window.__CREEVEY_GET_STORIES__ = getStories;
+  window.__CREEVEY_SELECT_STORY__ = selectStory;
+  window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;
+  window.__CREEVEY_INSERT_IGNORE_STYLES__ = insertIgnoreStyles;
+  window.__CREEVEY_REMOVE_IGNORE_STYLES__ = removeIgnoreStyles;
+  window.__CREEVEY_HAS_PLAY_COMPLETED_YET__ = hasPlayCompletedYet;
+  window.__CREEVEY_SET_READY_FOR_CAPTURE__ = noop;
+
+  return makeDecorator({
+    name: 'withCreevey',
+    parameterName: 'creevey',
+
+    wrapper: (getStory, context) => {
+      // TODO Define proper types, like captureElement is a promise
+      const { captureElement } = (context.parameters.creevey = (context.parameters.creevey ??
+        {}) as CreeveyStoryParams);
+      Object.defineProperty(context.parameters.creevey, 'captureElement', {
+        get() {
+          switch (true) {
+            case captureElement === undefined:
+              return Promise.resolve(context.canvasElement);
+            case captureElement === null:
+              return Promise.resolve(document.documentElement);
+            case typeof captureElement == 'string':
+              return Promise.resolve((context.canvasElement as Element).querySelector(captureElement));
+            case typeof captureElement == 'function':
+              // TODO Define type for it
+              return Promise.resolve(
+                (captureElement as unknown as (ctx: typeof context) => Promise<HTMLElement> | HTMLElement)(context),
+              );
+          }
+        },
+        enumerable: true,
+        configurable: true,
+      });
+
+      return getStory(context);
+    },
+  });
+}
+
+export async function capture(options?: CaptureOptions): Promise<void> {
+  if (!isTestBrowser) return;
+
+  captureResolver();
+  waitForCreevey = new Promise((resolve) => (creeveyReady = resolve));
+
+  await fetch(`http://${getConnectionUrl()}/capture`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ workerId: window.__CREEVEY_WORKER_ID__, options }),
+  });
+
+  await waitForCreevey;
+}