Easy Way To Test Web Frontend Using Cypress

Cypress is an end to end testing tool based on React, Angular JS and Mocha BDD syntax. You can install Cypress as npm package or a desktop application. You can also integrate it with CI tool (Jenkins, Circle CI, Travis CI, etc.), Github, Slack, and others.

JavaScript End to End Testing Framework

Here are the steps to start doing a test using Cypress:

1. Install Cypress via npm
2. Write test script
3. Generate report using — reporter junit
4. Generate report using — reporter mochawesome for better view
5. Run Cypress Testing using Jenkins

1. Install Cypress via npm

Open Command Prompt and write this command below:

npm install --save-dev cypress

If you want to install cypress as a desktop application, you can download the app in https://download.cypress.io/desktop

2. Write test script with filename googlemapsSample.js

//googlemapsSample.js
describe('My First Test', () => {
  it('Search Google Maps', () => {
    cy.visit('https://maps.google.com')
 
//Get an input, type something then click button Search
    cy.get('.searchbox-hamburger-container').type('Golden Gate Bridge')
 cy.get('.searchbox-searchbutton-container').click() 
 
 //Verify search result (URL)
 cy.url().should('eq', 'https://www.google.com/maps/search/Golden+Gate+Bridge/@37.8199286,-122.4804438,17z')
  })
})

Run test script with command below on command prompt:

cypress run --spec 'your_testscript_path\googlemapsSample.js

cypress test report

If you want to run test in browser chrome, firefox, edge, etc. You can add — browser . The full command will be:

cypress run --spec 'your_testscript_path\googlemapsSample.js --browser chrome

3. Generate report using — reporter junit

For generating cypress test report, you can run the command below on command prompt:

cypress run --spec 'cypress\integration\samples\googlemaps.js'--reporter junit --reporter-options mochaFile=result.xml,toConsole=true

generated cypress test report with filename result.xml

4. Generate report using — reporter mochawesome for better view

Install mochawesome inside your project folder with command:

npm install --save-dev mochawesome

After mochawesome is installed, you can run the command below on command prompt to generate the test report:

cypress run --spec 'cypress\integration\samples\googlemaps.js'----reporter mochawesome

cypress test report using mochawesome

mochawesome package will generate 2 main files with format *.html and *.json.

You can check other files generated by mochawesome at https://www.npmjs.com/package/mochawesome

generated cypress test report using mochawesome

generated *.html test report using mochawesome

5. Run Cypress Testing using Jenkins

Before run Cypress on Jenkins, you need install cypress first, with step:

Click Manage Jenkins > Click Global Tool Configuration > Click NodeJS installations… > Fill Global npm packages to install to cypress > Click Save

Setting cypress package with NodeJS

After setting the global tool config, you can create Jenkins project with step:

Create new Freestyle project >Setting Build Environment (choose provide node &npm bin/folder to path) > Setting Build and choose Execute Windows Batch Command then write command syntax below > Click Save > Click Build Now

//command in Build
cypress run --spec 'your_testscript_path\googlemapsSample.js

Setting Jenkins’s Build Environment

If you want to trigger Jenkins Build periodically, you should set a schedule value with format Minute (0–59), Hour (0–23), Day (1–31), Month (1–12), Day of the week(0–6).

For example if you want to build Jenkins triggering daily at 08:30 in the morning, Monday to Friday, you can set schedule with value 30 08 * * 1–5

Build Jenkins Trigger daily at 08:30 in the morning, Monday — Friday

Setting Jenkins’s Build

Setting Jenkins’s Post-build Actions — Slack Notification

Click Build Now

Jenkins’s Console Output — Run Test is Success

You can see the generated test report with filename result.xml in Jenkins Project Workspace.

Jenkins’s Project Workspace View

After Jenkins build success, Jenkins will send notification to your slack channel.

Notification View on Slack after Jenkins Build is Success.

If you want send email notification, you can configure it in Post-build Actions.

Thanks for reading.