Research Approach to Frontend Testing

[JoblersTune]

Context

We want to add some rudimentary end-to-end tests to the admin UI. Need to figure out the best framework and best practices, especially when it comes to

• Should we mock the backend
• Can we leverage any of the integration tests setup
• How best to handle Kratos and auth requirements

Todos

• [ ]

[JoblersTune]

After considering Selenium, Cypress, Playwright, Puppeteer, and TestCafe:
All are open source which is nice.
Selenium and TestCafe look a little more complicated to set up and perhaps harder to integrate with GitHub Actions.
While Cypress offers a free version the paid plan is very useful for accessing parallel testing, dashboard insights, and better support.

Playwright and Puppeteer seem like the strongest contenders. However I’m learning toward Playwright because:

• Playwright offers native support for multiple browsers: Chromium, Firefox, and WebKit.
• Playwright provides powerful features for network monitoring, such as intercepting network requests, responses.
• Has built-in support for running tests in parallel.
• Designed to handle flakiness in tests more effectively. It automatically waits for UI elements to be ready before performing actions, reducing the need for manual waits and sleep commands in test scripts. Making it a good choice for testing Rafiki Admin that relies on a lot of asynchronous communication.
• It supports single-page applications (SPAs), shadow DOM, useful for testing React/Remix applications.
• It seems to have good debugging tools including the ability to capture screenshots, generate a trace file, and logs.
• DevOps, setting up Playwright in your workflow should be straightforward. Should integrate seamlessly with GitHub Actions.
• Their docs seem useful

[JoblersTune]

Research phase is moving over to an implementation phase: see issue #2731