Cypress Hybrid (UI + API) Testing Automation

Let me start out by saying thank you to the contributors of this blog Omkar Kulkarni and Mohit Agarwal. I owe it to them for sharing their in depth knowledge about Cypress and also for their flawless implementation of Cypress UI & API test cases.

I know we all have heard of Cypress UI test automation and Cypress API test automation, but independently. Have you ever thought of combining them and implementing this together? Certainly, sounds cool, but is it that simple to implement?

The answer is Yes, Of Course! We have made this possible. In this blog post, I will share our experience with Cypress Hybrid automation technology integrated with BDD.

We had used Cypress in our previous Cypress Automation projects, and were fascinated by the following automation features:

What we liked:

  • The installation is very simple and straightforward.
  • There is a great automation community.
  • Cypress runner executes the test within the browser so the test execution is faster.
  • The Cypress UI test runner provides metrics like test status, logs, and a web test execution preview.
  • It is easy to get the UI locators using the Cypress UI test runner’s open selector playground.
  • It offers parallel and cross browser test execution with CI/CD.

What can be improved:

  • Cypress by default does not provide support for BDD.
  • Cypress cannot work with multiple windows.
  • Cypress cannot run for multiple domains within same test case.

Before we deep dive into the process of integrating Cypress hybrid automation technology with BDD, let us first get ourselves acquainted with Cypress.

Cypress is a free, open-source, locally installed Test Runner and Dashboard Service that is used for recording your tests. It is a frontend and backend test automation tool built for the next generation of modern web applications. It is useful for developers as well as QA engineers to test real-time applications developed in Node and other front-end technologies.

We have defined our API test cases for performing CRUD operations (C: Create, R: Read, U: Update, D: Delete).

The Cypress structure that we have used for current automation is as follows:

In this hybrid automation, we have implemented all the following aspects to perform in the best way as per the business needs:

  • Build and institutionalized best practices in Cypress framework.
  • Operationalized processes between Test Management System (Cucumber.io), Defect Management System (Jira), CI/CD System (Jenkins), Cypress Dashboard and Test Automation Framework (Cypress).
  • Automated scenarios using API calls wherever possible to reduce execution time.
  • Test Data Management using JSON/CSV.
  • Integrated with Cucumber Reports.
  • Integrated performance plugins in Jenkins.
  • Captures execution video and failure screenshots for maintaining history.

Technologies Used

Following were the technologies used in development:

  • ReactJs – JavaScript web application framework for building rich user interfaces that run in-browser.
  • Python – Python as a programming language offers several advantages for software development.
  • GraphQL – Used for API call validations.
  • REST API – An application program interface that uses HTTP requests to GET, PUT, POST and DELETE data.

Following were the technologies used in testing:

  • Cypress – Used as an all-in-one testing framework, assertion library, with mocking and stubbing, all without Selenium. Also used for debuggability and real time reloads since it runs much faster.
  • io (HipTest) – Used to succeed with BDD.
  • Jira – Used as a bug tracking tool that reports all the issues related to the software.
  • Jenkins – Used to trigger automated daily jobs and publish test results.
  • GraphQL – Used for API call validations.
  • REST API – Used for testing RESTful APIs

 

Jenkins Job Execution

Jenkins Freestyle Project is a repeatable build job, script, or pipeline that contains steps and post-build actions. It is an improved job or task that can span multiple operations. It allows you to configure build triggers and offers project-based security for your Jenkins project. It also offers plugins to help you build steps and post-build actions.

The types of actions you can perform in a Jenkins build step or post-build action are quite limited. However, there are many standard plugins available within a Jenkins Freestyle Project to help you overcome this problem.

In this project, we have created a Jenkins job, installed the required packages and entered window batch commands. Upon triggering the job, we can check the execution on Console.

Console Output page:

OR

The build execution can also be checked on local:

1. Run following commands as per environment:

2. Cypress Open opens the Cypress Runner with the list of installed browsers in the system. We can choose the feature files to run:

3. After running the feature file, we can see the tests on left and the execution on the right.


BDD – Cucumber Reports

Whenever we do test execution, it is also required to understand the output of the execution. Whether it is manual execution or an automated, the output of the same must be in format, which immediately depicts the overall results of the execution. Hence, our framework also has the same capability to create output or generate test execution reports. We can see the reports for the build (the feature files and scenarios).  We can see the build execution time and also navigate to details of each scenario.

Execution Video

Cypress records a video for each spec file when running tests during cypress run. Videos are not automatically recorded during cypress open. Videos are stored in the videos folder which is set to cypress/videos by default.

To view the execution video, go to Cypress > Reveal in File Explorer > Cypress > Videos.

Bonus Benefits

  • Cost Benefit: Cypress is an open source.
  • Time Saver: Fast to setup, implement, execute, and debug.
  • Shorter Regression Cycles: Reduced regression test execution cycle in terms of resource efforts. Manual execution is always at higher side however, automating the same is gradually decreasing the minor maintenance. Manual efforts saved by 60%.
  • Extended Test Coverage: The manual regression covered 35% of test cases whereas, with automation, the team was able to cover 65%.
  • Performance: Using hybrid instead of independent automation, for few of the scenarios the build execution time reduced from 15 mins to 2 mins.

 

See what I mean? Integrating Cypress with BDD truly isn’t as complicated as it seems. So, give it  go and stay tuned for the upcoming Whitepaper, where we will be sharing the details of how we implemented the Hybrid feature.

And until then, reach out to us at Nitor Infotech to know more the advantages of integrating Cypress hybrid automation with BDD and take a look at our BDD whitepaper which further elaborates on the various aspects of BDD.

About Priya Patole

Lead Technical Writer

  • Technical Writing
  • Business Strategy
Priya has over 7+ years of combined experience in the areas of Technical Writing, Project Management and Business/Software/Technical Analysis in an agile environment. She has worked in multiple domains, mainly in the fields of mortgage and Healthcare. Priya has an in depth knowledge of Software and Document Development Life Cycles. ITIL Foundation 2011 certified. Priya works through each project resolutely and loves to delve deep in them- right to the very core.