Cypress.io as an automation solution

Cypress.io as an automation solution

Who is it for? Main benefits? Pros and Cons?

There might be a point in your project when you need to consider some automation solutions. Today you can find a lot of tools on the market. But let’s have a closer look at Cypress.io

As a JavaScript automation solution created for the modern web this tool aims to enable frontend developers and QA engineers to write automation tests together. One of the goals of Cypress is to build a fast and reliable framework.

 

 

How to choose the right tool that fits your project?

 

First of all, you need to consider different factors like project goals, time constraints, technical knowledge of your team, etc. Let’s briefly discuss Selenium – one of the most popular solutions on the market.

Is it good for every project?

Selenium is a very powerful tool. In most cases you wouldn’t use the whole power of it, sometimes you just need a fast solution. Let’s imagine that you have a web-based project where the goal is to decrease time and testing effort.

Requirements of the project are:

 

  • Build an automation framework that will include Smoke suite with the ability to extend in the future.
  • Integrate it with CI.
  • Run tests at least in one browser with the ability to extend this in the future.

 

Selenium is a good tool for that but it’s not the fastest solution for writing tests. If you look for something faster you should consider Cypress as it is one of the fastest solutions for writing tests. It has several key features that are making it so popular nowadays and distinguish it from the others. For example, Cypress has build in automation screenshots and video recording. You don’t need to spend time adding screenshot methods in every test. Also, Cypress handles Retry-ability in each and every command for UI interactions. Before running any of the commands, Cypress is checking the current state of the DOM and performing some actions like:

 

  • Ensure element is not hidden
  • Ensure element is not disabled
  • Ensure element is not detached
  • Ensure element is not read-only
  • Ensure element is not animated
  • Ensure element is not covered

 

For example, you want to find an element cy.get(‘element’) Cypress will automatically wait for this element. Same behavior for assertions. Unlike Selenium where you should spend additional time for creating custom Explicit/Implicit waits with different timeouts and conditions. Another important benefit versus Selenium is that Cypress is working directly with the browser. You don’t need to install different additional  WebDrivers for each and every browser implementation.

However, as every solution, Cypress has it’s own pros and cons.

 

 

Pros

 

It’s fast, simple, has good documentation and customer support.

  • Easy to install
  • Use Mocha, Chai, Sinon by default
  • Visual Test runner (this is one of Cypress killer feature)
  • Dashboard  (500 free test records for Non-billable plan)
  • CI support
  • All Cypress commands and asserts include waits
  • Cypress automatically takes screenshots on failure and records a video of the entire test run

 

Cons

 

  • Cross browser support is still unstable
  • Cypress isn’t supporting multiple tabs in one test
  • You can’t run multiple browsers in one test
  • iFrame support is limited
  • Same-origin in one test

Cypress recommends not to use multiple domains in one test. Imagine that you are testing e-commerce app and using PayPal as a payment system. In your test user is navigating to the payment page and clicks on PayPal icon/link. The user is redirected on PayPal payment page with a different domain. In this case your test will fail with cross origin error.

 

Cross origin error

 

The rules are:

  • You can visit two or more domains of different origins in different tests.
  • You can visit two or more sub-domains in one test.

 

Visit two or more sub-domains in one test

 

  • You cannot visit two domains of different origins in the same test.

 

Error-Two domains of different origins in the same test

 

There is a solution for this problem in Cypress docs.

 

 

Cypress structure

 

After installation, you can notice that Cypress has a predefined structure for building a framework. You can build your own structure, but there are some useful folders, like: “Integration” by default its purpose is to store all test cases. All your test cases will be visible in Test Runner:

 

Cypress Integration Tests Folder

 

“Fixture” folder is for storing test data (e.g. user.json). “Support” folder could be used for storing your Page objects, helpers etc. Also you can create your custom commands and override Cypress default commands via “support/commands.js” file. “Screenshots” and “videos” folders automatically will be created after test run.

 

 

Cypress killer feature

 

Cypress has a visual Test Runner. This is one of the best features for UI automation. To open Test Runner you just need to run the command below in your console.

 

Open Test Runner Command

 

Cypress visual Test Runner Interface

Command Log displays all interactions within the page through Cypress commands (cy.visit, cy.click, cy.type , etc.) Also Cypress logs your every command by default and displays it in Command Log.

Cypress will re-run your test and log all your interactions in Test Runner each time you save your code. Your productivity is several times higher. You don’t need to re-run your test manually each time you make some changes. Cypress will do it automatically.

 

Another great feature of the Test runner is “Time-traveling”. This is real time saver feature. It makes test inspection really easy.

So, how it works?

Every run Cypress takes before/after snapshot for a different event (for example click, type, visit, etc.). And you can cycle through them.

 

Time-traveling Test Runner feature screenshot

 

This feature is not always working as expected. Depending on how fast your page loads, you can see a snapshot of the same page or blank screen as the page is in the transition state.

Also Cypress has some special commands for debugging.

cy.debug()

cy.pause()

cy.pause() it pauses your test as if you put ‘breakpoint’ in your code and gives you the ability to step forward through each command.

 

Pause test special command for debugging

 

More interesting Test Runner features can be found on Cypress doc.

 

 

Conclusion

 

Here at Sceel.io we switched from Nightwatch.js to Cypress.io  and it was a really quick and painless transition. As Cypress gives you all that you need for a quick start with automation. It has good and detailed documentation. Easy to set up and run. It has a lot of features that improves your productivity.

Cypress is made with one goal to make UI testing easy.