Modern Integration Testing for JavaScript Applications

Dr Gleb Bahmutov PhD

VP of Eng Cypress.io

https://brorlandi.github.io/StarWarsIntroCreator/#!/AKvZH0cnoiZCJIPh7Kz0

@bahmutov

@bahmutov

glebbahmutov.com

github.com/bahmutov

slides.com/bahmutov

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

EveryScape

virtual tours

MathWorks

MatLab on the web

Kensho

finance dashboards

Testing sucks

It is too hard

It takes too long

It is not that useful

@bahmutov

Testing is

a drag

@bahmutov

Testing Pyramid

@bahmutov

Unit tests pass...

https://twitter.com/kentcdodds/status/628658648001048577

@bahmutov

We write more unit tests because our tools make it EASY

@bahmutov

$ npm install -D jest
const add = require('./add')
describe('addition', () => {
  it('adds numbers', () => {
    expect(add(1, 2)).toBe(3)
  })
})
$ npm test

@bahmutov

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

@bahmutov

E2E should be easy

  • Easy to install

  • Easy to write tests

  • Simple to run

Easy to debug when a test fails

@bahmutov

$ npm install -D cypress

Tip: cache "node_modules" folder on CI

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

@bahmutov

Let's test "TodoMVC"!

http://todomvc.com/

@bahmutov

Is the app focused on "New Todo" input?

@bahmutov

https://docs.cypress.io

this looks close

@bahmutov

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

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

that's result of "cy.focused()"

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

I know exactly what happens

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

Every command

outputs detailed info

in DevTools

Making Assertions

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

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

Chai, Chai-jQuery, Sinon-Chai

@bahmutov

https://on.cypress.io/assertions

@bahmutov

Default Assertions

  • cy.visit() expects the page to send text/html content with a 200 status code
  • cy.get() expects the element to eventually exist in the DOM
  • .type() expects the element to eventually be in a typeable state

and many more ...

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

Failing Test

The first time one of your

tests fails in Cypress

will be one of your best days

as a developer

@bahmutov

zero elements found

@bahmutov

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

Trying to type into a list item element

@bahmutov

Cypress team

carefully hand crafts

each and every

error message

@bahmutov

Giant API

https://on.cypress.io/api

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

@bahmutov

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')

@bahmutov

Test whatever you want

const url = 'http://todomvc.com/examples/vue/'
cy.visit(url)
{
  "baseUrl: "http://todomvc.com/examples/aurelia/"
}
cy.visit('/')
cypress.json
$ export CYPRESS_baseUrl=http://todomvc.com/examples/typescript-react/
$ $(npm bin)/cypress run

@bahmutov

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

Need for Speed

@bahmutov

Cypress is VERY FAST

@bahmutov

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();
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
       .withTimeout(30, SECONDS)
       .pollingEvery(5, SECONDS)
       .ignoring(NoSuchElementException.class);

Timeouts, timeouts everywhere!

@bahmutov

Cypress

Test continues as soon as DOM updates

@bahmutov

But wait, there is more ...

  • Add your commands

  • Server stubbing

  • Screenshots and videos

  • Chromium-based browsers

  • Easy CI setup

@bahmutov

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

@bahmutov

This week đŸ¤”

Giving Cypress Away

@bahmutov

This week đŸ¤”

Cypress Dashboard

See, share, and fix failing tests.

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

@bahmutov

https://docs.cypress.io/dashboard/overview/features-dashboard.html

@bahmutov

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

@bahmutov

Thank you

slides.com/bahmutov/boston-js-testing

$ npm install -D cypress

@be_mann

@RandallKent

@chrisbreiding

@jennifershehane

@avanslaars

Modern Integration Testing for JavaScript Applications

By Gleb Bahmutov

Modern Integration Testing for JavaScript Applications

Unit testing is hard and time consuming; and worse - the users and the customers do not care! They only want the features working in the production system, everything else is development overhead. If this is the case, how do we improve the web application quality? How do we catch the bugs early? How can we test the deployed system effectively? And finally, how do we get rid of Selenium? This presentation tries to answer many of these questions in a web framework agnostic way. BostonJS meetup. Video at https://www.youtube.com/watch?v=D20nX2zAypk

  • 4,346

More from Gleb Bahmutov