• Stars
    star
    155
  • Rank 235,975 (Top 5 %)
  • Language
    CSS
  • Created over 5 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Dark and Halloween color themes for Cypress.io test runner

cypress-dark ci status cypress version cypress-dark

Dark mode for Cypress test runner from user space

NPM

semantic-release standard renovate-app badge

Cypress dark

You can find videos from Cypress Dark test run on Cypress Dashboard

You can see this theme in action, including playing audio clips on failed test in this video from ReactiveConf around minute 22.

Install

Requires Node version 6 or above.

npm install --save-dev cypress-dark

Use

Install Halloween theme

Add to your cypress/support/index.js line

require('cypress-dark/src/halloween')

Install Dark theme

Add to your cypress/support/index.js line

require('cypress-dark')

By default dark theme will be loaded. If you want to switch to another theme, set its name in your cypress.json file.

{
  "theme": "dark"
}

If the theme name is unknown (look at CSS files in src folder), or unspecified, default dark theme will be used.

Themes

For now all themes are shipped with this package and can use CSS variables. Available themes are:

Dark page under test

You can "tell" the web application under test to switch to the dark mode using media (prefers-color-scheme: dark) if the application uses JavaScript media query to check for preferred scheme. See original issue #29 and cypress/fixtures/custom-dark.html page.

To enable stubbing window.matchMedia from your tests and "force" your app to switch to dark mode, set option in cypress.json

{
  "darkMediaQuery": true
}

Result - both the test runner and the application are running in dark mode.

Dark application

Small print

Author: Gleb Bahmutov <[email protected]> © 2018

"Maniacal Witches Laugh Sound" by Mike Koenig, under license Attribution 3.0

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github

MIT License

Copyright (c) 2018 Gleb Bahmutov <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

code-snippets

Chrome DevTools code snippets
JavaScript
1,798
star
2

start-server-and-test

Starts server, waits for URL, then runs test command; when the tests end, shuts down server
JavaScript
1,417
star
3

npm-install

GitHub Action for install npm dependencies with caching without any configuration
JavaScript
642
star
4

next-update

Tests if module's dependencies can be updated to latest version
JavaScript
558
star
5

bottle-service

Instant web applications restored from ServiceWorker cache
JavaScript
331
star
6

javascript-journey

Source code for blog post Journey from procedural to reactive JavaScript with stops
JavaScript
329
star
7

babel-service

On demand targeted transpiling inside the browser's ServiceWorker
JavaScript
209
star
8

dont-break

Checks if the current version of your package would break dependent projects
JavaScript
206
star
9

cy-api

Cypress custom command "cy.api" for end-to-end API testing
TypeScript
206
star
10

cypress-and-jest

Cypress and Jest both with code coverage running unit tests
JavaScript
205
star
11

express-service

Package ExpressJS server to run inside a ServiceWorker
JavaScript
203
star
12

cypress-failed-log

Saves the Cypress test command log as a JSON file if a test fails
JavaScript
179
star
13

snap-shot

Jest-like snapshot feature for the rest of us, works magically by finding the right caller function
JavaScript
171
star
14

pre-git

Automatically install pre-commit / pre-push hooks in your git repo
JavaScript
169
star
15

cypress-svelte-unit-test

Unit testing Svelte components in Cypress E2E test runner
JavaScript
160
star
16

cypress-angular-unit-test

Trying to load and bootstrap Angular component dynamically inside Cypress
TypeScript
157
star
17

snap-shot-it

Smarter snapshot utility for Mocha and BDD test runners + data-driven testing!
JavaScript
155
star
18

draw-cycle

Simple Cycle.js application visualized: streams, events, DOM
HTML
146
star
19

now-pipeline

Simple CI pipeline with goal to deploy new version at Zeit Now cloud if tests pass
JavaScript
143
star
20

console.table

Adds console.table method that prints an array of objects as a table in console
JavaScript
140
star
21

npm-quick-run

Quickly run NPM script by prefix without typing the full name
JavaScript
139
star
22

