End 2 End Testing

with

OUTLINE

What's End 2 End Testing?
Introduction to Cypress
Getting started with Cypress
Cypress API

1. What's End 2 End Testing?

👉 Automatically test the whole application from start to finish

👉 Ensure that all integrated components function as expected

👉 Be confident in the code you ship in production

We want to avoid this... 👉

Or this... 👉

DOUBTING IS GREAT!

2. Introduction to Cypress

3. Getting started with Cypress

Installing Cypress

With npm

npm install --save-dev cypress

Or with yarn

yarn add --dev cypress

Add Cypress to your application

Add "cypress" script to package.json file

"scripts": {
  "cypress": "cypress open"
}

npm run cypress / yarn cypress

Scaffolding Cypress to the app

Update cypress.json configuration file

{
  "baseUrl": "http://127.0.0.1:8080",
  "ignoreTestFiles": "example_spec.js"
}

Start your app development server

(Cypress needs to connect to the URL of the app it will test)

Add test file and first test

Choose browser and Run All Tests

4. Cypress API

Testing API endpoints with cy.request

// execute HTTP GET request on `baseUrl` + '/movies'
cy.request('/movies')

// execute HTTP POST request on `baseUrl` + '/movies'
cy.request('POST', '/movies', newMovie)

// execute HTTP PUT request on `baseUrl` + '/movies/1'
cy.request('PUT', '/movies/1', newMovie)

// execute HTTP DELETE request on `baseUrl` + '/movies/1'
cy.request('DELETE', '/movies/1')

https://docs.cypress.io/api/commands/request.html

Assertions on requests responses

cy.request('/movies')
  .its('body')
  .should('have.length', 10);

// or with expect
cy.request('/movies')
  .its('body')
  .should(movies => {
    expect(movies.length).to.eq(10);
  });

Select DOM elements

cy.get('selector').find('selector')
cy.get('nav a').first()
cy.get('nav').children()
cy.get('nav').parents()
// ...

cy.get function takes a CSS selector as argument

(same as document.querySelector)

https://docs.cypress.io/api/commands/get.html

Interact with DOM elements

.type('something') // {enter}, {backspace}
.click()
.dblclick()
.check() / .uncheck()
.select()
.focus() / .blur()
// ...

These functions must be used on a DOM element

(Usually found with cy.get(selector))

Assertions on DOM elements

// example 2
cy.get('#header a')
  .should('have.class', 'active')
  .and('have.attr', 'href', '/users');

// example 1
cy.get('h1')
  .should('have.text', 'Hello, World!');