Skip to content

End to End Testing with Cypress.io

In the previous section, End to End testing was covered. E2E tests were run using Protractor, however this section will explore a simpler and more efficient way to test Angular applications. This is through the use of Cypress.io

What is Cypress.io?

Cypress is an End to End testing library that allows you to speed up the testing process of the user experience. It is a free and open source library whose mission is to, "make testing an enjoyable experience and generate developer happiness" (Cypress).

Reasons to adopt Cypress?

  • Cypress does not use Selenium
  • Cypress focuses on doing end-to-end testing really well
  • Cypress works on any front-end framework or website
  • Cypress tests are only written in JavaScript
  • Cypress is all in one.

Read up how Cypress is different.

Setup and Installation

To Install Cypress.io run either of the following commands:

npm install -D cypress

npm install cypress --save-dev

Opening Cypress

Once Cypress has been installed, it is now possible to open Cypress through one of the following ways:

  • Using the full path
  • ./node_modules/.bin/cypress open
  • Using the short cut npm bin
  • $(npm bin)/cypress open
  • Using npx NOTE: npx s included with npm > v5.2 or can be installled separetely
  • npx cypress open

It would also be a good idea to create a tsconfig file in order for the cypress intelligence to be brought up properly.

Functionality

Useful for jQuery Users

Querying elements is a useful functionality of Cypress.io. In Cypress, querying elements is the same:

cy.get('.my-selector')

Cypress allows you to work with complex HTML structures using the API you may already be familiar with:

// Each method is equivalent to its jQuery counterpart. Use what you know!

    cy.get('#main-content')
    .find('.article')
    .children('img[src^="/static"]')
    .first()

Additionally Cypress offers various bundled tools including:

  • Sinon, Underscore, jQuery, moment.js, minimatch.js, block.js, promises

For the best practices for selecting elements refer to the Cypress.io documentation here .

Next Steps

Now that general information on testing has been provided, the remainder of this documentation will now provide examples on how to test Angular's Tour of Heroes tutorial, as well as information on how to deploy an Angular application.