Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cypress: The future of E2E testing

7764379521726735c164889159c8f387?s=47 Dominic Elm
December 07, 2018

Cypress: The future of E2E testing

When we talk about UI tests, the first thing that comes to mind is probably Selenium. No wonder, it's the most widely used testing framework for web applications. It was originally developed in 2004 and now, after 14 years, it is still hard to implement it correctly. Tests are often flaky, painful to debug, and the overall developer experience is rather poor. But for many years there wasn't another choice, until Cypress was born. Cypress tries to solve the biggest testing challenges, e.g. painless setup, easy to write tests, support for async testing, performance, and a good understanding of why tests fail. Cypress is made from scratch focusing on developer experience, debugability and consistency.

In this talk, we will learn about Cypress and see what makes it so outstanding and reliable. For that, we will compare Cypress with Selenium and see how they are different from one another. In addition, we learn how to write some basic tests, see how easy it is to spy on HTTP requests, use the local storage, and explore its debugging capabilities along the way.

Are you ready? Buckle up, this will be a fun.

Links:
https://github.com/d3lm/todomvc

7764379521726735c164889159c8f387?s=128

Dominic Elm

December 07, 2018
Tweet

Transcript

  1. : The future of E2E testing @elmd_ NG-BE

  2. BIG Gleb Bahmutov BIG

  3. HOW DO YOU TEST YOUR FRONTEND?

  4. Integration Unit E2E

  5. ARE YOUR E2E TESTS SLOW?

  6. FLAKY or UNRELIABLE?

  7. HARD TO MAINTAIN?

  8. OR HARD TO WRITE?

  9. None
  10. Unit

  11. Unit Static Types Linters

  12. IGNORE TESTING COMPLETELY?

  13. WELCOME TO THE CLUB

  14. None
  15. WHAT TO EXPECT • What is it that makes Cypress

    so outstanding and reliable? • Getting started with Cypress • Write some basic tests and learn how to work with HTTP requests and the local storage • Explore debugging capabilities • ( Configure Cypress for Continuous Integration )
  16. Blogging blog.thoughtram.io Dominic Elm Trainer @thoughtram @elmd_ = ABOUT MYSELF

  17. https:!//angular-checklist.io/projects Angular Checklist

  18. What is ? Fast, easy and reliable testing for anything

    that runs in a browser. Free. Open Source. MIT Licence.
  19. Setting up Cypress $ npm install cypress !--save-dev All-in-one solution

    that uses a good set of testing libraries Mocha Chai Sinon …
  20. Running Cypress $ $(npm bin)/cypress open $ $(npm bin)/cypress run

    !--record Local CI Alternatively you can also use for npm > v5.2 ℹ npx
  21. LET’S TRY!

  22. HOW IS CYPRESS DIFFERENT FROM SELENIUM?

  23. Selenium vs. Cypress (1) Selenium Cypress Configuration Browser Support Open

    Source Architecture Remote commands across the network Runs inside the browser and uses Node for anything outside of the browser
  24. None
  25. Selenium vs. Cypress (1) Selenium Cypress Configuration Browser Support Open

    Source Architecture Remote commands across the network Runs inside the browser and uses Node for anything outside of the browser
  26. Selenium’s Architecture Ruby C# Java PHP JS Other Bindings (Client)

    Chrome Safari IE FF Edge Other WebDriver (Server) BROWSER JSON «controls» via HTTP via HTTP
  27. Cypress’s Architecture Browser Cypress via Websocket Node.js Process OS Proxy

    HTTP Request(s) WEB HTTP Response(s) start with proxy http://localhost:63115/__/#/tests/__all iFrame localhost Cypress (Tests) iFrame Application localhost DOM Service Worker … LocalStorage Window
  28. None
  29. Selenium vs. Cypress (1) Selenium Cypress Debuggability Speed Waiting for

    Elements Parallelism ⏳ ⏳ Headless Browser ⏳ Multiple Browsers / Tabs Soon free for OSS
  30. None
  31. Selenium vs. Cypress (1) Selenium Cypress Debuggability Speed Waiting for

    Elements Parallelism ⏳ ⏳ Headless Browser ⏳ Multiple Browsers / Tabs Soon free for OSS
  32. LET’S CODE!

  33. What I ❤ about Cypress • Super intuitive and easy

    to use • No flaky tests (waits for XHR requests and DOM elements) • Rich UI and lots of debugging capabilities (screenshots and videos) • One step install (all in one solution) • Open source • Documentation
  34. None
  35. Inspirations • todomvc, https://github.com/d3lm/todomvc • ngx-drag-to-select, https://github.com/d3lm/ngx-drag-to-select • MachineLabs, https://github.com/machinelabs/machinelabs

  36. @elmd_

  37. References • Images from https://www.pexels.com/ and https://unsplash.com/ • cypress.io •

    Cypress vs. Selenium, is it the end of an era? - Lyudmil Latinov • Next Generation Web Application End to End Testing - Amir Rustamzadeh • Painless Testing for React Applications - Gleb Bahmutov • End-to-end Testing Is Hard - But It Doesn't Have to Be - Gleb Bahmutov