Cypress - Checkbox

The commands check and uncheck are used to work with checkbox. In the html code, a checkbox has an input tag and its type attribute has the value as checkbox.
The checkbox related Cypress commands is as follows −
The command used to click all the checkboxes is as follows −
The command used to click all the checkboxes is as follows −
cy.get('input[type="checkbox"]').check()

The command used to click a checkbox with id check is as follows −
The command used to click a checkbox with id check is as follows −
cy.get('#chk').check()

The command used to click a checkbox with value Cypress is as follows −
The command used to click a checkbox with value Cypress is as follows −
cy.get('input[type="checkbox"]').check('Cypress')

The command used to click the checkboxes with values - Java and Python is as follows −
The command used to click the checkboxes with values - Java and Python is as follows −
cy.get('input[type="checkbox"]').check(['Java','Python'])

The command used to click the checkbox having value Java with options is as follows −
The command used to click the checkbox having value Java with options is as follows −
cy.get('.chk').check('Java', options)

The command used to click the checkboxes with values – Java and Python with options is as follows:
The command used to click the checkboxes with values – Java and Python with options is as follows:
cy.get('input[type="checkbox"]').check(['Java','Python'], options)

The command used to click the checkbox having class check with an option is as follows −
The command used to click the checkbox having class check with an option is as follows −
cy.get('.chk').check({force : true})

The command used to uncheck all the checkboxes is as follows −
The command used to uncheck all the checkboxes is as follows −
cy.get('input[type="checkbox"]').uncheck()

The command used to uncheck a checkbox with id check is as follows −
The command used to uncheck a checkbox with id check is as follows −
cy.get('#chk').uncheck()

The command used to uncheck the checkbox with value Cypress is as follows −
The command used to uncheck the checkbox with value Cypress is as follows −
cy.get('input[type="checkbox"]').uncheck('Cypress')

The command used to uncheck the checkboxes with values - Java and Python is as follows −
The command used to uncheck the checkboxes with values - Java and Python is as follows −
cy.get('input[type="checkbox"]').uncheck(['Java','Python'])

The command used to uncheck the checkbox having value Java with options is as follows −
The command used to uncheck the checkbox having value Java with options is as follows −
cy.get('.chk').uncheck('Java', options)

The command used to uncheck the checkboxes with values – Java and Python with options is as follows −
The command used to uncheck the checkboxes with values – Java and Python with options is as follows −
cy.get('input[type="checkbox"]').uncheck(['Java','Python'], options)

The command used to uncheck the checkbox having class check with an option is as follows −
The command used to uncheck the checkbox having class check with an option is as follows −
cy.get('.chk').uncheck({force : true)

The options which are available in Cypress are as follows −
log – Default value – true − This is used to turn on/off console log.
log – Default value – true − This is used to turn on/off console log.
timeout – Default value – defaultCommandTimeout(4000ms) − This is used to provide the maximum wait time prior to throwing an error.
timeout – Default value – defaultCommandTimeout(4000ms) − This is used to provide the maximum wait time prior to throwing an error.
force – Default value – false − This is used to enforce an action.
force – Default value – false − This is used to enforce an action.
scrollBehaviour – Default value – scrollBehaviour(top) − This is for the position
of viewport up to which element to be scrolled prior command execution.
scrollBehaviour – Default value – scrollBehaviour(top) − This is for the position
of viewport up to which element to be scrolled prior command execution.
waitForAnimations – Default value – waitForAnimations(true) − This is used to wait for elements to complete animation prior running the commands.
waitForAnimations – Default value – waitForAnimations(true) − This is used to wait for elements to complete animation prior running the commands.
animationDistanceThreshold - Default value – animationDistanceThreshold (5) − This is for the pixel distance of an element that should be exceeded to qualify
for animation.
animationDistanceThreshold - Default value – animationDistanceThreshold (5) − This is for the pixel distance of an element that should be exceeded to qualify
for animation.
Both check/uncheck commands require to be chained with commands that yield DOM elements and assertions can be applied to these commands.
The implementation of the commands in Cypress is explained below −
// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://accounts.google.com/signup")
      //checkbox with assertion
      cy.get('input[type="checkbox"]').check().should('be.checked')
      //identify checkbox with class with assertion
      cy.get('.VfPpkd-muHVFf-bMcfAe').uncheck().should('not.be.checked')
   })
})
Execution Results
The output is mentioned below −
The above results show the checkbox to the left of the Show password, first getting checked with the check command (verified with assertion-should).
Then, it is unchecked with the uncheck command (also verified with assertion-should).

    73 Lectures 
     12 hours 

 Rahul Shetty
 Print
 Add Notes
 Bookmark this page