Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including cypress-app-watcher-preprocessor with all npm packages installed. Try it out:

var cypressAppWatcherPreprocessor = require("cypress-app-watcher-preprocessor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

cypress-app-watcher-preprocessor v1.1.2

Rerun your cypress tests when your app restarts

This small package allows you a super-fast test-driven workflow.

Show case

Demonstration

Take notice - the tests automatically rerun when I first save changes on the frontend, and then again when I save changes in the backend.

App Side

First, install it:

npm install --save-dev cypress-app-watcher-preprocessor

Let's say in your package.json you have a start script that looks like this:

{
    "start": "nodemon ."
}

Leave it be, and create a new one, for cypress, relating to the existing one:

{
    "start": "nodemon .",
    "startWithCypress": "WAIT_FOR_MESSAGE='backend is running on port' cypressAppWatcher npm run start"
}

To do so, you have to figure out what your application spits out when it is ready after a restart, and put it inside WAIT_FOR_MESSAGE env variable. It can be just part of the line - in this case, no matter what port it starts at and reports, cypress watcher will catch it and send a message to cypress to rerun tests.

If your app is in two-part (as it usually is - frontend + backend), you can use watcher in both places, and cypress will rerun tests whenever you change either one of them.

Cypress Side

Find your cypress/plugins/index.js file and change it to look like so:

const watchApp = require("cypress-app-watcher-preprocessor");
module.exports = (on, config) => {
  on("file:preprocessor", watchApp());
};

If you already use a preprocessor, no worries! You can combine them together like so:

const cucumber = require("cypress-cucumber-preprocessor").default;
const watchApp = require("cypress-app-watcher-preprocessor");
module.exports = (on, config) => {
  on("file:preprocessor", watchApp(cucumber()));
};
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free