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