{"library":"storycrawler","title":"Storycrawler","type":"library","description":"Storycrawler is a TypeScript-first utility library designed for creating tools to crawl and interact with Storybook instances using Puppeteer. It enables developers to automate tasks such as visual regression testing, accessibility audits, and data extraction from Storybook stories by providing a structured API to manage connections to Storybook, launch and control Puppeteer browser instances, and execute tasks against individual stories. The current stable version is 5.0.1. Development is active with frequent releases, often aligning with major Storybook and Node.js LTS updates. Its key differentiators include a specialized API for managing Storybook connections, handling multiple browser workers for parallel story processing, and providing utilities like `MetricsWatcher` to ensure UI stability before interaction or data extraction. This abstracts much of the complexity typically associated with direct Puppeteer usage in a Storybook environment, making it a robust choice for build-time Storybook automation.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install storycrawler"],"cli":null},"imports":["import { StorybookConnection } from 'storycrawler'","import { StoriesBrowser } from 'storycrawler'","import { createExecutionService } from 'storycrawler'","import { MetricsWatcher } from 'storycrawler'"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/reg-viz/storycap","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storycrawler","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import {\n  StorybookConnection,\n  StoriesBrowser,\n  StoryPreviewBrowser,\n  MetricsWatcher,\n  createExecutionService,\n} from 'storycrawler';\n\n(async function () {\n  // Connect to the target Storybook server.\n  const storybookUrl = 'https://storybookjs.netlify.app/vue-kitchen-sink';\n  const connection = await new StorybookConnection({ storybookUrl }).connect();\n\n  // Launch Puppeteer process to fetch stories info.\n  const storiesBrowser = await new StoriesBrowser(connection).boot();\n  // Item in stories has name, kind and id of the corresponding story\n  const stories = await storiesBrowser.getStories();\n\n  // Launce Puppeteer browsers to visit each story's preview window(iframe.html)\n  const workers = await Promise.all([0, 1, 2, 3].map(i => new StoryPreviewBrowser(connection, i).boot()));\n\n  try {\n    // `createExecutionService` creates a queue of the tasks for each story.\n    const service = createExecutionService(workers, stories, story => async worker => {\n      // Display story in the worker's preview window\n      await worker.setCurrentStory(story);\n\n      // Wait for UI framework updating DOM\n      await new MetricsWatcher(worker.page).waitForStable();\n\n      // Extract information from the preview window.\n      // You can access Puppeteer's page instance via `worker.page`.\n      const m = await worker.page.metrics();\n      return { story, nodesCount: m.Nodes };\n    });\n\n    // `createExecutionService` register tasks but does not kick them.\n    // Tasks in queue start via calling `.execute()`.\n    const results = await service.execute();\n\n    results.forEach(({ story, nodesCount }) => console.log(`${story.id}: ${nodesCount}`));\n  } finally {\n    await storiesBrowser.close();\n    await Promise.all(workers.map(worker => worker.close()));\n    await connection.disconnect();\n  }\n})();","lang":"typescript","description":"This example demonstrates how to connect to a Storybook instance, fetch its stories, launch multiple Puppeteer browser workers to process each story concurrently, wait for UI stability, and extract metrics like node count using the `storycrawler` API.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}