Testing with Cypress (Restful Booker)

View on Github

Visit Restful Booker Demo

WHAT'S THE DIFFERENCE BETWEEN SELENIUM AND CYPRESS

There’s a number of differences between Selenium and Cypress, but most notably:

Cypress only uses JavaScript as it’s primary language. Selenium has a larger selection of languages to choose from like Ruby, C#, Java and Python.

Cypress comes with its own test runner that allows for real-time reloading and a debugging features that allows for time-travelling through the steps of a test.

Cypress has waiting automatically built into the framework, unlike Selenium which requires users to write explicit or implicit waits in between executed code

Cypress can easily test different browsers without needing to instantiate a driver every time. Chrome, Microsoft Edge, Firefox, etc. It’s all ready to test out of the box.

I’ve only mentioned a few of a handful of differences, but there are many more you can read on the official cypress website

ONE IMPORTANT THING!

Turns out Cypress and React don’t always work well together. At the time while I was writing these tests there would be an Uncaught:Execption error caused by the interaction between the Cypress test runner and the React JS library. This can be frustrating because this error doesn’t stem from the Cypress tests I’ve written, but rather within the application I’m testing.

Luckily there is a workaround for this issue. I can simply use the beforeEach() hook and turn off uncaught exception handling specifically for the Minified React error #418.

TEST 1 - HOMEPAGE LOGO

With the Restful booker logo. I’ll make use of the alias feature in Cypress, which operates like a shortcut for complex selectors. In this case I’ve grabbed the Restful booker logo and given it a ‘logo’ alias using the .as() command. Then, I’ll use the logo alias (written as @logo) and assert that the source image currently displayed is the correct file.

TEST 2 - INTRODUCTION DESCRIPTION

Just beneath the logo is the introductory text for the website. Similar to what I did with the Restful booker logo I’ll create another alias for the description and assert that it contains the phrase, “Welcome to Shady Meadows”

TEST 3 - ALERT MESSAGE DISPLAYS

Test cases that account for any errors or failures are good to automate since I wouldn’t want the user to get stuck in a state that they can’t fix themselves. In the case of the contact input form at the bottom of the page, I’ll first write a line that will get the contact container and scroll it into view. Next, I’ll get the submit button and click on it to trigger the alert message that informs the user that there is missing info. A .should() command works here to verify that the message is visible to the user.

TEST 4 - ROOM BOOKING SUBMISSION

Like in the Selenium example, an automated test for booking a room requires the implementation of a click and drag function which unfortunately isn’t natively built into Cypress unlike Selenium which has the clickAndHold method. Nevertheless, I can still replicate the same functionality by copying the sequence of events: a mouse down event on the starting element, a mouse move event through the target dates and finally a mouse up event to complete my selection on my check-out date. The only remaining step is to assert that the “Booking Successful!” message has appeared as expected, so I’ll get the book room button and check for the confirmation message.

Ideally, when I run all of the test in the Cypress Test Runner, I should get green checkmarks all the way through