What is Cypress?

Cypress is a testing app for web applications. It includes a cloud for recording test results for later review as to why a test failed.

How to set it up?

To install via npm, paste this into the terminal:

npm install cypress --save-dev

Using npm installation is the method recommended by the developers because Cypress is versioned like any other dependency and it simplifies running Cypress in Continuous Integration.

How do I use it?

Once installed, you can open the app from the terminal with a command.

npx cypress open

This opens a window that guides you through the rest of the set up to begin running tests. Supported libraries and frameworks include React, Angular, Vue, and Svelte.

You should see something similar to this. We will be clicking on the End to End (E2E) Testing. It will create a new folder in the project named cypress and download a few more files into it. After that completes, it should prompt you to choose a browser. Choose one, and it will open cypress in the chosen browser (I'll be using chrome for my examples).

Continue through the prompts to create a new spec file and then select the runs panel. From there, copy the command and run it from the terminal. You'll need another terminal as cypress is still running in the original one.

Once the terminal finishes, you'll see the recorded run in the browser.

Let's write up a test for it now. Dig into the cypress folder and open up the spec.cy.js file that we created in the last step. Replace the code in there with this:

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

Save it and the browser should reload to reflect the changes. Congrats on your first passing test!

We can make the test fail by changing what it expects to happen.

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(false)
  })
})

This will result in the test failing because true != false.

Okay but what about a real test...

A solid test generally covers 3 phases:

1. Set up the application state.
2. Take an action.
3. Make an assertion about the resulting application state.

You might also see this phrased as "Given, When, Then", or "Arrange, Act, Assert". But the idea is: First you put the application into a specific state, then you take some action in the application that causes it to change, and finally you check the resulting application state.

Paste this into the spec file over the previous code:

describe('My First Test', () => {
  it('clicking "type" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which
    // includes '/commands/actions'
    cy.url().should('include', '/commands/actions')
  })
})

This test simulates visiting a website and clicking on a link containint 'type', then verifies that the resulting page's url includes '/commands/actions'. This is true, thus the test passes.