Is it possible to increase the width of viewport in percy visual testing?

Question

I am trying to increase the size of viewport in Percy visual testing because it does not take the screenshot of the whole page. my window has a scroll on x Axis and Percy does not take the screenshot of the whole page.

Is it possible to do something like this?

page.viewport().width(1600);

Answer 1

Add a file .percy.yml with the following content:

version: 1
snapshot:
  widths: [1600]

Answer 2

You can see more how the viewport works on: https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagesetviewportviewport.

Anyway, here's a short code that might help

page.viewport({
  width: 1600,
});

or you can launch the browser with the view port width you want, it's normally what I do:

const browser = puppeteer.launch({
  defaultViewport: {
    width: 1600,
    height: 1000, // using as an example, set the height you need as well to avoid unexpected behavior
  },
});