Introduction to Cypress Automated Testing Framework

Cypress is an end-to-end javascript testing framework that enables unit tests, integration tests, and end-to-end tests. In this post, we will touch upon the basics of installing and getting started with the Cypress framework and its advantages. 
Test Runner for Cypress is a free and open-source (MIT License) testing software and their Dashboard Service application provides multiple billing plans (including Open Source and Free) for CI integration purposes.
Cypress and Node Server Process work together to achieve success while testing. Cypress runs the tests in a unique interactive manner where users can see step-by-step test command execution and it’s output at the same time. Compared with Selenium, where test command execution happens via browser drivers, Cypress testing command execution takes place directly in the real browser.

Cypress features

• Waits for test command execution automatically and does assertions before the execution of the next commands.
• Captures the screenshot while executing test cases which helps in debugging
• Ability to debug test execution in a more efficient way since it provides the interactive test execution with Test Runner along with logs
• Is also able to mimic server responses
• Due to its architectural design differences compared to other test frameworks, it provides users with faster and more reliable test execution

Cypress Installation

Cypress can be installed using the npm package manager,

npm install cypress

Framework Components

Our current testing framework using Cypress is still evolving, however, the following are some of its components that play a part while executing particular test cases, Spec File: This file contains the It(){} blocks where test execution starts Page Object File: This file lists methods that contain the tests business logic. These methods contain the actual cypress commands (and selectors) that interact with the real application. Page Selector File: This file contains the actual locators of UI elements of a real application.Utility File: This file will contain the list of functions that need to perform some helper things like wait handling, reporting(In Progress), etc. Constants File: This file is used for holding any constants used throughout test files.

Workflow

1. Users need to open the real application for which the test needs to be written
2. Then identify the locators/selector that is required for a particular flow for that test. Add those to the Page Selector file.
3. Add the test steps in Cypress syntax in the form of commands under methods in the Page Object File.
4. Now call that page object method in the actual Spec File. 
5. There are multiple ways we can execute Cypress tests. If we execute it as part of the project structure we can make use of the ng tool.
   1. Users can execute the entire test suite with ng e2e command.
   2. For executing particular test users can run, ng e2e projectName –spec=Spec File Path

Cypress advantages

• Quick setup and execution. Tests and their execution can be set up very easily and quickly.
• The time needed to start writing tests is less as compared to other frameworks
• Can be integrated with any CI tool with the ability for headless execution with command-line options
• Captures screenshots of test execution automatically in case of failure. This is particularly helpful while debugging and diagnosing problems
• It automatically reloads Test Runner once any changes have been done to the test

References

1. Assertions. (n.d.). Cypress Documentation. Retrieved August 27, 2020, from https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions 
2. Best Practices. (n.d.). Cypress Documentation. Retrieved August 27, 2020, from https://docs.cypress.io/guides/references/best-practices.html
3. Installing Cypress. (n.d.). Cypress Documentation. Retrieved August 27, 2020, from https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements
4. Reporters. (n.d.). Cypress Documentation. Retrieved August 27, 2020, from https://docs.cypress.io/guides/tooling/reporters.html#Custom-reporter
5. Why Cypress? (n.d.). Cypress Documentation. Retrieved August 27, 2020, from https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell

If you liked this post, here are a few more you would enjoy,

• Performance Testing a Web Application in Healthcare
• Fixing Broken Teams – Throughput on a Budget
• Web Scraping: Introduction, Applications and Best Practices
• Synerzip Test Automation Framework