How to handle web control UI using Cypress?

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.

The output is:

How to handle static dropdown?

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’.

Therefore, the output is:

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’

The output is

References

https://docs.cypress.io/api/commands/select

Written by 

I work with Knoldus and have experience of 8+ years in quality assurance I have good experience on SeleniumWebdriver(C#), Selenium IDE, Nightwatch,Appium, Jira, TFS, ZAP, Fiddler, Jmeter, Jenkins, Selenium Webdriver. I am also ITIL certified.