Test Automation Tools: Cypress.io

6 min readJun 7, 2019

Testing is one of the most critical processes in modern application development, as the success or failure of the application depends entirely on it. To contend with this and ensure that we don’t introduce more bugs than we fix, we can turn to test automated of the front-end.

Software test automation engineers, we relied on test automation tools like Selenium for End-to-End (E2E) tests on Multi-page web applications. Many years ago, the web was quite a different place than today. The web of today has changed a lot, and subsequently, testing and test automation tools have changed too.

Today we going to introduce you to the test automation tool Cypress.io, a modern front-end testing framework.

If you are looking for test automation tools that are more suited for mobile app testing or you want to understand why you should implement test automation in a CI/CD pipeline, read the following articles:

What is Cypress.io?

Cypress.io is a relatively new JavaScript framework which uses an event-based architecture that hooks into Google Chrome’s lifecycle events enabling it to wait for things like Ajax requests to complete without using a polling/timeout mechanism, leading to quicker tests. It is open-source and designed to be developer, as well as QA engineer, friendly. Cypress.io is built on top of Mocha, which is again a feature-rich JavaScript test framework running on and in the browser. It is easy to set up, has no dependencies, and is fun and enjoyable to write tests with and use.

What Makes Cypress Different?

Architecture. Most test automation tools (like Selenium) operate by running outside of the browser and executing remote commands across the network.

Cypress is the exact opposite. Cypress is executed in the same run loop as your application.

Easy debugging. There is a rich UI which visually shows you the command execution, assertions, network requests, spies, stubs, page loads, or URL changes.

When the test runs, the commands that are executed are shown in the side panel, while they are being executed. This allows you to travel back to the state it was in when the commands were run.

Network Traffic Control. Working with network requests in Cypress is awesome, the Cypress dashboard allows you to check out each request at any moment in the test.

This allows you to stub the network traffic control however you like, without involving the server.

Shortcuts. Cypress prevents you from being forced to always “act like a user” to generate the state of a given situation, you can simply skip them programmatically with commands like cy.request(), where you can send HTTP requests directly, yet have those requests synchronized with the browser.

The advantages of Cypress

No dependencies. All you need is Node.js and npm installed, then define in your package.json as a dependency and you are all good to go, to use Cypress. No external dependencies required (no web drivers, no servers, etc.)

It has an awesome dashboard and a preview window. Maybe one of the most amazing things in Cypress is the dashboard. It allows you to see:

what’s being tested
how long will it take
the number of failed, passing, pending and skipped tests

Auto-reloading option. When you save the changes in the test file, Cypress will automatically launch the test in the dashboard. This is quite fun and incredibly useful. Believe me, it saves so a lot of time

Automatic waiting. No sleeps, no waits. Cypress automatically waits for the DOM to load and the element reaches an “actionable.”
All that you need to do is get your element by using:

cy.get('.element')

Then Cypress will do the rest

Fast. As Cypress is using its own DOM and the test is running in your local browser itself. This means an automation command (e.g., clicking a button) does not send the command to the browser like WebDriver does through out-of-process communication. Instead, Cypress uses DOM events to send a click command to the button. This is one of the things that makes Cypress so fast as a test automation tool.

The downsides of Cypress

No cross-browser testing capabilities. Cypress only supports Chrome and Electron, so with Cypress, you are not able to test your app on Firefox, Edge or Safari … at least at the moment of writing this article. This is quite a limitation that in all likelihood will be resolved fairly quickly.

Cypress limited. Cypress is built on and uses Mocha and Chai, this means that if you work with JavaScript, it will be especially easy to start using Cypress. According to TechRepublic, JavaScript is the most popular language and increasingly becoming more popular. JavaScript is also the language behind most of the web, making it a no-brainer a test automation tool/framework used on web applications. If you’re more familiar with another language, it will be fairly complex.

Conclusion

Cypress is a completely new testing framework which has been made for the asynchronous nature of the web application testing and the modern browsers of today. This allows for fast and consistent test results, with features like time travel, dashboard, Auto-reloading, etc. However, it still has some pretty glaring downsides, it only supports one programming language, JavaScript, and only supports the Chrome and Electron browsers.

In the end, everything depends on your application, programming languages and frameworks you use in your development environment. All these things and more, are important considerations you have to keep in mind when you want to decide which testing framework are you going to use in your project.

Calliope.pro

If you are reading this, you are probably evaluating which frameworks and test automation tools you should be using. Your tooling, depending on the scale you are testing at, is likely quite diverse and often times you are one of the few, if not the only, person reviewing the results of the tests. That’s hardly an agile approach to software development.

What you need is one location for your development team to share, compare, and monitor test results to quickly and clearly understand the health of the code and identify regressions. Our test results dashboard is framework and tool independent meaning you can use it with nearly anything.

Give Calliope.pro a try, for free, today and discover the power of collaboration.

Here at spriteCloud our software testers work with your team to increase your development efficiency, and to help you make the right choice about what framework to use for testing and what tools are the best for your project. Part of our mission is to provide you with information to help you become better at testing.

This article is an example of that, as are these articles which cover:

Another part to achieving that mission is by providing you with our software testing expertise. Whether is test automation, functional testing, security and penetration testing or just providing extra manpower while you ramp up or down a project, we can help you on a contract or project basis.

For more information about the many ways, we can assist you in software and security testing, head to our homepage. You can also drop us a message using the contact form below. We will get in touch with you and help you find a solution.

Generaal Vetterstraat 72, Amsterdam
+31 20 615 9155 | info@spritecloud.com

Originally published at https://www.spritecloud.com.