Cypress is a free and open source automation tool, MIT-licensed and written in JavaScript. As of this writing, it has over 19.3K Stars on Github and is used by organisations such as NASA and DHL. With help of Cypress End to End test , integration and unit tests are easy to write and debug. Cypress Tutorial
Along with the test script runner, Cypress provides you a visual interface to indicate what all tests and which all commands are running, passed, or failed. It allows us to test highly interactive applications and carry out different tests such as manipulating the DOM, asserting that if some element is available or present on the screen, reading or writing data into/from fields, submitting forms and even redirecting to a different page without actually making direct modifications to your code.
Cypress is built and optimized as a tool for local development. In fact, after using Cypress for some time, you may be tempted to do all of your development within it since it provides a platform to quickly debug and maintain your code easily.
Cypress Tutorial - Basics
Introduction and Architecture: Cypress is a next-generation front end testing tool constructed for modern web applications. Most testing tools (like Selenium) operate by running outside of the browser and executing remote commands across the network. But the Cypress engine directly operates inside the browser. It enables Cypress to listen and modify the browser behavior at run time by manipulating DOM and altering Network requests and responses on the fly. Cypress Tutorial
Node Installation and Setup: Node.js is a server-side runtime environment that is built on top of Chrome’s V8 JavaScript engine. It is open-source, totally free of cost, and millions of developers use it across the globe. It is a runtime environment. Additionally, it includes everything you need to run a program written in JavaScript. You are required to Install Node JS framework before start building your Node.js application.
Install VS Code: Visual Studio Code editor is a lightweight but strong source code editor that runs on your desktop and is available for Windows, macOS, and Linux. Visual Studio Code has built-in support for JavaScript, TypeScript, and Node.js and has an extensive ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
Cypress Installation and Project Setup: Cypress can be downloaded directly from the Cypress CDN (https://download.cypress.io/desktop). The direct download will always download the latest version for your platform. It will download a zip file, which can be extracted by the user. and it can also be Downloaded using npm. It also explains how to set up a basic project with package. json and cypress installed with it. Cypress Tutorial
Cypress Test: The basis of Cypress is Mocha and Chai (one of the famous assertion libraries in JavaScript), and it adheres to the same style of writing test cases as will be used by any other JavaScript-based framework. We will use the default folder structure provided by Cypress to manage and write our test cases in the Cypress Workshop project and will learn how to operate Cypress with its basic test case.
Cypress Test Runner: Cypress has a unique test runner that allows us to see commands as they execute. Additionally, it also shows the real-time run of the application under test. We will complete the development of our first automated test case using Cypress and we will be executing that test case with the help of the Cypress Test Runner. We will also learn about different components Test Runner has and how we can operate that using the terminal.
Locator in Cypress: Locators are the backbone for all automation frameworks for Web-based applications. Additionally, a locator is an identifier that tells any automation tool that GUI elements ( say Text Box, Buttons, Check Boxes, etc.); it needs to operate. Following the same concepts, Cypress also uses the locators to identify the UI element for the application under test. Cypress Tutorial
Get and Find Command: Cypress provides two essential methods get() and find() to search for the web elements based on the locators. The results for both of these methods are almost identical. But each has its importance and place of implementation. Subsequently, in this article, we will be covering aspects detailing where get() and find() methods that can be used during the web test automation using Cypress.
Cypress Asynchronous Nature: Asynchronous programming is a means of parallel programming whereby, a unit of work runs separately from the main application thread. Additionally, it notifies the calling thread of its completion, failure, or progress. These types of programs are “non-blocking.” When you execute something synchronously, you wait for it to finish before moving on to another task. On the other hand, when you run something asynchronously, you can move on to another task before it ends.
Handle Non-Cypress async promises: We know that Cypress internally handles the asynchronous behavior of its commands and still provides a seamless, sequential, and consistent execution of the test cases. Still, there can be situations, such as combining the Cypress commands with third-party libraries or JavaScript commands, where we have to handle the async promises or commands explicitly. We will learn that how Cypress can help in managing these Non-Cypress Async Promises explicitly
Cypress Assertions: Assertions are the validation steps that determine whether the specified step of the automated test case succeeded or not. In actual, Assertions validates the desired state of your elements, objects, or application under test. Eg. assertions enable you to validate scenarios such as whether an element is visible or has a particular attribute, CSS class, or state. It is always a recommended practice that all the automated test cases should have assertion steps, otherwise, it will not be feasible to validate whether the application reached the expected state or not. Cypress Tutorial
Interacting with DOM Elements: Each UI automation tool provides some APIs or methods to interact with the web elements, so the designated operation can be performed on the UI element. In addition to this, these methods also assist in the needed user journey simulation. Continuing the same practice, Cypress also provides multiple commands which can simulate the user's interaction with the application.
Cypress Advance
Cypress Hooks: During the development of any automation framework, one of the key concepts is handling the pre and post conditions for a test case or test suite. There can be multiple situations where a specific action needs to be performed before/after either each test case or before/after all the test cases in the test suite. Cypress also provides Hooks which help in performing a particular set of actions just before/after each test case or before/after all the test cases in the test suite.
Fixtures in Cypress: While designing a Test Automation Framework, one of the primary requirements is to segregate the test scripts from the test data. Additionally, if the same framework can provide the functionality to mock the backend/third-party requests and offer the capability to test the frontend independently, it will be the icing on the cake. Cypress provides both of these functionalities, which we can quickly achieve with the help of Fixtures in Cypress.
Custom Commands in Cypress: All the automation tools provide a set of commands which perform a designated action and helps in simulating a user behavior. Following the same, Cypress also provides a set of commands which affect the user actions. But it also provides an added functionality that you can define a command of your own. These commands are Cypress custom commands.
Page Object Pattern in Cypress: Designing an effective test automation framework is an art. Moreover, it needs viewing with different lenses like avoiding code duplication, maintainability, and improved readability of code. Various design patterns got designed and developed to standardize these aspects of software development. One of the essential design patterns is the “Page Object Pattern”. Cypress provides inherent capabilities to develop test automation frameworks very easily and quickly by implementing the “Page Object Pattern”.
Configurations in Cypress: One of the essential characteristics of all the automation frameworks is to provide a means to implement and maintain the project properties in some configuration files. As per the standard definition, the config files keep some initial settings and configurations for the program or the framework. Consequently, following the same pattern, Cypress also provides specific configurations which initially have particular default values, and on a need basis, these values can be overridden by the users.
Environment Variables in Cypress: The Environment Variables are the variables whose values are set at the level of the operating system. It is a key-value pair that sets at the system level and is accessible to all the applications in that context. All the programming languages and automation tools provide features to access and set values for the environment variables. On the same lines, Cypress also provides features to access and manipulate environment variables.
Cypress Dashboard Service: With the emerging technology stack, all the software services are moving towards cloud-based hosting’s, instead of being on-premise. The same is true for automation frameworks. Moreover, multiple tools and organizations are providing various cloud-based services that either provide extended capabilities to the automation tools or even provides a complete cloud-based testing service. Similarly, Cypress also provides a few of its services as paid cloud-based offerings. One of which is the Cypress Dashboard Service, which proves very handy and useful when you are running the Cypress test cases in a CI environment.
Screenshots and Videos in Cypress: Every test automation framework that we create in today’s world is run either from the command-line or using CI/CD tools such as Jenkins, without any human interference. Also, whenever your test fails due to any reason, then your automation tool should be smart enough to straight forward tell you the reason for failure or give you pieces of evidence that can help you in debugging the cause of failure. Capturing Screenshots and Videos during the test runs make it very easy to debug any of the issues during the test run, and the maximum of the UI automation frameworks provides at least one of these qualities. Cypress also follows the same market trends and provides the capabilities to capture both screenshots and videos during the test run.
There are many more articles planned for Cypress Tutorial series, please stay tuned with us at TOOLSQA. Happy Learning.
However, a website can be tested in a number of ways that depend on your requirements, budget, and use cases. For a simple website targeting a couple of browsers, local testing is more than enough. But when the matrix goes high and the requirements become complex, it is better to go for an online tool such as LambdaTest that can help you with their ready-to-use infrastructure and all the modern integrations such as Jenkins and Cypress.
If you want to learn more you can look at this video series: ++Cypress video series++
