Alternative themes for the Cypress Test Runner
npm install cypress-runner-themesAlternative 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.
bash
npm install --save-dev cypress-runner-themes
`Use
To enable any of the themes, set the env var in your cypress.config.js file.The acceptable theme values are
dark, light, and colorblind.`json
"env": {
"theme": "dark",
}
`After, require the plugin in your
file`javascript
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.
Development
For local development, install all dependencies () and change the getThemesFolder under src/utils to point toward the local css files.`javascript
const getThemesFolder = () => "src/themes"; // Enable for local development
`Next, change the
env var within the cypress.config.js to whatever you are testing.Finally, run the cypress test runner
npm run cy:open`.