How to perform static + interaction snapshots

[IanVS]

So far I've been using just percy snapshot dist to capture snapshots of each of my static pages. However, I'd also now like to add a snapshot after clicking a button. I see that I can use an execute function in a .js file, and I've mostly gotten that part working actually, but how can I combine the two? I don't want to list out all the urls manually in my .js file, and if I run two percy snapshot commands, then two separate builds occur.

[Robdel12]

Hey @IanVS! You can use the overrides config option to pick the paths you want to add interaction with: https://docs.percy.io/docs/cli-snapshot#static-options

For example:

# .percy.yml
version: 2
static:
  overrides:
  - include: /foo-bar.html
    waitForSelector: .is-ready
    execute: |
      document.querySelector('.button').click()

[IanVS]

Thanks! I'd much prefer writing actual functions rather than strings in yml. I think I found a way to kind of replicate what I get from the static mode, by crawling the filesystem myself and creating an array of {name, url} objects that I can spread into my js file:

const fs = require("fs");
const path = require("path");

const findFiles = (dir, ext, files, result, regex) => {
  files = files || fs.readdirSync(dir);
  result = result || [];
  regex = regex || new RegExp(`\\${ext}$`);

  for (let i = 0; i < files.length; i++) {
    let file = path.join(dir, files[i]);
    if (fs.statSync(file).isDirectory() && !path.extname(file)) {
      try {
        result = findFiles(file, ext, fs.readdirSync(file), result, regex);
      } catch (error) {
        continue;
      }
    } else {
      if (regex.test(file)) {
        result.push(file);
      }
    }
  }
  return result;
};

function findPages(dir) {
  return findFiles(dir, ".html").map((file) => file.replace(dir, ""));
}

const staticPages = findPages(path.resolve(__dirname, "../../dist")).map((page) => ({
  name: page,
  url: `${process.env.DEPLOY_URL}/${page}`,
}));

module.exports = [
  ...staticPages,
  {
     ...interactive test
  },
};

[Robdel12]

No problem! Sorry, should have mentioned it can be any Percy config file -- which can also be JavaScript:

module.exports = {
  version: 2,
  static: {
    overrides: [
      {
        include: '/foo-bar.html',
        waitForSelector: '.selector',
        execute: function () {
          document.querySelector('.button').click();
        },
      },
    ],
  },
};