Puppeteer + Pixelmatch: Comparing screenshots in Mac and TravisCI Linux

Question

I'm trying to implement JS testing by loading pages and taking screenshots of the elements with puppeteer. So far so good, everything works perfectly in my local (after I fixed a snag between a normal screen an a retina display) but when I ran the same testing on TravisCI I got small text differences that I can't get around, anyone has any clue what is going on?

This is how I configure my browser instance:

browser = await puppeteer.launch(({
        headless: true,
        args :[
          '--hide-scrollbars',
          '--enable-font-antialiasing',
          '--force-device-scale-factor=1', '--high-dpi-support=1',
          '--no-sandbox', '--disable-setuid-sandbox', // Props for TravisCI
        ]
      }));

And here is how I compare the screenshots:

const compareScreenshots = (fileName) => {
  return new Promise((resolve) => {
    const base = fs.createReadStream(`${BASE_IMAGES_PATH}/${fileName}.png`).pipe(new PNG()).on('parsed', doneReading);
    const live = fs.createReadStream(`${WORKING_IMAGES_PATH}/${fileName}.png`).pipe(new PNG()).on('parsed', doneReading);

    let filesRead = 0;
    function doneReading() {
      // Wait until both files are read.
      if (++filesRead < 2) {
        return;
      }

      // Do the visual diff.
      const diff = new PNG({width: base.width, height: base.height});
      const mismatchedPixels = pixelmatch(
          base.data, live.data, diff.data, base.width, base.height,
          {threshold: 0.1});

        resolve({
          mismatchedPixels,
          diff,
        });
    }
  });
};

Here is an example of the diff that this is generating:

Answer 1

I had a similar problem. I put in a delay of 400ms before snapping the screenshot and it seems to have fixed the problem. If you come up with something better I'd love to know it.