How To Start With Cypress Test Automation

Cypress is an open-source and free test automation tool, which relies on the power of javascript. It executes tests within the browser and makes the testing process easier and more reliable.

Table of Contents

Is Cypress Good For Automation?

The cypress official documentation says: Test your code, not your patience. It is really true in many cases. Let’s see how good is cypress in Test automation.

1)Architecture: Cypress does not follow the same architecture as follows the many selenium based tools available on the market

2)Cypress Works very well with all the modern Javascript-based frameworks like Angular, React, and Vue.JS well. There are no driver bindings hence the resolution of Ajax’s wait-related problems.

3)Cypress is much faster than selenium so the speed is not a problem.

4)Cypress supports End To End Testing very well. There is no need to add different libraries to do multiple things like API automation and Unit Testing in Cypress.

How To Start With Cypress Automation?

Pre-Requisites:

1)Install Node JS

2)Install Cypress

npm install cypress

3)Download any JavaScript editor like Visual Studio Code.

4)Create a folder

Launch VSCode and open the created folder and initialize it.

npm init

Once done, the package.json file will be created inside the project folder with the data we have given.

5)Finally run the below command

npm install cypress --save-dev

Cypress Runner

Cypress Test Runner helps to trigger the test execution. To Open the cypress test runner using the following command:

npx cypress open

The test runner window will show up with all the tests listed and we can run any test with a single click.

Cypress Folder Structure

1)Fixtures: Used to store test data in JSON Format. This data then can be used throughout the tests.

2)Integration: This folder includes all the test files.

3)Plugins: It includes an index.js file that can be used for configuration-related things. This file is automatically imported before each spec(test) file.

4)Screenshots: Cypress automatically captures screenshots when a failure happens during a cypress run.

5)Support: Used to put custom commands which will be applied to all spec(test) files.

Writing Your First Test In Cypress

Cypress Automation Example

The next step is to create a test file in your project folder. Create “sample.spec.js”.

https://www.wikipedia.org/
Validate the Page Title
Search for Google Wiki Page
Validate that the Google wiki page is successfully displayed after the search.

describe('Search for Google Wiki page from Wikipedia website', () => {
    before(() => {
        cy.visit('https://wikipedia.org')
    })

    it('Validate Page Title', () => {
        cy.title().should('eq', 'Wikipedia')
    })

    it('Search for Google Wiki Page', () => {
        cy.get('#searchInput').type('google')
        cy.get('button[type="submit"]').click()
    })

    it('Validate Google Wiki Page has opened', () => {
        cy.get('h1#firstHeading').contains('Google')
        cy.title().should('eq', 'Google - Wikipedia')
    })
})

Let’s try to understand the few keywords of the code written:

Describe: It Comes from the mocha framework which is a javascript test framework and it comes already bundled with Cypress. It can be considered as a collection of tests or a test suite.

it: This also comes from the mocha framework and represents a single test.

before: This runs before all the test cases. It can be considered similar to the @Before tag of TestNg or like the use of background keyword in Cucumber. Where we need to do certain actions like launching URL before every test case.

Cypress Commands:

cy.visit(): To configure the base URL.

cy.get(): To get the DOM element by using Selector.

type(): To provide the user input.

should(): For Assertion.

Login Page Automation

Let’s look at another example.

1)Visit the website.
2)Enter your Username and password.
3)Click on Login Button.
4)Verify HomePage.

describe('Testing Orange HRM application',() =>{
    it('Login app',() =>{
       cy.visit('https://opensource-demo.orangehrmlive.com/')
       cy.get('#txtUsername').type("admin")
       cy.get('#txtPassword').type("admin123")
       cy.get('#btnLogin').click()
       cy.get('#welcome').should('be.visible', {timeout: 10000})
     })

How To Use Cypress With Cucumber

We can use Cypress with Cucumber to introduce BDD in our test automation. To do that we need to add one plugin named cypress-cucumber-preprocessor. Execute the below command in the terminal:

npm install --save-dev cypress-cucumber-preprocessor

Go to package.json and add the below JSON

"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
    }

Open the Plugins folder and add the below lines in index.js

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber())
}

Go to cypress.json and add below. This is to add support for feature files to our Cypress configuration.

{
  "testFiles": "**/*.{feature,features}"
}

Now we are ready to write our tests in the Gherkin language. Create a new folder “Cucumber Tests” inside the integration folder and create a feature file inside it.

Login. feature

feature: Login

    Scenario Outline: Login to Orange HRM Application

    Given User is at the login page
    When User enters username as '<username>'
    When and password as '<password>'
    And User clicks on login button
    Then User is able to successfully navigate to homepage
      Examples:
      | username | password |
      | Admin    | admin |

Inside the “Cucumber Tests” folder create a subfolder having a similar name to the feature file i.e. “Login” and inside this folder create a step definition file Login.js and convert the code as mentioned below:

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'

Given('User is at the login page', () => {
    cy.visit('https://opensource-demo.orangehrmlive.com/')
})

When('User enters username as {string} and password as {string}', (username, password) => {
    cy.get('#txtUsername').type(username)
    cy.get('#txtPassword').type(password)
})

And('User clicks on login button', () => {
    cy.get('#btnLogin').click()
})

Then('User is able to successfully login to the Website', () => {
    cy.get('#welcome').should('be.visible', {timeout: 10000})
})

We can execute the test either using cypress runner or using the command-line tool.


npx cypress run --spec cypress/integration/cucumber-test/login.featur