snapshots: Does waitForSelector happen after the JS in execute()?

[thecristen]

Hi! Thanks for the great service, but I'm trying to keep up here and I have a question.
I have a snapshot configured as follows:

{
  name: ...,
  url: ...,
  execute() {
      // open each of the collapsed results
      const accordions = document.querySelectorAll('.c-accordion-ui__trigger')
      for (const a of accordions) { a.click(); }
  },
  waitForSelector: ".customClass"
}

How my page works is that, after one of those collapsed elements are clicked, it triggers a chain of events that eventually results in a customClass class name being added to a DOM element. I'd like to wait for that before I take the snapshot.

When I run @percy/cli to take snapshot it reports an error that it failed to find .customClass.

I'm curious as to whether this should work as described, or if this is user error or what.

[Robdel12]

Hey @thecristen! We haven't documented this yet (it's quite new and we've been occupied with a couple networking bugs since #513). We pass a waitFor function to execute, so you can make sure the page state is what you'd expect before executing your JavaScript. For example:

module.exports = async () => {
  return [
    {
      name: 'example 1',
      url: 'https://percy.io',
      execute: {
        async beforeResize({ waitFor }) {
          await waitFor(() => !!document.querySelector('.hero-main-image'), 5000);
        }
      }
    }
  ];
};

Or using your code:

[{
  name: '...',
  url: '...',
  async execute({ waitFor }) {
      // open each of the collapsed results
      await waitFor(() => !!document.querySelector('.customClass'), 5000);
      const accordions = document.querySelectorAll('.c-accordion-ui__trigger')
      for (const a of accordions) { a.click(); }
  },
}]

[wwilsman]

I wanted to add an explanation here for what @thecristen is seeing. the execute function is synonymous with execute.beforeSnapshot, which will be executed just before the snapshot is taken. The waitForSelector option will wait for a selector before execute.beforeSnapshot is called.

It looks like @thecristen wants to wait for an element after execute.beforeSnapshot. Since we can't possibly cover all "wait for" scenarios, a helper is provided to execute functions for this exact reason. Although what @thecristen is looking for would probably be using waitFor after clicking the accordions:

async execute({ waitFor }) {
  const accordions = document.querySelectorAll('.c-accordion-ui__trigger');
  for (const a of accordions) a.click();

  // wait for any .customClass element to appear within 5000ms
  await waitFor(() => !!document.querySelector('.customClass'), 5000);
}