🏗✨✅ Introduce interactivity to visual diff tests (experimental)

[danielrozenberg]

Adds an interactive_tests field to the visual-tests JSON5 file.

The field is a file path to a JavaScript file that exports a dictionary of (async) test functions keyed by a short descriptive name.

Each test function is passed two arguments: a reference to the Puppeteer page, and the full name of the test (page name + test name). e.g., the JS file can be:

module.exports = {
  'tap red button': async (page, name) => {
    await page.tap('#red_button');
    await verifyCssElements(page, name, null, ['.red-loading'],
      ['.red-loaded']);
  },
  'tap red and blue button': async (page, name) => {
    await page.tap('#red_button');
    await page.tap('#blue_button');   
    await verifyCssElements(page, name, null,
      ['.red-loading', '.blue-loading'],
      ['.red-loaded', '.blue-loaded']);
  },
};

This PR also adds a single test as a proof-of-concept :)

[danielrozenberg]

/cc @newmuis - you might be interested in this

[newmuis]

I am indeed very interested in this.

[erwinmombay]

is the key here sort of just a description? it does nothing as far as execution correct?

[danielrozenberg]

It's a description, but it also sets the name of the snapshot in Percy - and that determines what snapshot any future PR will be compared against

e.g., in the example test that I added, I named the test tap "see more" button, and in Percy the name of the snapshot is AMP List and Mustache (tap "see more" button)
https://percy.io/ampproject/amphtml/builds/1137857

[erwinmombay]

whats the empty func for?

[danielrozenberg]

Makes sure each page has a "zero interactions" test as well (it's easier to add this empty function to the list of tests than it is to create a special case before the iterator later on)

[rsimha]

Excited to see this happen!