Todd Nesnick
Automated testing tools are in high demand due to the need to bring products to market faster. Despite Selenium being one of the most widely used tools to automate web testing, other open-source automation tools also gained traction.
Among these tools is Cypress, which uses a framework that doesn’t use Selenium or WebDriver to test web applications. Cypress is all-in-one testing framework which resolves fundamental issues encountered by modern web applications. This tool uses Node.js to start a browser under special control; the tests run on the browser itself, not just via remote control.
Cypress addressed various pain points in its architecture from the ground up to provide all the needed libraries, frameworks, and dependencies in one package.
Starting Out
As a starting point, let’s enlist first what are the components of an automated testing system.
- TEST FRAMEWORK
- ASSERTION LIBRARY
- TEST RUNNER
- REPORT BUILDER
- DEBUGGER
And some more…
- Allow plugins
- Custom commands
- Dashboard to monitor
- CI/CD Integration
- Cross browser support
It’s amazing how easy it is to accomplish all this with just one command: Cypress can be easily installed on your system using Node.js and the npm command npm init, followed by the quick installation.
Using the same browser window as of the application
Famous unit testing runners such as Mocha and Jest perform unit tests in the Node terminal by using JavaScript browser emulation, so the true browser behavior cannot be observed. Selenium and WebDriver.io are other end-to-end test runners that run an application in the browser and on the other hand run the tests in a separate process outside of the browser. They send the commands to browser via a driver.
Cypress’s framework runs tests directly in the browser, a feature that offers several advantages over remote-control testing.
The main objective to create cypress was to address the challenges quality assurance engineers and developers face when testing web applications.
With Cypress Automation, installation is a breeze
Getting started is simple with Cypress automation for web testing. If you have worked with Selenium, you have to manually select all the libraries and dependencies you need.
In contrast, Cypress is bundled with a Chrome browser, so there is no need to set up complex environment. Cypress can also be used with any other browser that you have installed on your local computer.
Browser Support
In the first version, the testing automation tool was only compatible with Chrome. Subsequent updates added support for Electron, Edge, Firefox, and Brave. Even so, Cypress still doesn’t support IE and Safari. It lacks tab support, as well as the ability to drive two browsers simultaneously.
Cypress Automation delivers fast execution of tests
A core feature of Cypress is its rapid test execution – with a response time under 20 MS. With automatic built-in Waiting into the framework, you don’t have to define implicit and explicit waits. DOM loading, elements, animation and more are automatically waited for by the framework.
As well, the framework automatically runs subsequent tests after the first one is run, so downtime is avoided and the need to manually trigger the next test is also eliminated.
The fact that it can be used straight from a browser and manipulates DOM makes it highly user-friendly.
Cypress UI Test Runner
The UI Test Runner that Cypress comes built with allows you to see how your tests run on each action. You can see how many tests passed or failed, as well as how long it took for each of those tests to run. In addition, it shows a preview of your application and how it will behave when being tested. UI test runner also provides a time-travel feature. This means whenever you click on an action, you can see what your application is doing because Cypress travels to different snapshots so that you can see how it behaves. You have direct access to Chrome DevTools, and Cypress will print additional logs that you and your team may find useful.
No Wait – in the responses from the API
By writing tests in the browser, the test writer is also able to access any browser API directly from test. During a test scenario, there are numerous browser APIs and application methods we may need to access.
Cypress vs Selenium
Installing all required frameworks, dependencies, and configuring them for writing tests is usually a time-consuming task. QA engineers usually spend between an hour and a whole day on this process. On top of that, developers don’t prefer much when it is all about writing UI tests. No, it’s not that they do not care about quality (they certainly do); it’s just that existing tools are difficult to use.
Selenium is also very difficult to setup and debug since additional libraries need to be installed.
Cypress is completely different from Selenium. In the early days of Selenium, it was designed to fulfill the needs of QA engineers who had no access to the code base and preferred to write E2E automation tests. The developers, on the other hand, like writing tests that are fast. Slowness and brittleness were some of the issues they don’t like to encounter. Cypress is primarily a JavaScript testing tool because front-end developers make use of JavaScript the most. As such, Cypress encourages front-end developers to perform more than just unit tests. However, QA engineers typically use languages other than JavaScript, such as Java or C#.
Selenium may not be the right tool for all developers because it is difficult to use for testing asynchronous applications. Writing E2E tests is even more challenging. Cypress is still not widely adopted by QA engineers working on JavaScript projects, as it lacks some Selenium features and has some permanent and temporary drawbacks.
Still, Cypress has proven more successful than Selenium. As JavaScript became more popular, you may say that the focus started shifting from QA engineers to developers in test automation.
This flexibility and simplicity are significant advantages over Selenium. Selenium requires the user to download a driver and set up a grid in order to start testing.
Stubs, Spies, and Clocks
Cypress comes with built-in functionality to stub, spy, and change the time of an application; this includes the methods cy.stub() and cy.spy() as well as cy.clock() respectively, allowing you to manipulate timeouts, clear timeouts, set intervals, and clear intervals.
Cypress comes with the sinon.js library, which has a wide array of spies and stubs usable by Cypress to extend your existing test automation scenarios.
Network traffic control
During E2E testing, you can ensure the application is making the expected network calls. Cypress provides complete network spying and mocking capabilities, allowing developers to run the front end without the back end or to run with some calls stubbed.
Intercepted or observed HTTP network requests and responses are displayed in the Command Log, and assertions can be performed against the requests and responses.
Plug-ins that rock
Besides the plugins that boost the way you write your tests, Cypress is used for other kinds of testing as well. Cypress-axe, can help you catch some accessibility problems early on. Does your team prefer Gherkin BDD syntax during the writing of the tests? You may use cypress-cucumber-preprocessor.
Debugging
Detecting and fixing defects in your web apps is easy and quick with Cypress. When tests fail, you receive suggestions on how to fix them. Chrome DevTools lets you debug directly from there. As an additional feature, Cypress supports real-time reload and Time Travel so developers can review their code during and after a test is executed.
Having access to every object makes Cypress an ideal tool to simplify and streamline error analysis, and it is able to provide screenshots of failed tests to further help in finding defects and debugging apps.
Implementing Cypress with Continuous Integration Services
End-to-end testing does not require any additional CI platforms or services, as Cypress runs on your existing CI services. However, there is one major plus: when Cypress runs, the test run video is automatically saved on every platform. As the video shows both the Command Log and the application, anyone may quickly debug a failing test.
Besides recording the video of each test run, Cypress also records a screenshot of each failure at the moment of failure. These screenshots are helpful for troubleshooting CI failures.
Cross-platform cloud testing for scalability and coverage
In spite of the fact that Cypress allows parallel testing, achieving optimal browser coverage is virtually impossible with a local setup. Your test infrastructure needs to be switched to a Grid-based system so that you can leverage Cypress framework for testing across multiple browsers and operating systems.
It is imperative to have a cloud-based cross browser testing platform like LambdaTest to help resolve the underlying problems. With LambdaTest, you don’t need to worry about maintaining an in-house device labs. LambdaTest provides an online browser farm of 3000+ browser and OS combinations on cloud for your Selenium and Cypress E2E testing needs. You can automate Cypress testing on a scalable cloud across 40+ browser versions on cloud grid.
Closing words
Cypress has evolved tremendously since it was first released. It is used primarily for UI functional test automation. Users need to be aware that, as with any technology, there are a few limitations and tradeoffs. Developers tend to favor JavaScript and that makes Cypress more developer-friendly. Cypress is a great choice for front-end developers using frameworks like React, Angular, Vue, etc. Cypress’ future is bright, and it promises users a lot of innovation, ease of use, and productivity. Start exploring Cypress if you have not done so already.