Introduction To Cypress Test Automation Framework

The demand for modernized automation tools has increased exponentially with the need to deliver products faster to the market. One of the reasons is the development of modernized web applications using frameworks like React, Angular, Vue, etc.

Although Selenium is one of the most widely used tools for web automation testing, there are other open-source automation tools gaining popularity in the market. One such tool is Cypress, which tries to resolve fundamental issues faced by modern web applications. These tools make the testing process more reliable and faster.

Source

In this Cypress tutorial, we talk about the Cypress test automation framework that is fundamentally and architecturally different from the Selenium test automation framework. It is gaining huge adoption from the developer community.

Introduction to Cypress test automation framework

Cypress is a revolutionary front-end testing framework that lets you easily write powerful and flexible tests for your web applications. It enables advanced testing options for both unit tests and integration tests with benefits such as easy test configuration, convenient reporting, intuitive dashboard experience, and more.

Cypress has the major advantage of being written in JavaScript, the most popular language used for front-end web development. It also has a huge following (around 32K GitHub stars) from developers and QA engineers since the time was publicly released for the community.

So what makes Cypress an alternative tool for automation?

Let’s take a look at the architectural differences of Cypress and Selenium and how Cypress is resolving the problems faced in modern-day web application testing.

Understanding Selenium test automation framework

Selenium WebDriver is a powerful tool for developers that lets you perform automation tests across different browsers. This architecture includes a Selenium server that runs your tests, browser driver corresponding to the browser (under test), and ‘N’ number of clients that communicate with the server, typically in the language supported by the Selenium framework.

Shown below is the top-level architecture diagram of the Selenium 3 framework:

Architecture of Selenium 3

As of writing this blog, Selenium 4 is in the beta stage and open to use for the community. Selenium 4 is W3C compliant which means that test flakiness will be significantly reduced with Selenium 4. A couple of features of Selenium 3 are deprecated in Selenium 4, you can make sure to check what is new in Selenium 4 and what is deprecated in it.

Read – How To Upgrade From Selenium 3 To Selenium 4?

Now, let’s dive into Cypress architecture and its breakthrough features to understand the difference with Selenium.

Understanding Cypress test automation framework

Cypress is an open-source testing framework based on JavaScript that supports web application testing. Unlike Selenium, Cypress works completely on a real browser without the need for driver binaries. The automated code and application code share the same platform, which gives complete control over the application under test.

To describe the backend story of Cypress, let’s have a look at its high-level architecture.

Cypress runs on NodeJS server, which communicates with the test runner(Browser) instrumentalized by Cypress to run the application (one of the iframe) and test code(another iframe) in the same event loop. This in turn allows the Cypress code to mock and even change the JavaScript object on the fly. This is one of the primary reasons why Cypress tests are expected to execute faster than corresponding Selenium tests.

Key benefits of using Cypress test automation framework:

• It is easy to set up the Cypress framework.
• Cypress has an in-built wait for requests feature that eliminates the need to configure additional waits.
• There is no need for driver binaries in Cypress and execution happens on the real browser.
• Since test code and application run in the same browser, it can access application JS objects.
• Cypress is super impressive where you can change code and execute the same on the fly .
• It provides dashboard support for detailed reporting.
• It supports parallel test execution.
• It has support for BDD and TDD style testing.
• Cypress tests are less flaky due to the auto-wait features supported by the framework.
• At each step, screen grabs that show the test behavior are captured. These can be super helpful in debugging issues with the tests.
• Detailed documentation and thriving community.

Read- Selenium vs. Cypress – Which Is Better in 2021?

Setting Up Cypress test automation framework

Cypress requires Node JS (>= 12) to be pre-installed on the machine. It is bundled into a singleton package which can be added to your node_modules with npm or yarn using the following commands:

npm install cypress

OR

yard add cypress.

Note: Make sure you have initialized your folder with npm init or package.json file is created under your project folder.

Once Cypress packages are added to your project directory, you should be able to see the cypress folder added to your project with pre-added tests for sample testing.

Cypress Test runner

To open Cypress test runner and view the pre-added tests, run the following command on the terminal:

npx cypress open

If you manage commands through package.json, then you might write it under scripts that would look something as shown below. In that case, use the following command:

npm run cy:open

Once you execute the command, the test runner would show up as seen below:

