Cypress support (basic)

[skitterm]

Issue: #AP-3733

What Changed

Adds support for Cypress at a very basic level:

• Automatic snapshots
• Manual snapshots

Chromatic options are theoretically supported but haven't been tested yet (can't skip snapshots yet)

Details

Because Cypress runs its tests in the browser, I'm using their built-in cy.intercept() mechanism to listen to network requests and thus archive resources.

We then pass these resources and snapshots to the server via a custom Cypress task, cy.archiveCypress().

After that, we do minimal massaging of data and then send it to be written from disk (at that point reusing existing Playwright-e2e code)

Limitations

Because we are likely to split out Cypress and Playwright implementations into separate NPM packages, I haven't worried about type correctness in the Cypress files yet, nor have I made great attempts to reuse code between Playwright and Cypress. I figure that could come in future PRs after we decide how to package these (so we don't cause disruptions for existing Playwright users).

Eventually we'll want cypress to be a peer dependency for the Cypress users (and we'll want to import Cypress typings), but I didn't want to put that as a peer dependency now since Playwright users certainly don't need Cypress.

How to test

I'm happy to pair on the below QA to save you time, if Cypress is new for you.

• Create a Cypress project
• Choose it to be an e2e project
• Write a test that visits a page
• Install the Chromatic e2e dependencies and set up the NPM scripts
• Follow the instructions for importing the needed e2e pieces into your Cypress project
• Run yarn cypress open, select the spec file where you have put your tests
• After the test runs, verify that a chromatic-archives folder has been created at the root of the project
• Run yarn build-archive-storybook and yarn archive-storybook
• Verify that a story is created that matches the UI of the Cypress spec

Manual snapshots

• In the above spec, add cy.takeChromaticArchive() to the spec
• After that command, do some action that changes the DOM (shows/hides something, opens a modal, etc)
• Run yarn cypress open, select the spec file where you have put your tests
• Run yarn build-archive-storybook and yarn archive-storybook
• Verify that multiple stories have been created, and that each matches the UI of the Cypress spec at that point in time

Playwright's still ok (no regressions)

• Open a project using our e2e Playwright setup

• Upgrade the @chromaui/test-archiver dependency to be this version

• Run a Playwright test with our e2e setup

• Verify that the test runs, the snapshot is taken, and the story looks as it should

• [x] Author QA

• [ ] Reviewer QA

Change Type

• [ ] maintenance
• [ ] documentation
• [x] patch
• [ ] minor
• [ ] major

📦 Published PR as canary version: 0.0.36--canary.29.32f3a0b.0

:sparkles: Test out this PR locally via: ```bash npm install @chromaui/test-archiver@0.0.36--canary.29.32f3a0b.0 # or yarn add @chromaui/test-archiver@0.0.36--canary.29.32f3a0b.0 ```

[skitterm]

@tevanoff @tmeasday this is ready for your re-review, and if one of you can QA that'd be great! (Happy to pair on the QA)

[thafryer]

:rocket: PR was released in v0.0.36 :rocket: