Awesome

styleguidist-scrapper

This is a scrapper script targeting documentation generated by react-styleguidist.

It's main purpose is to generate metadata of documented examples which can be used to generate visual snapshot tests using jest, jest-image-snapshot and puppeteer.

API

scrape(styleguideUrl: string): Promise<Array<ExampleMetadata>>

Types

ExampleMetadata

type ExampleMetadata = {
  // component name
  component: string,
  // directory where it is located
  dir: string,
  // URL with isolated example
  url: string,
  // title for the example
  // assumed to be paragraph above the example
  title: string,
  // CSS selector for the example
  // useful for targeting screenshots
  selector: string,
}

Usage

const fs = require('fs')
const scrape = require('styleguidist-scrapper')

scrape('http://localhost:6060').then(examples => {
  fs.writeFile('./examples-metadata.json', JSON.stringify(examples), 'utf8')
})