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
SME Javascript
Started development in 2003 ~ 17 years
Full-stack JS since 2013 ~ 7 years
Since Angular v 0.8
node 0.x
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?
General e2e best practices (speed + reliability)
- Don't reload page before every test("it" statement, ex. beforeEach()'s), this will triple or quadruple run times
- Don't abstract selectors do them in line(this introduces instability and inconsistency in tests)
- You're not writing production application code, only commands for the tests( which in turn go thru layers of selenium, chrome). Abstraction and code complexity cause problems in e2e tests
- Keep it simple and straight forward
- test speed/performance is proportional to app performance
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)
- Capybara(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 sleeps!!
- No more Selenium!!
- Interactive GUI for writing and debugging
- Time travel!!
- easy stubbing of requests!
- Cli for headless
- built in screen shots
- built in video
- Docker Image to help with CI/CD
Basic Usage
context('My First Test', function() {
it('should test stuff', function() {
// Navigate browser to page
cy.visit('https://example.cypress.io')
// by the text inside it(all text!)
cy.contains('about').click()
cy.contains('type').should('exist')
cy.contains('about').should('exist').click()
// get is to get elements by css selector
cy.get('h1').should('not.exist')
// get/contains will intelligently return single object or array when needed
cy.get('a').should('contain', 'about')
.and('contain', 'help')
.and('have.length', 2)
})
})/// <reference types="Cypress" />
import data from '../fixtures/data.json'
context('Assigned Rights', () => {
before(() => {
cy.server()
cy.route("GET", '/api/users/data', data)
cy.visit('/')
})
it('should open site', () => {
cy.location('href').should('contain', '#/profile')
})
it('should have Covering Rights section', ()=>{
cy.contains('name').should('exist')
cy.get('.row').should('have.length.greaterThan', 10)
})Stubbing with cy.route()
GUI
- time travel
- tests don't reload page(unless instructed)
- can choose which files(tests) to run
Headless
- no time travel
- tests reload page in in between
- runs all
Be Aware of:
- Capitalization of text vs CSS uppercase etc
- if using mock data make sure its there
- Keep it simple
- use the smallest css selector or tag, or cy.contains()
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
- 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
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, Electron, firefox(Beta), Edge(Beta).
- You cannot use cy.route() on window.fetch but there is a workaround. See the implementation in this recipe.
DEMO's
- Cypress-kitchen-sick GUI and headless
- reports
- screenshots and videos
BERZERK
seminars
conferences
training
consulting
projects
https://www.linkedin.com/company/berzerk-io/
https://www.facebook.com/berzerk.interactive/
LEE BLAZEK
SME Javascript, Angular, React, Vue, NodeJS, all things in the browser
End to End testing with Cypress.io(V3 - 2020)
By Lee Blazek
