Notes about testing with Cypress
For the last project I got involved in my company I was required to take a front-end role. Working with Vue.js and its environment specifically. After some advances I was asked to do testing, and we ended up choosing Cypress given it covers unit testing, integration tests as well end to end (e2e) testing.
On the way I have learned the importance of testing in software development, and to be honest it's something I'd prefer to avoid in some scenarios. But I had interest in learning how to do front-end testing, so this is basically what I have learned so far.
End to end testing is the way you manage to test actions like a final user. Cypress provides convenient ways of trigger events over dom elements; button clicking, input typing/checking/selecting, etc...
After some interaction, you expect something else to happen (showing a loading animation, lauching a modal, redirections, etc...) and this is what you should assert with happy and unhappy paths. The following image should provide you more context.
Cypress also let you mock responses and stub requests. It is basically a way to fake requests and validate possible responses or no responses at all. Let's say you just fill a form and you expect to have a confirmation alert. This is the way you ensure users always get proper indications for their actions whether they did it correctly or not.
When you are running testing in development mode you are able to watch it in realtime. Cypress even allow you to go step-by-step for every action defined, so you can see the visual action as well as the stage. Debugging becomes more fluent and easier.
The following image shows what the steps are when loading data and posting data due to user's actions. You are able to register requests for further debugging; it always console commands, requests and yield responses.
As final recommendation I'd like to share a course I found on Udemy. It shows you Cypress in a glance so you can get to work with easy examples and challenges. https://udemy.com/course/cypress-test-automation-for-people-in-a-hurry