Alternative themes for the Cypress Test Runner for Cypress v10+.
Currently supports dark-mode, light-mode and colorblind-mode.
Heavily inspired by cypress-dark and cypress-light-theme but all in one package.
Feel free to suggest/create additional themes. As the test runner changes over-time, the themes may break unexpectedly. For any issues please let us know. Thanks!
The three main types of color blindness are
- Deutan (red/green)
- Protan (red/green)
- Tritan (blue/green and yellow/red)
By replacing green with yellow, now the Cypress test results will show up as
- Yellow (passing)
- Red (failing)
- Blue (skipped)
This color combination addresses those with Deutan and Protan color-blindness. Those with sensitivity to red/yellow should keep the default Cypress test result colors.
If there is another case that isn't covered please let me know and I will add a theme for it.
npm install --save-dev cypress-runner-themesTo enable any of the themes, set the theme env var in your cypress.config.js file.
The acceptable theme values are dark, light, and colorblind.
"env": {
"theme": "dark",
}After, require the plugin in your support/e2e.js file
import "cypress-runner-themes";Finally, the next time you run a test the theme will be applied.
Unfortunately, there's no hook to inject the theme into the test runner without running a test first. Hoping that changes in the future.
For local development, install all dependencies (npm install) and change the getThemesFolder under src/utils to point toward the local css files.
const getThemesFolder = () => "src/themes"; // Enable for local developmentNext, change the theme env var within the cypress.config.js to whatever you are testing.
Finally, run the cypress test runner npm run cy:open.
- [ ] Apply theme on runner load, not before a test begins
- [ ] Support cypress-plugin-api
- [ ] Remove "Colorblind" as explicit theme and allow toggle ability within runner
- [ ] Migrate over the fun Halloween mode from cypress-dark