Installing Cypress

Setting up Cypress involves two different steps. First we need to install Cypress itself. Then, we need to install the Cypress-Rails gem to help us integrate Cypress into our system.

First, install Cypress as a package:

$ yarn add --dev cypress

Now we need to add two gems: the Cypress-Rails gem and the dotenv gem. The gems both go in the Gemfile in the development and test groups:

group :development, :test do
	# <existing gems...>
	gem "cypress-rails"
	gem "dotenv-rails"
end

The Cypress-Rails gem uses environment variables to manage some settings, so, to make our life a little easier, we’re going to add the dotenv gem. Do a bundle install, and we’re ready for the next step.

Now we need to initialize Cypress, which we do with a rake task created by the Cypress-Rails gem:

$ rake cypress:init

This gives us a cypress.json file with some default parameters that we’re not going to worry about yet.

Now we can see what all the fuss is about by running Cypress. The Cypress-Rails gem gives us a shortcut to opening the Cypress UI:

$ rake cypress:open

Note that if this is your first time running a new version of Cypress, Cypress will attempt to verify that the downloaded version is legit. On our machine, this sometimes leads to the open command failing with a timeout error. Rerunning rake cypress:open causes it to work normally.

If you don’t already have a cypress folder, which we do not at this point, Cypress will create a folder and populate it with a bunch of sample tests. It’s worth digging through those sample tests a bit, as they give examples of using Cypress to do various kinds of tests.

Cypress will also start its own UI, as shown in the following screenshot: