capture-all

Flexible utility to get screenshots from Web pages

Install

$ npm i capture-all
# or
$ yarn add capture-all

Example

const { captureAll } = require('capture-all')
const fs = require('fs')

captureAll([
  {
    // Web page URL which will be captured
    url: 'https://www.google.com/',

    // Selector for capturing element
    target: 'body',

    // Selectors to hide from capture (add `visibility: hidden;` to the elements)
    hidden: ['#gb'],

    // Selectors to remove from capture (add `display: none;` to the elements)
    remove: ['#fbar'],

    // Delay (milliseconds) before taking screenshot
    delay: 3000,

    // Viewport size of a browser
    viewport: {
      width: 1024,
      height: 800
    }
  }
]).then(results => {
  results.forEach((result, i) => {
    fs.writeFileSync(`result-${i}.png`, result.image)
  })
})

Hooking Capturing Processing

You can define detailed behavior of the capturing processing with capture option. The capture option is an function receving Puppeteer's Page instance as the 1st argument and a capturing function as the 2nd argument. You have to call the 2nd argument function by your hand when you specify capture option.

const { captureAll } = require('capture-all')
const fs = require('fs')

captureAll([
  {
    url: 'https://www.google.com/',
    target: 'body',
    viewport: {
      width: 1024,
      height: 800
    },

    // Define the behavior around capturing
    capture: async (page, capture) => {
      // Click a button in the page by using Puppeteer API
      const button = await page.$('#some-button')
      await button.click()

      // Capture the page at this moment
      await capture()

      // Click the button again
      await button.click()

      // Capture the page again
      await capture()
    }
  }
]).then(results => {
  results.forEach((result, i) => {
    fs.writeFileSync(`result-${i}.png`, result.image)
  })
})

API

captureAll(targets: CaptureTarget[], options?: CaptureOptions): Promise<CaptureResult[]>

Capture screenshots of Web pages which specified by targets and return an array of CaptureResult object including captured image buffer.

CaptureTarget may have the following properties:

• url: Web page URL which will be captured (required)
• target: a selector for capturing element
• hidden: an array of selector to hide matched elements from captured image
• remove: an array of selector to remove matched elements from captured image
• disableCssAnimation: true if css animations / transitions are to be disabled. (default: true)
• delay: Delay (milliseconds) before taking screenshot
• viewport: viewport size of browser
• capture: You can hook the capturing processing by using this option. See Hooking Capturing Processing for details.

CaptureOptions may have the following properties:

• concurrency: a number of process which will be created for capture
• puppeteer: an object passed to puppeteer.launch

CaptureResult has the following properties:

• index: Index of capture results generated by the same CaptureTarget. The result can be more than one if you specify capture option.
• image: captured image buffer
• url: captured Web page URL
• target: a selector of captured element
• hidden: an array of selector which is hidden from captured image
• remove: an array of selector which is removed from captured image
• disableCssAnimation: true if css animations / transitions are to be disabled
• delay: Delay (milliseconds) before taking screenshot
• viewport: viewport size of browser

createCaptureStream(targets: CaptureTarget[], options?: CaptureOptions): ReadableStream<CaptureResult>

Similar to captureAll but returns readable stream of CaptureResult instead.

License

MIT