Test components with Cypress & Percy

[joshblack]

We would like to make use of Cypress & Percy to refactor our user-driven e2e tests into two buckets:

• User-driven e2e tests run through the browser with Cypress
• Visual Regression Testing using these user-driven scenarios powered by Percy Add Percy visual regression testing (VRT) snapshots for all components #8911

These tests should follow our testing guide

Prerequisites

• Enable the following ESLint plugins:
  • Add the eslint-plugin-jest package to our eslint config #9047
  • Add the eslint-plugin-testing-librarypackage to our eslint config #9048
  • https://www.npmjs.com/package/eslint-plugin-cypress
• Schedule a meeting with design and development to go over workflow and document in playbook
• Schedule a meeting with development to go over step-by-step refactor flow and document in this epic

Components

• Accordion
• Breadcrumb
• Button
• Checkbox
• Code Snippet
• Combobox
• Content Switcher
• Copy Button
• Data Table
• Date Picker
• Dropdown
• File Uploader
• Floating Menu
• Form
• Grid
• Inline Loading
• Link
• Listbox
• List
• Loading
• Menu
• Modal
• MultiSelect
• Notification
• Number Input
• Overflow Menu
• Pagination Nav
• Pagination
• Popover
• Progress Bar
• Progress Indicator
• Radio Button
• Search
• Select
• Skeleton
• Slider
• Structured List
• Tabs
• Tag
• Text Area
• Text Input
• Tile
• Time PIcker
• Toggle
• Toolbar
• Tooltip
• Tree View
• UI Shell

[joshblack]

Step by step guide

TODO

[tay1orjones]

Closing. We've migrated away from cypress to instead use playwright and added baseline VRT snapshots for all components in #11302