[Cypress] Get started with Cypress

Adding Cypress to a project is a simple npm install away. We won’t need any global dependencies beyond node and npm to get started with Cypress. In this lesson we’ll look at our existing application, add Cypress as a dev dependency with npm and fire it up for the first time to have a look around.

Github

Install:

npm i -D cypress

Open cypress:

node_modules/.bin/cpress open

In order to test our application, Cypress will need to visit it in the browser. In this lesson we’ll see how we can visit our application with Cypress and how to configure a baseUrl for Cypress to make that even easier.

Open cypress.json:

{
  "baseUrl": "http://localhost:3030"
}

This tells the root url for the application.

Create a new spec file in cypress/integration/form-input.spec.js:

describe('Form input', () => {
  it('should visit the app', () => {
       cy.visit('/') ; // Visit he root page which has been config in the cypress.json baseUrl
  })
})

Create a npm script for running cypress:

"cypress": "cypress open"

The Cypress UI is a great way to work through individual tests and while TDD-ing new features, but it isn’t ideal for running large test suites or for running on a CI server. In this lesson, we’ll add an npm script to run all of our tests without the UI and look at the results of a full test run.

"cypress:all": "cypress run"