Gleb Bahmutov PRO
JavaScript ninja, image processing expert, software quality fanatic
Modern Integration Testing for JavaScript Applications
Dr Gleb Bahmutov PhD
VP of Eng Cypress.io
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
Testing is
a drag
Testing Pyramid
Unit tests pass...
We write more unit tests because our tools make it EASY
$ npm install -D jestconst add = require('./add')
describe('addition', () => {
it('adds numbers', () => {
expect(add(1, 2)).toBe(3)
})
})$ npm testHow test end to end
-
During a full moon sacrifice two goats
-
Install Selenium
-
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
Easy to debug when a test fails
$ npm install -D cypress
Tip: cache "node_modules" folder on CI
Let's test "TodoMVC"!
Is the app focused on "New Todo" input?
this looks close
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
Chai, Chai-jQuery, Sinon-Chai
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 ...
Failing Test
The first time one of your
tests fails in Cypress
will be one of your best days
as a developer
zero elements found
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
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
cy.viewport('iphone-6')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 runNeed 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();Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
.withTimeout(30, SECONDS)
.pollingEvery(5, SECONDS)
.ignoring(NoSuchElementException.class);Timeouts, timeouts everywhere!
Cypress
Test continues as soon as DOM updates
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
This week đŸ¤”
Giving Cypress Away
This week đŸ¤”
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
Thank you
$ npm install -D cypress
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
Loading comments...