Cypress E2E Testing

​

https://www.cypress.io/

Steve Schwarz

@steveaschwarz

End to End Testing

“Testing as the user” using the UI/interface and the “real” stack of services.

Useful, but often slow, and difficult to generate errors

Cypress supports faster E2E and also “sliding down” the testing pyramid

Cypress gives devs access to all of the browser environment in which site/app runs.

Why I like Cypress

• Open source with paid premium service
• Tests run in browser/doesn’t use Selenium
• One step install: npm install -d cypress
• Fantastic documentation!
• Bundles: mocha/chai/sinon/lodash/moment/jQuery
• No “flake”. Automatically waits for DOM/XHR
• Graphical playback/debugging in browser
• Validate/stub network/XHR requests

Let’s Test!

We’ll use my Agility Course Master Ionic Hybrid Angular application (https://agilitycoursemaster.com) as our system under test.

1. Install Cypress
2. Start application under test
3. Create spec file(s)
4. Run Cypress
5. Select spec(s)
6. Tests re-run automatically as specs change

https://www.slideshare.net/backbonerails/cypress-best-practices

Trade Offs

​

https://docs.cypress.io/guides/references/trade-offs.html

• Cypress is not a general purpose automation tool.
• Cypress commands run inside of a browser.
• There will never be support for multiple browser tabs.
• You cannot use Cypress to drive two browsers at the same time.
• Each test is bound to a single origin.
• Currently, Chrome/Electron only, Firefox coming soon

​

​

More Cypress Presentations

https://slides.com/bahmutov/cypress-at-angularnyc#/

https://www.slideshare.net/backbonerails/cypress-best-practices

https://www.youtube.com/watch?v=5XQOK0v_YRE

https://www.youtube.com/watch?v=5FnalKRjpZk

​

Thanks!