Chromatic options for Cypress

[skitterm]

Issue: #AP-3793

What Changed

• Passes Chromatic options (delay, diffThreshold, etc) from Cypress tests to Chromatic, to be used in the snapshot
• Allows for skipping a snapshot altogether with disableAutoCapture
• Gives a better cmd-line error if users forget to provide the ELECTRON_EXTRA_LAUNCH_ARGS env variable when using Electron.
• Adds (visual) tests that ensure that these properties are obeyed when passed. This covers things for Cypress but also gives option-passing coverage for Playwright as well.

Passing Chromatic options

To use these values in Cypress, you can apply at a global level:

// cypress.config.ts
export default defineConfig({
  env: {
    diffThreshold: 0.58
  },
  e2e: {
    setupNodeEvents(on, config) {
      installPlugin(on);
    },
  },
});

or at a test-specific level:

// some-test.cy.ts
it('A test that does something', { env: { diffThreshold: 1 } }, () => {
  cy.visit('https://some-url.com');
});

Limitations

We still can't do external domain archiving at a test-specific level in Cypress yet, since we're using one watcher for all the tests (global-config for external domain archiving should work fine). I'll tackle that work in a follow-up PR.

How to test

• Verify that the UI Tests look as they should for the added stories (handles most of the Chromatic options)

• Locally, add disableAutoCapture: true to the env object in the cypress.config.ts file config object.

• Run yarn build && yarn test:cypress

• Verify that no stories are created (e.g. running yarn archive-storybook:cypress should throw an error that there are no files in the downloads folder)

• In a single Cypress test, set disableAutoCapture: false

• Run yarn build && yarn test:cypress

• Run yarn archive-storybook:cypress

• Verify that only this story is captured

• Add diffIncludeAntiAliasing option to a single test

• Run yarn build && yarn test:cypress

• Verify that this value is found in the generated stories file

• [x] Author QA