next-and-cypress-example

Next.js example instrumented for code coverage from Cypress tests
JavaScript
129
star
23

cypress-skip-and-only-ui

Client-side buttons to run a single test or skip it for Cypress test runner
TypeScript
128
star
24

cache-require-paths

Caches resolved paths in module require to avoid Node hunting for right module. Speeds up app load.
JavaScript
127
star
25

npm-module-checklist

Steps to check when starting, working and publishing a module to NPM
124
star
26

really-need

Node require wrapper with options for cache busting, pre- and post-processing
JavaScript
109
star
27

add-typescript-to-cypress

Quickly adds TypeScript spec support to Cypress
JavaScript
108
star
28

cypress-examples

Static site with Cypress examples tested right from the Markdown sources
JavaScript
105
star
29

cypress-select-tests

User space solution for picking Cypress tests to run
JavaScript
98
star
30

test-todomvc-using-app-actions

Example Cypress tests going from page objects to app actions
TypeScript
97
star
31

cypress-movie

Generate movies from your Cypress end-to-end tests
JavaScript
95
star
32

eslint-rules

My custom eslint rules in addition to the ones provided at http://eslint.org/
JavaScript
95
star
33

console-log-div

Clones console.log calls to a created div in the page. Great for demos and experiments.
JavaScript
94
star
34

rambo

Automatic Ramda solution bot
JavaScript
92
star
35

git-branches

Bash shell to show current branches and their descriptions using only default Git features
JavaScript
89
star
36

cypress-recurse

A way to re-run Cypress commands until a predicate function returns true
JavaScript
88
star
37

game-of-github

Play Game of Life in your GitHub contributions
JavaScript
83
star
38

have-it

The fastest NPM install does nothing because you already have it
JavaScript
75
star
39

node-rx-cycle

Example using RxJS and Cycle.js on the server to handle requests (NOT server-side rendering)
JavaScript
73
star
40

lazy-ass

Lazy node assertions without performance penalty
TypeScript
68
star
41

talks

Public presentations
JavaScript
67
star
42

node-hook

Run source transform function on node require call
JavaScript
66
star
43

as-a

Runs a given command with additional environment settings for simple local development
JavaScript
64
star
44

ban-sensitive-files

Checks filenames to be committed against a library of filename rules to prevent sensitive files in Git
JavaScript
62
star
45

cypress-split

Split Cypress specs across parallel CI machines for speed
JavaScript
59
star
46

js-complexity-viz

JavaScript source code complexity tool
JavaScript
58
star
47

changed-log

Returns all commit messages between 2 versions of an NPM module
JavaScript
58
star
48

cypress-network-idle

A little Cypress.io plugin for waiting for network to be idle before continuing with the test
JavaScript
55
star
49

rollem

Roll up multiple ES6 bundles at once
JavaScript
54
star
50

cypress-watch-and-reload

Reloads Cypress when one of the watched files changes
JavaScript
53
star
51

cypress-data-session

Cypress command for flexible test data setup
JavaScript
51
star
52

cypress-esbuild-preprocessor

Bundle Cypress specs using esbuild
JavaScript
48
star
53

functional-pipeline

Quickly chain method calls, property access and functions into a pipeline
JavaScript
48
star
54

cypress-if

Easy conditional if-else logic for your Cypress tests when there is no other way
JavaScript
46
star
55

demo-docker-cypress-included

Demo running the complete Docker image `cypress/included`
Shell
45
star
56

vue-vuex-todomvc

Example TodoMVC Vue.js app with Vuex store and server backend via REST
JavaScript
44
star
57

manpm

Shows the relevant part of NPM module's README file right in your terminal
JavaScript
42
star
58

mocked-env

Easy way to mock process.env during BDD testing
JavaScript
42
star
59

compiled

Compiles the ES* bundle to your NodeJS version on install
JavaScript
41
star
60

ng-simple-webrtc

AngularJS wrapper for SimpleWebRTC client from https://simplewebrtc.com/
JavaScript
41
star
61

