Automated testing is an essential part of the testing process. It saves testers time and money by catching errors early on in the development process. There are a number of different automation tools available in the market, and Cypress is one of them which is quickly becoming the tool of choice for many testers and developers. It has been developed to address the problems QA testers encounter when testing a modern web application.
Cypress is fully loaded with some amazing features that make it unique. It has been regularly releasing a flow of new features and changes. Sometimes it becomes hard to keep up with the latest releases. to keep you updated, in this article, we will discuss some new features that Cypress has released recently.
Before we move on to what is new in Cypress. Let’s first discuss in short what Cypress is, and what the benefits it provides are.
Cypress
Cypress is an open-source automated testing solution for modern web applications. It is a JavaScript-based end-to-end testing framework built on Mocha. That is a feature-rich JavaScript test framework that runs on and in the browser, making asynchronous testing simple and convenient. Cypress tests are more reliable as they run directly in the browser and take advantage of its API to control the browser.
Cypress uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework. It can test in real-time which means the test results can be seen as they are run. Therefore when code is deployed all the nasty surprises can be avoided, when it comes to automating browsers.
Cypress supports different types of testing, such as Unit Testing, Integration Testing, End-to-End, and API testing. It can also be used for functional testing as well. Cypress is one of the best choices among the tools available.
Benefits of Cypress
Cypress provides multiple benefits making the life of a test developer very easy. Let’s explore some of them.
- As soon as the tester saves their file Cypress better knows that the tester will rerun it. So, it automatically initiates the run next to the browser. Therefore, there is no need to trigger the run manually.
- It automatically records videos of the entire test suite and captures screenshots of the application when the tests run to debug test execution more efficiently. This helps the test developer to see what happened at each step with the Test Runner and logs.
- There is no need to put explicit waits or sleeps to tests with Cypress, It automatically waits for commands to execute the test and enacts assertions before proceeding.
- Cypress aids in faster, more consistent, and more reliable test execution because the tests are executed directly in the browser.
- Cypress supports a single easy-to-learn universal Language that is JavaScript because its architecture is based on Node JS. JavaScript is simple and easy to work with for both developers and testers.
- It supports multiple browsers like Chrome, Edge, and Electron- the default browser comes with Cypress and it runs in headless mode and Firefox.
- Cypress has a feature called the test status menu that displays the number of test cases that have passed or failed.
- The writing time for Cypress tests is lower as compared to other frameworks.
New updates in Cypress
Cypress has gained popularity over the past few years with the constant focus on updating and adding on new features This time also it has come up with some powerful new features that mainly focus on the advanced component testing capability, to make the developer experience better for Cypress users.
To get aligned and use the latest features of Cypress you need to update it. Before updating it is important to know what the new changes in Cypress are and how it is going to impact the existing tests. Featured by new component testing functionality and a completely redesigned UI there is a lot to know. So let’s take a look together. Below are some important things you need to know about the newer version of Cypress.
Component Testing
One of the most significant and noticeable features of the most recent Cypress release is component testing. Although it was a test feature in earlier editions, it is receiving more attention in the most recent version. The new testing features, which include the ability to render components in a real browser while interacting with them, to debug them using Chrome DevTools and make immediate corrections, to access multiple states, and to provide a setup wizard for novice developers to set up the project for component testing, are a true game changer.
This feature is built on top of Cypress’s end-to-end testing capabilities, to enhance the developer experience. With this Cypress is entering into a competition as an alternative to solutions tools like Jest or Storybook, which are very popular among developers.
The best part about component testing is that instead of testing the components with the terminal the components are tested inside a browser. Being able to interact with them adds up to an excellent developer experience.
Project Structure
In the latest version of Cypress, configurations are stored in cypress.config.js instead of the JSON file. This helps to improve runtime functionality. This function allows tapping into different node events that happen during a Cypress test run like auto-open dev tools when the browser opens or dynamically resolves configuration or triggers node scripts right from the test. A new built-in migration tool allows upgrading existing projects to newer formats.
Easy Migration
The migration between Cypress versions has become because the Cypress team has prepared a migration assistant that ensures a seamless transition of the project. If you are already testing with Cypress, it is easy to start benefiting from this latest feature immediately.
New User Interface (UI)
Cypress now has been redesigned with a new and improved User Interface that enables developers to navigate through the application more easily. This also helps in choosing and executing the tests across browsers easily and more quickly. It has now two different UIs for Component and E2E Testing respectively.
E2E Testing in Cypress
E2E Testing in Cypress is mostly written by QA or Test Engineers to cover the integrated component tests. Now, the end-to-end testing in Cypress is separated from Component testing.
In the previous version the Integration folder was used to put all the end-to-end tests, but in the latest Cypress version, there is no Integration Folder any longer as it is termed as the e2e folder.
File and Folder Structure
In the new Cypress, there are a few noteworthy changes in the file and folder structure.
- The integration folder is renamed as the E2E folder, this means cypress/integration is now cypress/e2e.
- Cypress/support/index.js are renamed as cypress/support/e2e.js.
- The plugin’s file option has been removed with new setupNodeEvent() and devServer() configuration options in the config file.
- The test files option is removed and replaced with the new specPattern option.
- The ignoreTestFiles option is replaced with the excludeSpecPattern option.
Additional flag support for opening Cypress window
As Cypress has two different parts, component and e2e, opening the Cypress window with the command npx cypress open, requires you to manually choose to land on the specific type of testing. With the new Cypress two different flags are available now, each to open component and e2e testing Testing window directly
No more Cypress examples downloaded while downloading Cypress
Earlier, when installing Cypress by default, there were many example test cases, with the upgraded version of Cypress those examples are removed. Now it can be created or downloaded from the Cypress E2E Project setup window.
Option to Change the Browser selection
In the previous version, the browser selection option was only at the Cypress Project level window, not the browser selection can be done on the Project window or Test runner window. Later in the new version new feature has been introduced with the option to Change the Browser in the Test Runner window
Deprecation of Cypress Studio Recorder
Adding new features is also saying goodbye to some older parts that were not widely used. The Cypress Test Recorder called Cypress Studio, which allowed the teams to use Cypress without prior coding knowledge, is no longer present in the current version. The reasoning behind the decision was due to resource requirements and prioritizing other more critical features to this new Cypress version.
For teams that still need a record and replay tool for Cypress testing, they can use the new functionality of DevTool Recorder Made by Cypress and Chrome. This new plugin allows teams to generate Cypress code and export user flows from DevTools and converts them into Cypress code for playback.
Cypress Testing with LambdaTest
Cypress is an easy-to-use web testing framework that is continuing to grow in popularity. It is attracting developers, as it enables test automation engineers and front-end developers to create automated web tests in JavaScript.
LambdaTest makes it simple to get started and scale their Cypress testing. By integrating Cypress with LambdaTest, Cypress users can run their tests in the LambdaTest cloud against any browser combinations they need. Additionally, they can benefit from LambdaTest’s improved security, analytics, and 24/7 remote access.
Functional Testing is an essential part of testing applications. While performing functional testing always keep in mind that functionality should work across the browser and platform combinations. This is why Cross Browser Testing with Cypress is a must to ensure a seamless user experience.
LambdaTest supports all the latest as well as the older versions of Cypress, try running your Cypress tests on LambdaTest’s real device cloud. LambdaTest also allows you to use instant, hassle-free parallelization to get faster results without compromising the accuracy of the results.
Moreover, it is advised to perform Cypress Testing on real devices and browsers to ensure that the tests are more accurate when performed under actual user conditions. By testing the application in actual user conditions with LambdaTest you will be able to detect bugs before users do.
LambdaTests real device cloud provides access to more than 3000 real devices, browsers, and operating system combinations to perform end-to-end testing, cross-browser testing, and functional testing for both web and mobile app testing. It can easily be integrated with other frameworks like Cypress, Selenium, Playwright, etc, for web testing, mobile testing frameworks like Appium, and all the major CICD tools like Jenkins, Gitlab, Azure, CircleCI, etc.
Conclusion
Cypress’s new release is bundled with long-awaited features. It has made changes to internal APIs, to make this migration hassle-free, it has introduced a migration assistant or migration helper which automatically converts the older project into Cypress’s new standards. undoubtedly it has laid a strong foundation for releasing attractive features in the upcoming days.
Therefore to gain the most from recent improvements and bug fixes, it is recommended to test scripts using the latest version of Cypress.