As in the above screenshot, you can choose to run the specific test by selecting one or run all at the root folder. You can also run the tests by selecting a browser via CLI:

npx cypress run -- --browser chrome

Additionally, to run specific file use:

npx cypress run -- --browser chrome --spec ''

Sample Code

actions.spec.js file is written with Mocha style and uses Cypress built-in commands to launch and interact with the browser. List of few commands that we would be using are shown below:

• cy.visit() – Launch a browser with the URL provided as the argument
• cy.get() – Get the elements using CSS-selectors
• type()- Enter the value in input boxes
• {keyCommand} like “{enter}” – Write keyboard actions
• Asserts command – Cypress uses its own BDD style of assertions inspired by likes of Chai

There are a whole bunch of advanced commands around cypress API, which you can check on the Cypress official website.

Read – Mocha JavaScript Tutorial With Examples For Selenium Testing

For demonstration of Cypress test automation, we use the Kitchen Sink example which is available on the official GitHub of Cypress.

Source

Here is the execution snapshot of the test running on the Chrome browser:

Defaults to Spec reporter in the console output:

The amazing part to notice about execution is that it auto records your test execution and stores it as a .mp4 file for viewing or sharing with other members in the team.

Dashboard services of Cypress test automation framework

While test runner does a wonderful job of running tests and storing the recorded session for execution, Cypress provides some more amazing features through its paid services. The paid services are completely optional for use but CI integration and parallelization of test runs stands out from the rest.

Some of the key features of dashboard services include:

• Allows tests to run parallel with CI setup.
• Allows tests to be grouped and run for multilevel environments or browsers.
• Easily integrates with CI tools.
• Provides insights into your historical runs.
• Auto balancing feature to reduce the load on CI servers.

Read – Comparison Of Top CI/CD Tools

Configuring test to run in the dashboard

For running tests in Dashboard services, we need to create an account on Cypress Dashboard. Follow the below steps for creating a projectId and record key.

Add your projectId on the cypress.json file:

Execute tests on Cypress Dashboard with:

npx cypress run --record --key

How to setup Cypress test automation framework with cloud-based Selenium Grid

While the Cypress testing framework does let you run tests in parallel, achieving optimal browser coverage is impossible when running tests on a local setup. For optimal browser coverage, you need to upgrade your test infrastructure to a Grid-based system so that you can leverage Cypress framework for running tests on different browsers and operating systems.

The need for a cloud-based cross browser testing platform like LambdaTest can help resolve the underlying problems to a great extent. Let’s now write a simple Cypress test and see it in action on the LambdaTest platform.

Step 1: Create a new spec file.

Create a new spec file google.spec.js under /cypress/integration folder. In the test code, we are searching Cypress on Google and verifying the results containing Cypress as a keyword.

Step 2: Install the LambdaTest Cypress CLI:

LambdaTest Cypress CLI enables cross browser testing with Cypress. It lets you test your application across different browsers without any hiccups!

Install lamdatest-cypress cli package using npm install lambdatest-cypress-cli under the project root directory. Once installed, lambdatest-config.json is created using the npx lambdatest-cypress-cli init command, which looks like below:

In the above config file, we are specifying browsers Chrome and Firefox with the desired versions and platform configurations. As of writing this blog, LambdaTest supports the following browsers and platforms for Cypress testing:

Source

Run the tests using npm run lambdatest to see the tests in action on the LambdaTest Grid.

You can also view the execution logs in LambdaTest results under the ‘Automation Logs’ option.

My recommendations to folks looking for a reliable automation testing framework are:

• If your applications are built with modern UI frameworks and need component-based test support, then you might think to switch to Cypress eventually (if not on a priority).
• Switch to Cypress if current tests show flakiness and have to be revamped for betterment.
• If you are building a new automated framework that works hand in hand with development and deployment, then a POC on Cypress is worth a try!

Read – How To Perform Cypress Testing At Scale With LambdaTest

Conclusion

In this Cypress tutorial, we covered the basics of the Cypress test automation framework and how its modern architecture resolves the problems faced in modern web automation testing.

Source

We also looked into its open-source test runner and paid Dashboard services and tried our hands-on with Cypress tests on cloud-based grid LamdaTest. It helps perform cross browser testing with Cypress, along with running tests in parallel on a reliable and scalable cloud grid.

Happy Testing!