End to End Testing with Cypress

Owned by Ewa Kantorska (Unlicensed)
Last updated: Oct 26, 2021
9 min read

 

https://app.pluralsight.com/course-player?courseId=d3324477-3780-4dac-9dbb-1b8361f3e4ef

Course (video) provided by:

Instructor: Fernando Avindra, Company: Array (Software Consulting Company -> helping the client to find the best solution for 2E2 – end to end solution).

Twitter: @avindraferando

GitHub: avindrafernando

 

=====================================================================

 

When we start a new project, at the beginning we invest a lot of time in Unit Testing. Eventually we are going to look to a tool to automate Unit Testing.

Testing Pyramid

Why set up 2E2 (end to end) testing can be very challenging. Why?

  • First can be: you have flaky tests – they past most of the time like 60% but it fails when you try to deploy may flaky test, so you disable your tests.

  • Second reason is 2E2 testing could be slow. In many situation test feedback could be so slow (taking days, weeks or even months. It takes too long. So we want to minimize feedback time to have more fun.

  • Timing issues, we know that testing is taking a time but we would like to have the results in the seconds not even in the minutes. You don’t want to waste the time.

  • We know that timing issue equals cost. So try drive 2E2 test could be costly.

Testing for web application 2E2 prior Cypress required to think about framework. To test that people were using application like: Mocha, Jasmin, QUnit, Karma, etc. Also some other tools for assertion library like: Chai and Expect.js to see if their application is doing what supposed to do.

 

Then appeared tool called: Selenium, which is very popular today to test end to end, interact with your application and runs automation. They are different flavours of Selenium that with different abilities like Nightwatch or Webdriver. Other tools to help us add additional libraries like: Sinon or TestDouble.

Finally came up a tool that has all of the resolutions and is good not only for writing and running but also for maintaining the test. That what Cypress has enabled us to do.

Cypress has all-in-one: testing framework, assertion library, with mocking and stubbing, all without Selenium.

 

WHAT IS SPECIFIC ABOUT CYRESS?

  • Cypress has great UI. What it does mean? You can interact with when you execute your test and it gives a lot of meaningful feedback.

  • First, it has a tool to debugging called Time Travel and Debugging. Write your test, click Save and when your click test runner, right the way we can see our application is running the test as you specified. When you add “pause” command to your script (cy.pause()) and run your test, you can see on the screen what is executed in those three panels step by step. You can watch three panels simultaneously when your test is executed: on the left panel with your script, in the middle panel with command log and on the right with your application.

  • Second great thing that Cypress gives us ability to have Real Time Reloads. That is really cool feature that Cypress provides us with.

  • Third great feature of Cypress, probably the biggest one is an Automatic Waiting. Cypress is a tool that knows about your network request when you are sending and you are receiving.

  • Cypress has also an Ability to Take Screens and Videos of what happens at each step. By default Cypress generates screen shots when the test fails. Also it generates videos by default and compresses those videos. So, you don’t want to waste the space. To get high quality video you need to disable compression. You run this on CIN environment, so you can see what happens. Why the test failed and on what step. So you can see really quickly what is going on.

Add cy.pause() command and run again.

After adding cy.pause() command, run the test again. You should be able see step by step when code is executed in all panels at the same time. It’s called Time Travel and Debugging.

 

 Also, at same time you can see what is going on the Console:

 

Second great thing is that Cypress gives us ability to have Real Time Reloads. Write your test, click Save and right the way we can see our application is running the test as we specified.

Change your code to “False” and run it.             expect(true).to.equal(false)

Automatic Waiting – third feature of Cypress, probably the biggest one. Cypress is a tool that knows about your network request when you are sending and you are receiving.

You can take control over of those request by (Network Control):  You can spy on them: by spying – you make a request by you actually are spying what is going on.

Stubbing is is a way to modify a function and delegate control overs its behavior to you (the programmer).

A stub is most commonly used in a unit test but is still useful during some integration/e2e tests.

 

Clock - there are situations when it is useful to control your application's date and time in order to override its behavior or avoid slow tests. With cy.clock() you can control. If in your test you have to need wait for some time, you can actually trick the clock to not waste your time:

  • Date

  • setTimeout

  • setInterval

 

CYPRESS ALSO COMES WITH A LOT OF TOOLS BUILD IN:

 

  • Lodash - a JavaScript utility library delivering consistency, modularity, performance, & extras.

  • Sinon for network stubbing

  • Moment – for time manipulation

  • JQuery

  • Mocha

Finally, Cypress has an ability to take screenshots and videos when your test fails.  Also generates and compresses and high quality videos. So, you don’t want to waste the space. To get high quality video you need to disable compression. It is possible to disable and unable the compression. It can be run on CIN (Convert Interconnected Network) environment and you can see what happens, why the test failed and on what step. So you can visually and quickly see what is going on.

 

CYPRESS ARCHITECTURE

How all this really work? How Cypress is different from other apps?

What is Cypress API? Cypress is an open sourced JavaScript-based test automation framework that is typically used for testing web applications that leverage modern JavaScript frameworks.

 

Cypress is essentially an electronic app. It can interact with your application server. You can interact with them when Cypress runs. Cypress has a browser inside of it. Because of that reason, it is able to can control everything what is going on in and out of the browser. Has an access of all of the browsers of APIs. It knows when request has been made and complete. Because of this “inbrowser” tool. And testing time what it is really doing? It is firing your application in this “inbrowser” then you can interact with you application server when you run your test. So can make request and you can get the response back.

 

You can take a step further. Since Cypress is controlling all of this and it can also control your Network request and you can intercept that. In that case your request doesn’t need to go event to your server.

In some scenarios, you don’t even have to reach your application server. In that case your request will be intercepted by Interceptor (XHR), it doesn’t even have to reach your server. In that case your request goes to that (interceptor) and response gets back from that. In this scenario your will be mocking so you can go much faster.

That is in high level how the Cypress works.

 

HOW TO GET START CYPRESS?

Install via npm:

When you do that, you can see that Cypress automatically generates a file and folder with this file in it.

“cypress.json” file it’s basically file configuration.

It’s also generates a folder called “integration” when you will be putting all your tests:

Inside this folder your organize your tests however your like, (adding subfolder, etc).

Another valuable folder is “Fixture folder”

It houses all mocked data for certain scenarios. So when you run your test, you can refer to that folder.

Next one is Pluggins folder. This folder is helpful when you want to extent Cypress functionality.

When try to run certain task to automate things, you can put all that code inside this folder to extend the feature of Cypress.

Lastly when you run your test, you have a lot of command code. You will be creating, removing a lot of data or manipulating a lot of data. And also a lot of repetitive code which Cypress puts that in Support folder.

How do you run Cypress? It can be in two ways. You can run “npx”, it will find and executable path:

 

If you run in CIN environment you will use “run” command. It will run everything on your terminal. When you fires up, it’s open you Welcome screen”.

 

CYPRESS LIMITATIONS

Also called “Trade-offs”.

Permanent Trade-Offs:

  • Fist trade-off limitation is: it’s not really “General Automation Tool”. Cypress relies on the browser, it’s not good for the applications which are not web based.

  • Second limitation is: it doesn’t support multiple tabs by design. It things that this scenario can be resolved in different ways. It has an article about it and solution how you can address that.

  • For the same reason: it can be fired up the two browser at the same time.

Again, Cypress is a tool that runs commands inside browser.

  • So only language that it speaks is JavaScript. That is by design.

  • Each test bound to single origin. For example, you cannot visit at the same test: Google.com and
    Amazon.com. You can test subdomains of one of it but you cannot visit two separate domains at the same test.

 

Temporary Trade-Offs:

  • It’s relying on the Mocha Trade-Offs Framework.

  • Other limitation is that it only works in Chrome, not able to support other browser at that time.

These temporary trade-offs with can be changed in the future by Cypress team.

 

To see how the Cypress actually is running, you need to login to PluralSight and start to follow the course on from 19 min and 45 sec: Let’s go started running “todos” application:

https://app.pluralsight.com/course-player?clipId=a57d8964-ce01-4ddf-abb7-715206a39d75