cypress-playwright

Run Cypress tests using Playwright and Playwright tests using Cypress
JavaScript
41
star
62

next-updater

Dependable and safe automatic dependency updater for Nodejs packages
JavaScript
41
star
63

rocha

Runs Mocha unit tests but randomizes their order
JavaScript
40
star
64

node-mock-examples

Examples of tests that mock Node system APIs: fs, http, child_process, timers
JavaScript
39
star
65

generator-node-bahmutov

My personal Node project boilerplate generator
JavaScript
38
star
66

center-code

Shows the file's source centered in the terminal
JavaScript
38
star
67

bdd-stdin

Utility for easily feeding mock responses to unit tests that require command line input from the user
JavaScript
38
star
68

instant-vdom-todo

Prehydrated, self-rewriting TodoMVC using Virtual-Dom and bottle-service
JavaScript
37
star
69

hydrate-app

Quick app pre-loading using saved HTML snapshot
JavaScript
36
star
70

cypress-workshop-basics

Basics of end-to-end testing with Cypress.io test runner
JavaScript
35
star
71

iframe-api

Bidirectional method calls API between external and iframed code.
JavaScript
35
star
72

cly

A prototype of Cypress CLI for quicker project scaffolding
JavaScript
34
star
73

condition-circle

Checks CircleCI environment before publishing successful build using semantic-release
JavaScript
33
star
74

cy-spok

Playing with spok inside Cypress
JavaScript
33
star
75

cypress-extends

Cypress plugin that adds "extends" support to the configuration file
JavaScript
33
star
76

schema-shot

Framework-agnostic snapshot testing using "schema by example" for highly dynamic data
JavaScript
33
star
77

spots

Partial function argument binding with placeholders
JavaScript
33
star
78

change-by-example

Finds a function that transforms a given object into another given object.
JavaScript
33
star
79

cypress-repeat

Run Cypress multiple times in a row
JavaScript
32
star
80

grunty

Run any grunt plugin as NPM script without Gruntfile.js
JavaScript
31
star
81

cypress-gh-action-example

Example running Cypress tests inside GitHub Action
JavaScript
31
star
82

all-nvm

Run any NPM command (including install) in all versions of Node managed by NVM
JavaScript
30
star
83

ci-publish

Poor man's semantic release utility. Let the CI do the `npm publish` step after the build passes
JavaScript
30
star
84

find-cypress-specs

Find Cypress spec files using the config settings
JavaScript
29
star
85

prettier-config-example

Example project with different per-folder prettier config and VSCode formatting on save
JavaScript
28
star
86

next-ver

Tells you the next semantic version for your local package
JavaScript
28
star
87

xplain

JavaScript API documentation generator that uses unit tests as examples, see example API doc at
JavaScript
28
star
88

todo-graphql-example

Example Todo app on top of json-graphql-server
JavaScript
27
star
89

local-cypress

Use Cypress without global objects
JavaScript
27
star
90

comment-value

Instruments a Node program and updates its comments with computed expression values
JavaScript
27
star
91

d3-helpers

Little utility D3 functions
JavaScript
27
star
92

cypress-hyperapp-unit-test

Unit test Hyperapp components using Cypress
JavaScript
26
star
93

google-cloud-build-example

Example running Cypress end-to-end tests on Google Cloud Build
JavaScript
26
star
94

heroin

Strong and addictive dependency injection for JavaScript
JavaScript
25
star
95

ggit

Local git command wrappers
JavaScript
25
star
96

wiseli

See the repo's example while installing it with NPM
JavaScript
24
star
97

cypress-timings

A Cypress plugin for reporting individual command timings
JavaScript
24
star
98

term-to-html

Stream terminal output with ansi codes into nicely formatted HTML
JavaScript
24
star
99

cypress-angularjs-unit-test

Unit test Angularjs code using Cypress.io test runner
JavaScript
23
star
100

cypress-get-it

Get elements by data attribute by creating a Cy command on the fly
JavaScript
23
star