Cypress.io
Finally a real stable front-end testing framework
Lee Blazek
Today!
- About Me
- Who are you?
- End-to-end testing
-
- What is it?
- Current support
- What can it replace?
- Basic usage
- Alternates
- gotchas
- future features
- Demos
-
- cypress.io kitchensink
- other?
About Me
React, Angular, JS, Mean Stack, Front-end, Node api's, with a side of iOS
What other people say about me
- Jeeze... This guy is the Happy Gilmore of javascript + Web Development
What about you?
Automated testing a users actions in the browser. Usually connected to database, or mock DB. Some times stubbed api calls
- ME
End to End Testing
What is it?
Current Support
Most all testing frameworks
are selenium based:
- Protractor (JS on top)
- Nightmare (JS on top)
- Nightwatch (JS on top)
- RSpec (ruby on top)
- other?
In one way or another you can test
- Chrome
- Firefox
- IE
- Safari
- some times mobile devices
Cypress.io
Replace Other request libraries
- No more Selenium!!
- No more sleeps!!
- Interactive GUI for writing and debugging
- Time travel!!
- Cli for headless
- built in screen shots
- built in video
- Docker Image to help with CI/CD
Basic Usage
describe('My First Test', function() {
it('finds the content "type"', function() {
// Navigate browser to page
cy.visit('https://example.cypress.io')
cy.contains('about').click()
// NOTE: contains is for getting HTML element
// by the text inside it(all text!)
cy.contains('type').should('exist')
cy.contains('about').click()
// NOTE: get is to get elements by css
cy.get('h1').should('not.exist')
})
})Gotcha's
- Cookies are cleared between tests by default(but you can persist easily)
- Local and session storage are persisted by default(but you can clear easily)
- Can't Stub ES6 fetch out of the box, but there are work arounds
- Chrome and Electron Only
- No multi-window or tabs
- Still some selector issues but its 95% reliable, and consistent in errors
- https://docs.cypress.io/guides/references/trade-offs.html#Inside-the-browser
NOTE!!
When Running any E2E test suite don't reload the site in between in each unless you need too. I can double to quadruple your run times
Future Features
(don't try these at home kids)
- Workarounds for the lack of a cy.hover() command.
- There is no cy.tab() command.
- There is not any native or mobile events support.
- Testing file uploads is application specific.
- Testing file downloads is application specific.
- Iframe support is somewhat limited, but does work.
- There is no cross browser support other than Chrome and Electron.
- You cannot use cy.route() on window.fetch but there is a workaround. See the implementation in this recipe.
DEMO's
Lee Blazek
- www.berzek.io
- info@berzerk.io
- linkedin: www.linkedin.com/in/leeblazek
- https://github.com/berzerk-interactive
Cypress.io(2018)
By Lee Blazek
