Effective E2E Testing with Cypress

Dr Gleb Bahmutov PhD

VP of Eng Cypress.io

@bahmutov

glebbahmutov.com

github.com/bahmutov

slides.com/bahmutov

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional

https://glebbahmutov.com/blog/

Testing sucks

It is too hard

It takes too long

It is not that useful

Testing is

a drag

Testing Pyramid

We write more unit tests because our tools make it EASY

$ npm install -D jest

Great at testing

windshield wipers

Not so good at checking if a car can drive to Maine.

How test end to end

1. During a full moon sacrifice two goats

2. Install Selenium

3. Quickly write E2E tests and throw them into Selenium before it gets angry

E2E should be easy

• Easy to install

• Easy to write tests

• Simple to run

$ npm install -D cypress

https://github.com/bahmutov/effective-e2e-testing-with-cypress

$ $(npm bin)/cypress init
# or
$ $(npm bin)/cypress open

Let's test "TodoMVC"!

http://todomvc.com/

$ rm cypress/integration/example_spec.js

http://todomvc.com/examples/angular2/

$ rm cypress/integration/example_spec.js
$ touch cypress/integration/todo-spec.js
$ ls cypress
   integration/
     todo-spec.js
   fixtures/
     example.json
   support/
     commands.js
     index.js

it('opens todo app', () => {
  const url = 'http://todomvc.com/examples/angular2/'
  cy.visit(url)
})

Is the app focused on "New Todo" input?

https://docs.cypress.io

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

it('is focused on new item', () => {
  cy.visit(url)
  cy.focused()
})

it('is focused on new item', () => {
  cy.visit(url)
  cy.focused().should('have.class', 'new-todo')
})

it('is focused on new item', () => {
  cy.visit(url)
  cy.focused().should('have.class', 'new-todo')
})

Every command

outputs detailed info

in DevTools

describe('New Todo', () => {
  const url = '...'
  beforeEach(() => cy.visit(url))

  it('loads a page', () => {
    cy.contains('h1', 'todos')
  })

  it('adds 1 todo', () => {
    // test body
  })
})

Test organization

Spec files group tests

• add-todos-spec.js

• delete-todos-spec.js

• filtering-spec.js

Making Assertions

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

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Assertions​

https://on.cypress.io/assertions

Failing Test

The first time one of your

tests fails in Cypress

will be one of your best days

as a developer

const firstTodo = 'Learn Cypress'
it.only('adds 1 todo', () => {
  cy.get('#new-todo')
    .type(firstTodo)
    .type('{enter}')
  cy.get('.todo-list li')
    .first()
    .find('label').should('contain', firstTodo)
})

cy.get('.todo-list')
  .find('li')
  .first()
  .find('label').should('contain', firstTodo)

Get rid of compound selector

by splitting it into ".get(...).find(...)"

The ".todo-list" is missing

It should be "#todo-list"

Everything is fixed

cy.get('#todo-list')
  .find('li')
  .first()
  .type('foo')

Trying to type into a list item element

Cypress team

carefully hand crafts

each and every

error message

Giant API

https://on.cypress.io/api

80 commands + events + utilities (lodash, moment, jQuery) + assertions

Every command is described in excruciating detail

• Syntax
• Correct usage
• Incorrect usage
• Options
• What it logs
• Examples and best practices

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

cy.viewport('iphone-6')

Framework-specific Page Objects

import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}

http://www.protractortest.org/#/page-objects

Cypress

const getApp = () =>
  cy.get('app-root')

const getHeader = () =>
  getApp().find('h1')

it('has welcome text', () => {
  getHeader()
    .contains('Welcome to app')
})

https://docs.cypress.io/faq/questions/using-cypress-faq.html#Can-I-use-the-Page-Object-pattern

Cypress

// utils.js
export const getApp = () =>
  cy.get('app-root')

export const getHeader = () =>
  getApp().find('h1')

// spec.js
import {getHeader} from './utils'
it('has welcome text', () => {
  getHeader()
    .contains('Welcome to app')
})

Cypress also supports ES2015 out of the box. You can use either ES2015 modules or CommonJS modules. This means you can import or require both npm packages and local relative modules.

Test whatever you want

const url = 'http://todomvc.com/examples/vue/'
cy.visit(url)

cypress.json

https://www.cypress.io/blog/2017/05/30/cypress-and-immutable-deploys/

Need for Speed

Cypress is VERY FAST

Selenium

var webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'chrome' } };
var client = webdriverio.remote(options);
client
    .init()
    .url('https://duckduckgo.com/')
    .setValue('#search_form_input_homepage', 'WebdriverIO')
    .click('#search_button_homepage')
    .getTitle().then(function(title) {
        console.log('Title is: ' + title);
        // outputs:
        // "Title is: WebdriverIO (Software) at DuckDuckGo"
    })
    .end();

Cypress

Test continues as soon as DOM updates

const count$ = action$
  // delay events by 2 seconds
  .map(i => xs.fromPromise(by2seconds(i)))
  .flatten()
  .fold((x, y) => x + y, 0);

https://cycle-cypress-ntrpdvgjte.now.sh

beforeEach(() => {
  cy.visit('index.html')
})
it('starts with 0', () => {
  cy.contains('Counter: 0')
})

Cypress.io

https://glebbahmutov.com/blog/web-testing-nirvana-with-cypress/

https://youtu.be/04L9dpL6I7k

But wait, there is more ...

• Add your commands

• Server stubbing

• Screenshots and videos

• Chromium-based browsers

• Easy CI setup

Is there is a catch?

• Multi-browser support is coming

• Windows support is coming

• Plugin system is coming

https://on.cypress.io/roadmap

https://github.com/cypress-io/cypress

Cypress is free

https://www.cypress.io/blog/2017/05/04/cypress-is-going-open-source/

Cypress has been in a private beta since 2015, and we are nearing our public release! What’s that mean, anyway?

• Open Source All The Things!
• The Desktop Application will no longer require logging in.
• Anyone (everyone!) will be able to download and use the Desktop Application without contacting us first or signing up for anything.

Giving Cypress Away

Cypress Dashboard

See, share, and fix failing tests.

https://www.cypress.io/dashboard/

Cypress Dashboard

• Is a paid Saas complement to Cypress app
• Perfect place to store test results, screenshots and videos
• Helps find why and when a test started failing

Cypress Dashboard

• New sweet features:
  • Test load balancing
  • Visual and performance regressions
  • UI coverage and test analytics