Skip to main content

Part 5: E2E Testing your code using Cypress

Installing Cypress​

  1. Install Cypress from npm npm install --save-dev cypress

Configuring Cypress​

We will keep the default configuration. However to ease the process of starting and running cypress tests, we will add some additional scripts to the package.json file. 2. Add the following scripts to the package.json.

package.json
{
  ...
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
    ...
  }
  ...
}

Starting Cypress​

to start cypress tests, run one of the following command in the terminal:

  • npx cypress open
  • ./node_modules/.bin/cypress open
  • npm run cy:open (recommended)

More information can be found in the opening the app docs on cypress.io

Write New Tests​

Follow the instructions to create your first test: Writing your first test

Following these instructions will create the cypress folder with the following subdirectories:

  • `cypress.json`` - all Cypress settings
  • `cypress/e2e`` - test files (specs)
  • `cypress/fixtures`` - mock data
  • `cypress/support`` - shared commands, utilities

We're only really interested in the cypress/e2e folder; that's where all tests would be. Let's create a new test file in that folder.

note

There should already be some sample test files in the folder, you may opt to leave those in as a reference.

Make sure you're running the application through some server.

  • build a test that types your name, selects a choice from the dropdown and then confirms that the history log generated contains the right number of tries and contains the right name.