Implement and Automate UI Testing for Frontend Pipeline

[Matthew-Grayson]

💡 Summary

Create and automate end-to-end test suites with a focus on UI/UX tests to ensure functionality across combinations of Crossfeed stage, user type, and browser. These tests might closely resemble user stories.
Examples:

• Assert that a newly registered Standard Admin is presented with a Terms of Use form.
• Assert that a Standard User's Crossfeed instance has a header with the following items only: Crossfeed, Overview, Inventory, Scans, and My Account.

Motivation and context

Automated UI testing would cover the majority of environments Crossfeed runs in. These tests would detect UI issues before merge and would ensure that UI changes are properly applied upon deployment to their respective environments.
Accounting for the following factors, there are dozens of combinations of user type/stage/browser for which to test functionality.

• Crossfeed has multiple user types with different levels of access (Global Admin, Standard User, etc.)
• Crossfeed has multiple implementations with unique environments (local, integration testing, staging, and production).
• Crossfeed is reasonably expected to display properly in major browsers (Chrome, Edge, Firefox, and Safari).

By not explicitly testing each combination, we risk not knowing that a UI issue exists until a user reports it.

Implementation notes

Playwright is a balanced option between feature set and ease of use. One useful feature is to generate test code by recording a developer's actions as they navigate a site.
Other options include Cyprus and Selenium.

Acceptance criteria

How do we know when this work is done?

• Install module that does end-to-end testing
• Create test suite for each user type
• Create tests for each page and/or component
• Enable tests to run for major browsers
• Integrate tests into CI/CD pipeline for DMZ
• Integrate tests into CI/CD pipeline for LZ

[Matthew-Grayson]

@JCantu248 Feel free to edit this issue. I've done shallow research into Playwright but you make a good case for Cypress.