CodeMash 2020, PluralSight Course:
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.
...
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.
...
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 are 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.
...
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
setInterva
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?
...
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.
...
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”.
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
...
CYPRESS LIMITATIONS, also CYPRESS LIMITATIONS
Also called “Trade-offs”.
Permanent Trade-Offs:
...
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
...