In this section we how to deal with check boxes and radio button while working with the Cypress. First we will so the check, radio button and then check box nested in label.

We will be using below mentioned sites during practice,

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/

https://jqueryui.com/checkboxradio/

http://the-internet.herokuapp.com/

A checkbox (check box, tickbox, tick box) is a GUI widget that permits the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options.

For example, the user may have to answer 'yes' (checked) or 'no' (not checked) on a simple yes/no question.

This below command will SELECTS ALL the check boxes in the visited page,

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

This below command will SELECTS CHECK BOX BASED ON ID in the visited page,

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

This below command will SELECTS CHECK BOX BASED ON VALUE in the visited page,

cy.get('[type="radio"]').check('US')

This below command will SELECTS CHECK BOX BASED ON VALUES in the visited page,

cy.get('[type="checkbox"]').check(['ga', 'ca'])

This below command will CHECK THE VISIBILITY OF CHECK BOX in the visited page,

cy.get('.action-checkboxes').should('not.be.visible') 

This below command will FORCE CHECK THE CHECK BOX in the visited page,

cy.get('.action-checkboxes').check({ force: true }).should('be.checked') 

The same can be applied for uncheck too.

Download or View the code below,

A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.

The singular property of a radio button makes it distinct from a checkbox, which allows more than one (or no) item to be selected and for the unselected state to be restored.

They are generally the Check boxes with a cool nested structure.