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.






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






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’






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