Skip to content

Cypress Automation framework for Typescript based apps using BDD with HTML report

Notifications You must be signed in to change notification settings

MULKHI/cypress-v10-cucumber-typescript-html-report

Repository files navigation

cypress-v10-cucumber-typescript-html-report

Cypress Automation framework for Typescript based apps using BDD-Gherkin style (Cucumber)

Purpose of the project

Cypress awesomness and its power can be enhanced if it is integerated with BDD (Cucumber) so that the tests can be written in natural language and test definitions can be written in Typescript. This project provides two different types of reporting features. with basic executable tests to demonstrate how Cypress + Cucumber works hand in hand.

Why cypress with BDD Framework

Cypress automation tests can be written directly in Typescript or Javascript and easy test case writing (written format can be understood by anyone). This project also provides buisness oriented reporting of tests in natural language that can be understood by different stakeholders (Devs + QA + Business Analyst + Product Owner).

💻 E2E Testing

Integrated with:

(+ bundlers: https://github.com/badeball/cypress-cucumber-preprocessor/tree/master/examples)

Installation

npm install @badeball/cypress-cucumber-preprocessor
npm install typescript
npm install @cypress/webpack-preprocessor
npm install ts-loader
npm install webpack
npm install multiple-cucumber-html-reporter

👨‍💻Execute Tests

Run the Cypress Tests in headmode

npx cypress open

Or

Run the Cypress Test in headless mode

npx run cypress run --e2e

📄Test Reports

This project provides two different types of reporting features.

  • Command line output
  • HTML Reporting using Cucumber

Command line output

When tests are executed simply using "npx run cypress run --e2e", the command line prints the following output after the successfull execution of tests, will get a report in the form of a video if Passing, and will get a report in the form of a video + screenshot if Failing.

Screenshot (311)

Cucumber HTML Test Report

node generate-cucumber-html-reporter.js

An HTML report is generated in the folder "output" directory that gives the following output.

Screenshot (312)

Report is generated using JSON + HTML and it is very useful if we want to integerate our project test results output with any system.

Contact me if you have any problem with this project

About

Cypress Automation framework for Typescript based apps using BDD with HTML report

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages