UI Testing with Cypress

Why test?

Reduce bugs

  • You care about quality
  • You want to reduce the amount of bugs now and going forward
  • Defend from other programmers - they think different from you
  • Regression tests
    • Ensure that the first time a human encounters a bug is the last time a human will

Refactoring

  • You want to make refactoring easier
  • Tests verify that things work
  • Large changes become less "scary" because you can verify that things still work like they used to

Save time

  • Saves time in the long run
  • Less bugs = less time used in total
  • Writing tests helps you think about edge cases
  • If you've gotten the hang of it, writing tests is fast

It's fun!

  • Seriously.
  • Testing in JavaScript has come a long way
  • Developer Experience has become first class
  • Used to be really hard
  • Higher level of abstraction today
  • Has become much easier
  • Having good test coverage just feels good

What do you mean with "UI testing"?

Unit test

  • Test small units in isolation
  • Runs very fast
  • Don't test "the big picture"
  • Tests methods' return values, functions' inputs, etc.

Integration tests

  • Tests several units in combination
  • Run somewhat slower
  • Break more often due to more moving parts

UI tests

  • Tests the entire app in a real browser
  • Requires launching a browser
  • Slower
  • Can be brittle
  • Tests actual use cases
  • Gives great confidence that things work

2 unit tests, 0 integration tests

2 unit tests, 0 integration tests

2 unit tests, 0 integration tests

Tests complement each other

The test pyramid

What about Selenium?

Some history

  • We have Selenium tests
  • A student wrote them part-time
  • Run in CI after a build is done
  • Written in Java
  • Uses cucumber
    • (Given X, then Y)
  • AFM and HB have them
  • Have largely been abandoned
    • No green build in 1+ year

Why it didn't work

  • Front-end developers don't write Java
  • Not enough handover
  • Hard to debug when tests break
  • Cucumber was the wrong approach; BDD is too far when we can't even to TDD
  • Feedback was too slow
  • Culture - we don't appreciate quality!

Introducing

Cypress.io

Cypress

  • Integrates several tools together in one package
  • Awesome DX
    • Watch mode
  • Written with today's apps in mind
  • Built to be debuggable
    • Time travel
  • Stub network traffic
  • Record videos of entire runs, and screenshots of failures

Demo

Fin.

Made with Slides.com