A small example of Percy & puppeteer

how-to-run.md

The quickest test suite to setup

Once you fill in the URLs you want to snapshot, you can run the visual tests by:

• Setting your PERCY_TOKEN to a project in https://percy.io
• Running npm run percy (or yarn percy)
• ??
• Get other work done (profit)!

That's about it :p

index.js

const PercySnapshot = require('./utils');

let pages = [
  {
    title: "Home",
    path: "",
    // can include:
    // - an array of widths (default: [1280, 375])
    // -`min-height`
    // - `enableJavaScript` (default false)
    snapshotOptions: {
      widths: [400]
    },
    interaction: async (page) => {
      // can be anything the puppeteer `page` class has
      // see:
      // https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page
      await page.waitFor(4000);
    }
  },
  {
    title: "Features",
    path: "features",
    interaction: async (page) => {
      // can be anything the puppeteer `page` class has
      // see:
      // https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page
      await page.waitFor(4000);
    }
  }
];

PercySnapshot('https://percy.io', pages)

package.json

{
  "name": "percy-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@percy/puppeteer": "^1.0.6"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "scripts": {
    "percy": "percy exec -- node ./index.js"
  }
}

utils.js

const puppeteer = require("puppeteer");
const { percySnapshot } = require("@percy/puppeteer");

async function Percy(rootUrl, pages) {
  const browser = await puppeteer.launch({
    headless: true,
    args: ["–no-sandbox", "–disable-setuid-sandbox", "--single-process"]
  });

  const page = await browser.newPage();

  const snapshots = pages.map(route => {
    return async () => {
      let url = `${rootUrl}/${route.path}`;
      console.log(`Taking snapshot of ${url} ...`);

      await page.goto(url);

      if (route.interaction) {
        await route.interaction(page);
      }

      await percySnapshot(page, route.title, route.snapshotOptions);
      console.log("Snapshot complete.");
    };
  });

  // Snapshot these pages sequentially
  await snapshots.reduce((p, fn) => p.then(fn), Promise.resolve());
  await browser.close();
}

module.exports = Percy;