How I Found A Bug On My First Day Using Cypress
How this started:
I spent a day working out some kinks on a React app, making sure when someone searched anything, it would get added to the URL. I wrote some Jest tests to make sure I could find the search term in the URL, and made sure the search term stayed there after clicking search. So I can go forward…but how about backwards? I tried history.goBack() but that didn’t work so what do I do?
Enter Cypress! What’s Cypress? It’s an easy way to do end to end testing (MUCH easier than figuring out Jest testing), and you get to watch videos of the whole process! For example…do you want to go to a url? cy.visit(your_url); ! Do you want to click the back button on the browser? cy.go(“back”); ! Then you can get elements (and even the value of an input field) to test if it matches what you expect.
This is all it took to visit a URL, type something in a search field, and check if the search was added to the URL as a param:
How I found the bug:
What I never thought about testing before, was making sure everything worked on refresh. Because…if it’s the same URL…shouldn’t the results be the same? Oh my sad naïve mind.
Cypress will refresh the page with cy.reload(); , then you can test if the output matches what you expect. Let’s go!
Except…it failed. On refresh, with the query parameters in the URL, it reverted to…the main page…with no search query. Even though going back and forth on the browser would load the search queries as expected.
After realizing there was a bug, the fix was much easier to find. Turns out on first render, my search results always pushed that main search page into history. Ok, that’s not a hard fix, I’ll just have to make sure I check the correct params before pushing it into history. Ran the Cypress test, got to watch a video of a bot clicking around and refreshing…it worked!
On to the next challenge!