Open source and free, Cypress is a JavaScript-based automation tool licensed under MIT. This framework is used by corporations such as NASA and DHL, and has over 19.3K stars on Github. Integration and unit tests are easily written and debugged using Cypress End to End test.
In addition to the script runner, Cypress provides a visual interface that allows you to see which tests are running, which commands are passed, or which commands failed. Apart from testing highly interactive applications, it allows us to perform various tests such as manipulating DOM elements, asserting whether some elements are available on the screen, reading and writing data into and from fields, submitting forms, and redirecting to a different page without actually altering the code directly.
The Cypress framework is designed for local development and is optimized for it. Cypress provides a platform that allows you to easily debug and maintain your code, so you might be tempted to use it for all your development.
In this blog, we will have a look at the components of Cypress and how you can utilise them to automate your tests.
Let’s first talk about the Cypress Architecture first.
Cypress Architecture:
The majority of testing tools such as Selenium, work by running outside the browser and running remote commands. Cypress, however, works directly, inside the browser. Your test code is actually executed by the browser. It allows Cypress to manipulate DOM and alter network requests and responses at run time to modify browser behavior. Your application can be tested in a brand new way with ultimate control over its functionality (front and back).
Cypress Features
In this section of the blog, we will have a look at why Cypress is popular and its salient features.
- A browser window with the application itself is used to run the tests
The most popular unit testing tools, such as Jest and Mocha, use a JavaScript browser emulator to execute tests, making them incapable of reproducing true browser behavior. Unlike Selenium and WebDriver.io, other end-to-end test runners run the application in the browser, but the tests are run outside the browser using a driver that sends commands to the browser. While Cypress’s application is waiting for its test commands to complete, it can retry the tests simultaneously. In the case of a temporarily disabled button, Cypress will automatically re-try the button, giving the application code a chance to fix it. Clicking the button enables the button, and the test begins. Because Cypress tests have built-in retries, some of the testing flake is removed, making Cypress tests more reliable (not all flake, though).
- A Continuous Integration Service running Cypress
The Cypress application runs on any operating system: Mac, Linux, and Window. It is built on top of Electron like VSCode as well as Spotify. Using npm install -save-dev cypress or yarn add -D Cypress, a developer can install Cypress. Cypress provides Docker images that can be installed and run right out of the box on most CI systems.
- Using Cypress to test network control and periodic network requests
By running E2E tests, you can verify that the application is making the expected network calls. Developers can run the front end without the back end, or with only some calls stubbed, using Cypress’ full network spying and mocking capabilities. Tests can verify the request and response data by using assertions against intercepted or observed HTTP network calls in the Command Log.
- Scalability and cross-platform coverage of cloud testing
By leveraging Cypress.io, other cloud vendors can extend the testing coverage and velocity of test executions by utilizing Cypress’ open-source and open platform. Cypress tests can be packaged, uploaded, and executed by a modern SDK that works across platforms, geographies, and languages like JavaScript, Cucumber, and TypeScript, according to the JSON configuration file. Additionally, teams are able to keep up agnostically with all the latest and beta versions of each browser as they are released, providing not only scale and the ability to maximize parallel testing across infinite browsers, but also the ability to keep up with all the latest and beta versions.
LambdaTest is a leading automation testing platform that executes and orchestrates tests quickly, scalably, reliably, and securely. With this tool, users can test web and mobile apps manually and automatically across 3000+ different browsers, operating systems, and devices. Organizations can achieve faster go-to-market by leveraging LambdaTest to ensure quicker developer feedback. LambdaTest serves the testing needs of over 500 enterprises and 1 million+ users across 130+ countries.
What are the components of Cypress?
Cypress Dashboard and Cypress Test Runner are the two main components included by default in its installation. On a local machine, one of them runs Cypress test cases, and the other tracks our run status using our Automation Suite.
- Cypress Test Runner:
It runs tests in an interactive environment that allows you to view the test application as commands are executed. During the execution of our test cases, we should pay attention to these key subcomponents of the test runner.
- Test Status:
A summary of the number of tests passed, failed, and in progress can be found on the menu.
- Url Preview:
You can track any URL route using the URL of your test.
- Viewport Sizing:
In order to test responsive layouts, set your app viewport size to the appropriate size.
- Command Log:
Each test’s command log is displayed as it is executed.
- App Preview:
The test can be seen while commands are being executed.
- Cypress Dashboard:
Cypress Dashboard gives you access to recorded tests – typically when running Cypress tests through your continuous integration provider. You can view the results of your tests through the Dashboard.
How To Execute Cypress Tests With Cypress Test Runner?
In this section of this blog, we will look at the steps through which you can automate your tests using a component of Cypress, Cypress Test Runner.
- Step 1:
In the Test Runner window, you can see the test case ” cypressTest1.js ” after you open the Cypress. If you have multiple test files, they will all be listed under the examples folder, and we can click on one specific spec file (cypressTest1.js) to see how it runs.
- Step 2:
Here are some other things we can do from the Cypress Test Runner. You can update your browser from the right-hand side under Test Runner. When a user launches the Cypress Test Runner, it tries to find all browsers that can run on the system. You can change the browser in the top right corner of the Test Runner by selecting the drop-down menu.
- Step 3
Using the test case you created in the runner window, you can run the test case by clicking on it, which will open a browser and run all the steps.
- Step 4
All details of the test are displayed on the left side panel of the Cypress test runner, while execution details are displayed on the right side panel.
We love how easy it was to run the test suite you selected by opening the Cypress UI, clicking on it, and viewing it in real-time. As we write our tests, we may also have to make changes to our code or add more steps or assertions. When you save code changes on your local machine, Cypress Test Runner detects them and starts running your test from the beginning.
How to use Cypress Dashboard and Execute The Test Cases?
Now, let’s look at steps to automate your steps using another component of Cypress, the Cypress Dashboard.
There are various features available in Cypress Dashboard related to projects and test runs. With Cypress Dashboard, you can keep track of all tests running in your CI pipeline and increase test velocity. A single web page displays test reports, status, and reports for all the test runs
- Step 1:
The “Runs” tab is located at the top of Cypress runner
- Step 2
To connect to the dashboard, click on “Connect to Dashboard” and enter the name of the project
- Step 3
From the “Create Organization” menu, choose a suitable option.
- Step 4
You can log in with a github account, for example.
- Step 5
In the above screen, click on “Create New Project” to start a new project
- Steps 6
The following steps will guide you through recording your first run.
- The first step is to add the ProjectID to your Cypress.json file.
- In the second step, Cypress should be run while passing the record key, using a command
- Step 7
Use the command “yarn cypress run – record — key aeed922c-98af-4143–9e77-f97c6c900754”
Cypress dashboard starts executing the test case. The results of the test case can be seen once the test case has been executed.
Cypress Best Practices You Need to Know
Once you have automated your tests, it is now time to optimise them. These best practices will help you to enhance your testing process. Have a look:
- Use It() blocks that work independently
The script for a test case should be written in the it() block. The “describe” block of a spec file contains multiple it() blocks. In this case, we should follow the coding standard that code written in one it() block should not be dependent on code written in another.
Using this method of coding allows us to run a spec file with multiple it() blocks (Example: 10 test cases) without worrying about whether the other blocks will fail since they are not dependent on each other. A dependent it() block, on the other hand, will cause the remaining test cases to fail.
- The use of dynamic waits
Some developers use the cy.wait(timeout) command to wait for API triggering to take place after they write code for page actions such as visiting a URL, saving, updating, or deleting.
- Identifying locators using “data-cy” attribute
There are some locators that provide the path of the locator using the ‘id’ or ‘class’ attributes.
- The use of hooks
Imagine a scenario where we have a specification file with 10 test cases inside it, and we need to write 2-3 lines of code common to each and every test case at the beginning of the test case. It is not a good practice to start each and every it() block with the same repetitive lines of code.
In order to resolve the problem, we must write the code in the beforeEach() hook. Each and every test case will be automatically executed by the beforeEach() hook.
The afterEach() hook can be used to write common code that will be executed after each test case has been completed. The before() hook can also be used to execute common code before all test cases in a specification are executed. After all test cases in a spec file have been executed, we can write common code to be executed after all the test cases have been executed.
- The use of comments
We should put comments before every block of code inside it() blocks so that when others view the code we wrote, they can quickly understand which functionality is being automated.
- The package.json file that defines “scripts”
Visual Studio code usually has a terminal option for running Cypress commands. To open the Cypress runner, use the “cypress open” command. “npm run cypress open” is the terminal command we use. The “cypress open” command should be written inside the “scripts” JSON of the package.json file.
- A clear() command can be used
To enter values in a text box, use the type() command and the cy.get() command.
Conclusion
Tests are executed directly in the browser by Cypress. Your tests will run on the same server process as your application, so you won’t have to worry about them slowing it down. Moreover, Cypress allows you to write faster, easier, and more reliable tests because it differs fundamentally and architecturally from Selenium. The Cypress browser testing tool is a great tool for testing functional applications online. With Cypress, we can write tests while developing our application and run them on all platforms at the same time. Debugging activities can be performed quickly and easily with this tool.
