cypress-runner-themes: Alternative Styles for the Cypress Test Runner

#cypress #a11y #automation

Are you tired of the out-of-the-box Cypress Runner and want to shake things up? Now you can, with the brand-new cypress-runner-themes package.

Have no fear, this plugin will fill your empty testing void. It will make your testing experience more fun then ever. It will rejuvenate your career and bring you endless success. I’m pretty sure, it will save the world.

Here are some quotes from some cypress-runner-themes users.

With cypress-runner-themes, all my friends want to be me! — David Ingraham

cypress-runner-themes rocks! I can’t believe I got it for free! — David Ingraham

It didn’t fix any of my tests but the failures sure look nice! — David Ingraham

Ok, all of this is an over-exaggeration….but colors are fun, right?

For those familiar with previous theme solutions (cypress-dark/cypress-light-theme), the cypress-runner-themes plugin similarly allows users to change the style of the Cypress Test runner. While this plugin doesn’t introduce any new concepts, it combines several themes into one solution, adds colorblind support and works against the latest Cypress version (v14 as of writing this).

Currently, the plugin supports the following themes:

Dark
Light
Colorblind (red/green)

Implementation

To install the plugin simply run npm install --save-dev cypress-runner-themes in your CLI.

After, add the theme environment variable in your cypress.config.js file. The acceptable theme values are dark, light, and colorblind.

// cypress.config.js

"env": {
  "theme": "dark",
}

Finally, require the plugin in your support/e2e.js file.

// e2e.js
import "cypress-runner-themes";

That’s it!

Next time you run a test the theme will be applied to your test runner.

If you only want to apply a theme locally without impacting other users in your organization, you can uniquely set the theme variable through either a command-line variable or by importing the unique value from a local .env file.

Command Line:

npx cypress open --env theme=dark

Using dotenv in your cypress.config.js file:

const { defineConfig } = require('cypress')
require('dotenv').config({ path: '../.env' })

module.exports = defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
        },
    },
    env: {
        // MY_THEME is set in your local`.env` file
        theme: process.env.MY_THEME, 
    },
})