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

Changing the Game with Cypress

Changing the Game with Cypress

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'll look at how to get started with Cypress and dive into some basic tests. We'll also see how to work with http requests, access the Local Storage and explore the debugging capabilities of Cypress.

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

7764379521726735c164889159c8f387?s=128

Dominic Elm

August 10, 2018
Tweet

Transcript

  1. Changing the Game with TESTING IN A WAY THAT WAS

    NEVER POSSIBLE BEFORE @elmd_ NG-Talks
  2. ARE YOUR E2E TESTS SLOW?

  3. FLAKY or UNRELIABLE?

  4. HARD TO MAINTAIN?

  5. OR HARD TO WRITE?

  6. IGNORE TESTING COMPLETELY?

  7. IGNORE TESTING COMPLETELY?

  8. WELCOME TO THE CLUB

  9. What are the biggest challanges you want solved? SETUP Having

    sane configuration Less hassle to set up Frictionless test setup Being easy to set up … Source: Brian Mann - Testing The Way It Should Be WRITING Simplier to write Fast and reliable Testing responsive design Visually see what broke … MANAGEMENT Flaky Easy to maintain Understand test failures Less brittle to changes …
  10. None
  11. WHAT TO EXPECT • Understanding the key difference between Selenium

    and Cypress • Getting started with Cypress • Write some basic tests • Working with HTTP and the DOM • Explore debugging capabilities
  12. None
  13. Blogging blog.thoughtram.io Dominic Elm Trainer @thoughtram @elmd_ = ABOUT MYSELF

  14. What is Cypress? • Cypress is an electron-based E2E test

    runner • The goal is to revolutionize E2E testing • Cypress allows for flake-free and reliable tests that run inside the browser • It provides a powerful debugging tools and rich UI • All-in-one solution that uses a good set of testing libraries
  15. What is Cypress? Integration Unit E2E

  16. What is Cypress? Integration Unit E2E Cypress

  17. HOW IS CYPRESS DIFFERENT FROM SELENIUM?

  18. 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
  19. None
  20. 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
  21. 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 IE11 comes next
  22. None
  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 IE11 comes next
  24. 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
  25. Cypress’s Architecture Browser RUN LOOP Cypress App Cypress via Websocket

    Node.js Process OS
  26. Cypress’s Architecture Browser RUN LOOP Cypress App Cypress via Websocket

    Node.js Process OS DOM Service Worker … LocalStorage Window
  27. None
  28. Selenium vs. Cypress (1) Selenium Cypress Debuggability Speed Waiting for

    Elements Parallelism ⏳ ⏳ Headless Browser ⏳ Multiple Browsers / Tabs
  29. Selenium vs. Cypress (1) Selenium Cypress Debuggability Speed Waiting for

    Elements Parallelism ⏳ ⏳ Headless Browser ⏳ Multiple Browsers / Tabs Comming in 3.1
  30. None
  31. Selenium vs. Cypress (1) Selenium Cypress Debuggability Speed Waiting for

    Elements Parallelism ⏳ ⏳ Headless Browser ⏳ Multiple Browsers / Tabs Comming in 3.1
  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. 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
  35. None
  36. 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

  37. @elmd_

  38. 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 • Testing the way it should be - Brian Mann • Painless Testing for React Applications - Gleb Bahmutov