Effective End-to-End Testing with

Gleb Bahmutov, PhD

VP of Engineering

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

EveryScape

virtual tours

MathWorks

MatLab on the web

Kensho

finance dashboards

11 people. Atlanta, Philly, Boston, LA

Fast, easy and reliable testing for anything that runs in a browser

Why is all software broken?

Will Klein

Quality software behaves the way users expect it to behave

We going to need some tests

E2E

integration

unit

Smallest pieces

Testing Pyramid △

Unit tests pass...

November 2015, AngularJS NYC meetup

Unit Testing AngularJS (ng-describe)

A picture of that meetup (things were very different back then)

E2E

integration

unit

Component

E2E

integration

unit

Website / API

E2E

integration

unit

Really important to users

Really important to developers

$ npm install -D cypress
it('opens the page', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .should('be.visible')
})
it('adds 2 todos', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  cy.get('.todo-list li')
    .should('have.length', 2)
})

Cypress demo

  • Opening a page
  • Typical test
  • Failing test
  • API and documentation
  • Recording tests
  • CI setup

Finger pointing

Point your tests at different url with "baseUrl"

Egghead.io Cypress Course

Free course (same author Andrew Van Slaars!)

Cypress documentation

(look behind you)

Adding Cypress to "ng" cli project

  • ng new ng-cy1
  • cd ng-cy1
  • add Cypress
  • starting server demo

Just use 

How does Cypress make 💵

Cypress Dashboard

See, share, and fix failing tests.

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

Sliding down the testing pyramid

E2E

integration

unit

Need:

  • real browser (DOM, storage, ...)
  • state cleanup between tests
  • stubbing server

E2E

integration

unit

Need:

  • real browser (DOM, storage, ...)
  • state cleanup between tests
  • stubbing server

WAIT A MINUTE!

Interact, inspect, use

$ npm install -D cypress cypress-angularjs-unit-test
import angular from 'angular'
angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
    $scope.greeting = 'Welcome!';
    $scope.version = angular.version.full
  });

AngularJS unit test demo with Cypress

app.js

import './app.js'
import {mount} from 'cypress-angularjs-unit-test'
beforeEach(() => {
  const template = `
    <div ng-controller="WelcomeController">
      {{greeting}}
    </div>`
  mount(template, ['demo'])
})
it('shows hello', () => {
  // "WelcomeController" should have replaced template
  // expression {{greeting}} with actual text
  cy.contains('div', 'Welcome!').should('be.visible')
})

AngularJS unit test demo with Cypress

spec.js

Angular + Cypress = Love

An Alternative to Protractor for Angular Projects

Summary

Summary

Thank you

Cypress at ngBoston

By Gleb Bahmutov

Cypress at ngBoston

Testing is hard. End-to-end testing is really hard. But maybe it is hard because our tools are not up to the task. What if we could redesign the testing experience from the ground up to be fast, useful and effective? In this presentation, I will show Cypress - an open source end-to-end test runner designed from scratch to be useful to developers. Come to learn how testing can be ... a pleasure. AngularBoston 2018, video at https://youtu.be/wQfS3mCDVO0

  • 2,716