Introduction of Cypress Tool

Cypress is an open-source and free test automation tool, It is mainly used for front-end automation. Cypress helps to achieve the following −

1. Configure tests
2. Configure tests
3. Execute tests
4. Identify errors (if any)

Selenium and Cypress are compared in terms of their functionalities. In many ways, Cypress is different in architecture and features.  it resolves some of the issues users face in Selenium.

Cypress is based on JavaScript and executes tests in the browser. It helps to develop the tests that have −

1. Unit tests
2. End-to-end tests
3. Integration tests

Features of Cypress Testing Tool

The important features of Cypress are given below −

1. Supports Test-Driven development
2. Efficient debugging with Developer Tools with the generation of stack trace and errors

Structure of A Basic Test

Cypress follows the JavaScript test frameworks like (Mocha, and Jasmine). To create a test in Cypress, we have to follow the below-mentioned framework guidelines −

-Test suite name should be provided within the described function

Basic Test Implementation

The basic test implementation can be done by using the below command –

// test suite name
describe('JavaTpoint Test', function () {// Test case
   it('Scenario 1', function (){
      // test step for URL launching
      cy.visit("https://www.google.com/");
   });});

Test Execution

For execution from the command line, run the command mentioned below −

./node_modules/.bin/cypress run

Here, all the files within the integration folder will be triggered

For execution from the Test Runner, run the command Mentioned below −

./node_modules/.bin/cypress open

Then, click on the spec file that the user wants to trigger for execution.

To trigger execution for a specific file from the command, run the command mentioned below −

cypress run --spec "<spec file path>"

Also Read:- Web Automation Testing Tools

Cypress – Basic Commands

Cypress basic commands are mentioned below –

• and

It is used to create assertions and is an alias. should ().

cy.get('#ExampleText').should('be.visible').and('be.enabled')
cy.contains('Subject').and('be.checked')

• as

This command provides an alias for later usage.

cy.get('#txt').find('li').first().as('parent')

• blur

It blurs an element in focus.

cy.get('#txt'). type('abc').blur()

• check

Checks radio buttons or checkboxes and also applies to elements having input tags.

cy.get('.chkbox').check()

• children

It basically obtains the sub-elements of an element.

cy.get('n').children()

• clear

Generally, It removes the value from textarea or input.

cy.get('#txt'). type('abc').clear()

• clearCookie

It removes a particular browser cookie.

cy.clearCookie('abc')

• clearCookies

This command removes the cookies from the browser from an existing domain and subdomain.

cy.clearCookies()

• clearLocalStorage

It removes the local Storage data from the existing domain and subdomain.

//clears all local storagecy. clearLocalStorage ()

• click

It clicks an element in (DOM).

//click on element with id txtcy.get('#txt').click()

• contains

Contains obtains an element having a specific text. The element can have more than the text and still, match.

cy.get('#txt').contains('Tutor')

• dblclick

It double-clicks an element in the DOM

//double clicks element with id txt
cy.get('#txt').dblclick()

• debug

Debug fixes a debugger and the log value is returned by the prior command.

//pause to debug at start of command
cy.get('#txt').debug()

• document

It obtains a window. document on the active page.

cy.document()

• each

Each iterates from an array having the property length.

//iterate through individual li
cy.get('li').each(() => {...})

• end

It ends a command chain.

//obtain null instead of input
cy.contains('input').end()

• eq

It refers to an element at a particular index in an array of elements.

//obtain third td in tr
cy.get('tr>td').eq(2)

• exec

It runs a system command.

cy.exec('npm init')

• find

It is obtaining the descendant element of particular locators.

//obtain td from tr
cy.get('tr').find('td')

• first

It is obtaining the first element from a group of elements.

//obtain first td in tr
cy.get('tr>td').first()

• get

It is obtaining single or multiple elements by the locator.

//obtain td from tr

• find

It is obtaining the descendant elements of a particular locator.

//obtain all td from tr in list
cy.get('tr>td')

• getCookies

It is obtaining  all the cookies

cy.getCookies()

• go

It moves forward or backward to the next or previous URL in the history of the browser.

//like clicking back button
cy.go('back')
//like clicking forward button
cy.go('forward')

• visit

It launches a URL.

cy.visit('https://www.tutorialspoint.com/index.htm')

• next

It obtains the immediate sibling of an element in a group of elements in the DOM

//gives the following link in element l.
cy.get('l a:first').next()

• parent

It obtains the parent element from a group of elements in the Document Object Modal.

//get parent of element with class h
cy.get('.h').parent()

• should

It is used for creating an assertion and is an alias of .and ().

//assert element is visible & enabled
cy.get('#txt').should('be.visible').and('be.enabled')

• wait

Wait for a certain time in milliseconds or for an aliased element prior to moving the following step given below.

cy.wait(1000)

• title

It will obtain the document.title of the active page.

cy.title()

• log

It will print the messages to the Command Log.

cy.log('Cypress logging ')

• reload

It is used for page reloading.

cy.reload()

Also Read – Tutorial On Katalon Studio an Automation Testing Software Tool

Cypress Assertions

Cypress has more than one type of assertion obtained from various libraries like Mocha, Chai, etc. The two types of assertion types are explicit and implicit.

1) Implicit Assertions

If an assertion is applicable to the object obtained from the parent command in a chain, then that is known as the implicit assertion. The popular implicit assertions include .and/.should.

These commands cannot be used as a standalone. Generally, they are used when the user has to verify multiple checks on a particular object.

// test suite
describe('W3 school', function () {
   it('Scenario 1', function (){
      //  step to launch a URL
      cy.visit("https://www.W3school.com/videotutorials/index.php")
        //  validate count of sub-elements and class attribute value
        cy.get('.toc chapters').find('li').should('have.length',5)
        .and('have.class', 'dropdown')
   });
});

2) Explicit Assertions

An assertion is applicable to an object, it is known as the explicit assertion. The popular explicit assertions include asserting/expecting.

The command for the explicit assertion is mentioned as follows –

// test suite

describe('Tutorialspoint', function () {

// it function to identify test

   it('Scenario 1', function (){

      // step to launch the  URL

      cy.visit("https://accounts.google.com")

                        // identify element

      cy.get('h1#headingText').find('span').then(function(e){

         const t = e.text()

         // assertion expect

         expect(t).to.contains('Sign')

      })

   })

})