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