What is Cypress?

It is a next-generation front end testing tool constructed for the modern web. This tool addresses the critical pain points developers, and QA engineers used to face when testing modern applications, E.g., synchronization issues, the inconsistency of tests due to elements not visible or available.

It is built on Node.js and comes packaged as an npm module. As its basis is Node.js, it uses JavaScript for writing tests. But 90% of coding can be done using Cypress inbuilt commands, which are easy to understand.

It also bundles with jQuery (Javascript Library) and inherits many of jQuery methods for UI components identification and simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.

What makes Cypress a unique tool?

There is multiple uniqueness, which makes Cypress one of the quickly adaptable choices for Web automation. Few of them are:

• It delivers fast, consistent, and reliable test execution compared to other automation tools because of its architectural design.
• Flake Resistant - Cypress automatically waits for commands and assertions before moving on. No more async issues.
• Ability to test edge test cases by mocking the server response. (Network Requests)
• Debuggability - It takes snapshots as your tests run. We can hover over each command in the Command Log to accurately see what happened at each step.
• View videos of the execution of your entire tests when running from the Cypress Dashboard.

There are some drawbacks, and some of them are notable, so it would be remiss not to list them here -

• It is relatively naive, 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.
• As stated earlier, it's JavaScript or bust. You will not be able to write cypress tests in the old static languages such as C# and Java. On the contrary, as these days, JavaScript is one of the biggest buzzwords for frontend developments, using the same language for test automation bridges the gap between the developers and the QAs.
• 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.
• Before Cypress 4.0.0, it used to support only Chrome and Electron. Cypress 4.0.0 includes support for?Mozilla Firefox?browsers (beta support) and?Microsoft Edge (Chromium-based) browsers, which is a big step forward for Cross Browser Testing in Cypress.
• No shadow DOM support. You can imagine the shadow DOM as a "DOM within a DOM". It is its own isolated DOM tree with its elements and styles, completely isolated from the original DOM. Also, even Selenium does not provide explicit support for working with Shadow DOM elements.
• It doesn't support?native?mobile apps, but it does?intend to support?mobileweb browsers in the future.

What are the components of Cypress?

It has two main components that come by default in its installation - Cypress Test Runner and Cypress Dashboard. One of them is used as a runner to run our Cypress test cases on the local machine, and the other tracks our runs and status from our Automation Suite.

Test Runner: It?runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test. Below are the key subcomponents of the test runner that we should pay focus while executing our test cases.

• Test Status: Menu shows you a summary of how many tests passed, failed, or in progress and time took for the test.
• Url Preview: shows you the URL of your test and helps you track any URL route.
• Viewport Sizing:?set your app viewport size to test responsive layouts.
• Command Log:?It shows you the command logs as it executes for all the tests that execute.
• App Preview:?you can see the test while commands execute.