Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended.
Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.
2. Maurice de Beijer
The Problem Solver
Microsoft MVP
Freelance developer/instructor
Twitter: @mauricedb
Web: http://www.TheProblemSolver.nl
E-mail: maurice.de.beijer@gmail.com
2
4. Topics
What is Cypress.io?
UsingTDD to building a SvelteKit application
Testing pages
API testing
Running the Cypress tests in GitHub Actions
4
7. What is
Cypress?
Cypress is a front end testing tool
Built for the modern web
Tests are easy to write
Using simple JavaScript orTypeScript
TimeTravel runner lets you inspect test at each step
Click on a step to see the state of the browser
Automatic waiting for elements
Makes tests more resilient
Video recording of running test
Helps debugging failing tests on the CI server
7
8. What is
Cypress?
Lets you fake the network when required
Or use the real backend as appropriate
Automatically retry of failing tests
Run flaky tests multiple times
Many standard and 3rd party extensions
Or write your own in JavaScript
Can run in Docker containers
Consistent cross platform behavior
Runs inside the browser
Not based onW3C WebDriver API
8
25. Conclusion
Cypress is a great tool for End to End testing
More reliable then relying on unit testing and manual testing
Write tests that resemble your user’s actions
Great approach forTest Driven Development
Test that your API’s return the shape you expect
A mismatch can lead to vague errors
25