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 topuppeteer.launch
CaptureResult
has the following properties:
-
index
: Index of capture results generated by the sameCaptureTarget
. The result can be more than one if you specifycapture
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