snapshots.js

const PercyScript = require("@percy/script");
const fs = require("fs");
const path = require("path");

const directories = [
  {
    type: "Element",
    path: path.resolve(__dirname, "src/components/elements")
  },
  {
    type: "Pattern",
    path: path.resolve(__dirname, "src/components/patterns")
  },
  {
    type: "Template",
    path: path.resolve(__dirname, "src/components/templates")
  }
];

PercyScript.run(async (page, percySnapshot) => {
  for (const directory of directories) {
    fs.readdir(directory.path, async function(err, components) {
      if (err) {
        // eslint-disable-next-line
        console.log("Unable to scan directory: " + err);
      }

      for (const component of components) {
        if (component.includes(".vue")) {
          const name = component.replace(".vue", "");

          await page.goto(
            `http://localhost:7070/#/Components/${directory.type}s/${name}`
          );
          // maybe consider a wait here to ensure the page is settled before snapshoting
          await percySnapshot(name);
        }
      }
    });
  }
});