Hi folks,
In this blog, we will try to learn about cypress, its architecture and its working. Hence, without much ado, lets get going.
Cypress – what is it?
Web testing has become one of the crucial parts of modern software delivery practices. As a result, this has increased the demand for stable web test automation tool. There are a number of open-source automation tools available in the market and some of them have been there for a long time now. Cypress is one of these open-source popular tools which has earned a name for itself in quite a short time for Web integration and End to End UI test automation.
Cypress is a next-generation front end testing tool constructed for the modern web. The idea behind creating cypress was to aim the key pain points that the testers face while executing their testing. For example, synchronization issues, the inconsistency of test due to elements not available in the DOM.
Cypress is built on Node.js and comes packed as npm module. Since it is built on node.js, the test we write using cypress are in javaScript only. However, most of the coding can be done by using Cypress inbuilt commands, which are way easier to understand.
Cypress Architecture
Let’s see some of the main key features of cypress’s architecture.
- Most testing tools, such as selenium, operate by running outside of the browser and executing remote commands across the network.
- However, Cypress operates inside the browser directly
- In simple words, we can say that it is the browser only that executes our test.
- This property of cypress enables it to listen and modify the behaviour of the browser at run time by manipulating DOM and altering Network requests and responses.
- Other tools, like selenium, has different drivers for different types of browser, which in turns interacts with the rowser instances for the execution of the commands.
- On the other hand, all the commands are executed within the browser in Cypress.
These are some of the key points of cypress architecture, for further understanding of the architecture, let’s explore about cypress’s components.
What are the components of Cypress?
It has two main components of cypress:
- Cypress Test Runner
- Cypress Dashboard
Test Runner – As the name suggests, it runs the test. It is an interactive runner that shows the cypress command being executed in the left side dashboard. It has some more areas, that are worth pointing out.
- Test Status – Shows the summary of the test, showcasing the number of passes and failed test cases.
- URL Preview – shows the URL and helps to track the URL routes
- Viewport Sizing – Sets the size of the test window.
- Command Log – It shows all the logs that we get while interacting with the web elements, and the logs that we get while executing the tests.
- App Preview – Shows the real-time interaction with the web application.
Cypress Dashboard – The cypress dashboard use case is very much specific to CI/CD integration. It is a service that provides you access to recorded tests – typically when running Cypress tests from your pipeline. The Dashboard provides you with insight into what happened when your tests ran.
Key Points of Cypress
- It is a next-generation tool, which manipulates the browser to run the test execution.
- It takes screenshots automatically on failure, or record videos of your entire test suite when running from the CLI.
- With Cypress, there is no need to put explicit waits or sleeps to your tests. It automatically waits for commands and assertions before proceeding.
- It can take snapshots of the application when the tests are running. Then as a tester, we can hover over each command in the Test Runner panel to see what happened at each step.
There are some points on the negative test that are worth pointing out. These points are:-
- It is relatively new, and it does not have the vast community that Selenium does. But in recent years, it has gained momentum, and the Cypress community is increasing at a great pace.
- Because it runs inside the browser, there is no support for multiple browser tabs or popups. You cannot use Cypress to drive two browsers instances at the same time.
Thank you. I hope you may found this useful.
Refrences
\
