How to handle web control UI using Cypress?

Table of contents

Reading Time: 3 minutes

Hello everyone. In this blog, we will know how to handle control UI using Cypress.What are web controls? Web controls UI are basically HTML elements wrapped. It is easy-to-use scripting tag of ASP+ and provides rich functionality in your FORMs or pages. It ranges from simple text boxes to advance girds and lists. Web control UI fall into five categories: display, input, selection, validation, and special purpose. Lets get a dive into How to handle web control UI using Cypress?

We can subdivide our topic into:

Firstly, how to verify and automate checkboxes?
Secondly, handling static dropdown
Finally, handling visible and invisible elements

How to verify and automate checkboxes?

There are some basic commands which are used to verify and automate checkboxes. Some of them are as follow

Click all the checkboxes

    cy.get('input[type="checkbox"]').check()

To click a checkbox with id

    cy.get('#chk').check()

Command to click a checkbox with value ‘Real’

    cy.get('input[type="checkbox"]').check('Real')

Click checkbox having class check with an option

cy.get(‘.chk’).check({force : true})

To uncheck all the checkboxes

   cy.get('input[type="checkbox"]').uncheck()

Unclick a checkbox with id

   cy.get('#chk').uncheck()

To unclick a checkbox with value ‘Real’

cy.get(‘.chk’).uncheck(‘Real’, options)

Lets write a program to check and uncheck “show password” from gmail sign up page.

Similarly, below are few of the commands to handle static dropdown.

Firstly, command used to choose the option ‘Real’

   cy.get('select').select('Cypress')

After that, the command to select options ‘Real’ and ‘Unreal’

   cy.get('select').select(['Real', 'Unreal'])

Finally, command to choose multiple values with option

   cy.get('select').select(['option1', 'option2'], options)

Let us write a static dropdown program. Here we will select country with option ’99’.

How to handle visible and invisible elements?

Cypress can handle invisible elements. For handling hidden elements, Cypress takes the help of the jQuery method show. It uses command (invoke[‘show’]).

Let us write a program to find the hidden element from amazon webpage ‘sign in’