Linkquest Screenshot

linkquest-screenshot is a plugin for Linkquest that can take various sizes of screenshots of each page that Linkquest visits.

Install

To install linkquest-screenshot you can use:

$ npm install linkquest-screenshot

Usage

To use linkquest-screenshot you must register it with linkquest like so:

const linkquest = new Linkquest('http://example.com/', { silent: true });

linkquest.register(require('linkquest-screenshot'), {
  // Defines the directory where the screenshots will be output to.
  output: screenshotsDir,
  // Defines a collection of sizes to screenshot.
  sizes: {
    // Describes the device type the screenshots are intended for.
    mobile: {
      // Describes the device and the width x height of the device screen in pixels.
      pixel: [411, 731],
      iphone: [375, 812]
    },
    tablet: {
      ipad: [768, 1024],
      galaxy: [360, 640]
    },
    desktop: {
      hdr: [1920, 1080]
    }
  }
});

await linkquest.start();

You can see that linkquest's register method takes the plugin as the first parameter and then the plugin's options as the second parameter.

This will crawl the page and save the output to the current working directory. If you want to instead crawl the whole host, you want to use:

Options

The options that can be passed to linkquest-screenshot are as follows:

| param | type | description | default | |--------------------------------- |-------- |--------------------------------------------------------------------------------------------- |---------------- | | options | Object | | | | options.output | string | Where should the outputted screenshots be saved to. | proccess.cwd() | | options.sizes | Object | The sizes for the screenshots to generate. | {} | | options.sizes.deviceType | Object | Describes the device type the screenshots are intended for. | {} | | options.sizes.deviceType.device | Object | Describes the device and the width x height of the device screen in pixels. | {} |

Example:

This example explains the code shown in the usage above.

Going through this line by line:

Line 1: Of course to be able to use the plugin, we need to require the base Linkquest module and we're just passing the silent = false flag to it to hide output.

Line 3: Here we use the register method of Linkquest to add a reference to our plugin, and then as the second parameter we pass an Object of options for the plugin.

Line 4: One of the options for this plugin is output which specifies the directory that the screenshots will be stored in. If the directory does not yet exist, then it will be created. By default this plugin will use process.cwd() as the default directory for storing screenshots.

Line 5-17: Here we are specifying 3 device types: mobile, tablet, and desktop. Under each device type we are specifying one or two devices for each one with the first index of the array being the width and the second being the height. You'll notice that the second index of the hdr array is '*' which tells the plugin that it should take a screenshot of the full height of the page.

const linkquest = new Linkquest('http://example.com/', { silent: true });

linkquest.register(require('../build/index'), {
  output: screenshotsDir,
  sizes: {
    mobile: {
      pixel: [411, 731],
      iphone: [375, 812]
    },
    tablet: {
      ipad: [768, 1024],
      galaxy: [360, 640]
    },
    desktop: {
      hdr: [1920, '*']
    }
  }
});

await linkquest.start();

Tests

To run the available tests for linkquest-screenshot use:

npm run test

License

MIT