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 cypressOr with yarn
yarn add --dev cypressAdd Cypress to your application
Add "cypress" script to package.json file
"scripts": {
"cypress": "cypress open"
}npm run cypress / yarn cypressScaffolding 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')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)
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!');End 2 End Testing with Cypress
By Nicolas Payot
