element-screenshots-playwright

A package for taking screenshots of a specific element using playwright or puppeteer and merging them into a single image.

Installation

To install the package, you need to have node.js and npm installed on your machine. Once you have those, you can run the following command:

npm install element-screenshots

Once the package is installed, you can import it in your project and start using the functions.

Please note that this package has some peerDependencies, you need to have installed playwright or puppeteer.

Usage

import screenshotElement from 'element-screenshots';

const nrOfViewports = 3;
const element = await page.$('#your-element-selector');
const page = await browser.newPage();
await page.goto('https://your-url.com');
const path = 'path/to/output.png';
await screenshotElement(nrOfViewports, element, page, path);

The screenshotElement function takes four arguments:

nrOfViewports: The number of screenshots to be taken. The function will take screenshots of the element by scrolling through the page, one screenshot per viewport.
element: The element you want to take the screenshots from. It should be a valid element from the page object that you are working with.
page: The page object you are working with. This should be an instance of a page from a browser automation library like Playwright, Puppeteer, or Jest-Puppeteer.
path: The output file path. The path should be a valid file path where the image will be saved. The file format should be PNG.
The package also exports takeScreenshots and mergeImages functions, you can use them individually if you want to take the screenshots and merge them later.

The package assumes that you have the dependencies installed and configured, such as playwright, puppeteer or Jest-puppeteer and the target browser.

## API

### screenshotElement(nrOfViewports, element, page, path)

Takes screenshots of the element and merge it into a single image.

#### nrOfViewports

Type: `number`

The number of screenshots to be taken. The function will take screenshots of the element by scrolling through the page, one screenshot per viewport.

#### element

Type: `Object`

The element you want to take the screenshots from. It should be a valid element from the page object that you are working with.

#### page

Type: `Object`

The page object you are working with. This should be an instance of a page from a browser automation library like Playwright, Puppeteer, or Jest-Puppeteer.

#### path

Type: `string`

The output file path. The path should be a valid file path where the image will be saved. The file format should be PNG.

### takeScreenshots(nrOfViewports, element, page)

Takes screenshots of the element.

#### nrOfViewports

Type: `number`

The number of screenshots to be taken. The function will take screenshots of the element by scrolling through the page, one screenshot per viewport.

#### element

Type: `Object`

The element you want to take the screenshots from. It should be a valid element from the page object that you are working with.

#### page

Type: `Object`

The page object you are working with. This should be an instance of a page from a browser automation library like Playwright, Puppeteer