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 tests automated on the front-end.
As software test automation engineers, we rely 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:
- Mobile automation testing tools: test automation for rapid app development
- Test automation in continuous integration/continuous delivery (CI/CD)
What is Cypress.io?
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). Even our favourite open-source tech stack for test automation, Ruby, Cucumber, and Watir, require more effort to set up.
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
We know a thing or two about dashboards. Our test results dashboard, Calliope Pro, was created to make collaborating on test results data easy, regardless of the tool used. Give it a try for free.
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:
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.
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.
Be sure the check out our other TA tools and framework reviews in our Automation Guide.
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.