Checkbox verification with Cypress

Cypress handles checking and unchecking of checkbox with the help of its in built
functions. For a checkbox, the tagname of the element should be input and the
type attribute in the html code should be checkbox.
The command used is check(). This command needs to be chained with a command
that gives DOM elements and the element should be of type checkbox. The various
usage of check commands are listed below −
check() − The check() command without argument checks all the checkboxes.
The get method should have the [type="checkbox"] as the css selector when
it is chained with check() method.
check() − The check() command without argument checks all the checkboxes.
The get method should have the [type="checkbox"] as the css selector when
it is chained with check() method.
cy.get('[type="checkbox"]').check()
check() − The check() command without argument checks the checkbox with
a specific id given as an argument to the chained Cypress get() command.
check() − The check() command without argument checks the checkbox with
a specific id given as an argument to the chained Cypress get() command.
cy.get('#option1').check()
check('Value1') − The check() command with value as argument checks the
checkbox with the mentioned value. The get method should have the [type="checkbox"] as the css selector when it is chained with check() command.
check('Value1') − The check() command with value as argument checks the
checkbox with the mentioned value. The get method should have the [type="checkbox"] as the css selector when it is chained with check() command.
cy.get('[type="checkbox"]').check('Tutorialspoint')
check('Value1', 'Value2') − The check() command with values as arguments
check the checkbox with the mentioned values. The get method should have the [type="checkbox"] as the css selector when it is chained with check() command.
check('Value1', 'Value2') − The check() command with values as arguments
check the checkbox with the mentioned values. The get method should have the [type="checkbox"] as the css selector when it is chained with check() command.
cy.get('[type="checkbox"]').check('Tutorialspoint', 'Selenium')
check({ force: true }) − The check() command with option as argument
changes the default behavior of checkbox. There can be three types of options: log, force and timeout having default values as true, false and defaultCommandTimeout ( 4000 milliseconds) respectively.
check({ force: true }) − The check() command with option as argument
changes the default behavior of checkbox. There can be three types of options: log, force and timeout having default values as true, false and defaultCommandTimeout ( 4000 milliseconds) respectively.
cy.get('.check-boxes').should('not.be.visible').check({ force: true
}).should('be.checked')
The option force is used by Cypress to interact with hidden elements and then forces to check the checkbox internally.
Similar to the check commands, there exists the uncheck commands in Cypress.
The command used is uncheck(). This command needs to be chained with a command that gives DOM elements and the element should be of type checkbox. The various usage of uncheck commands are listed below −
uncheck() − The uncheck() command without argument unchecks all the
checkboxes. The get method should have the [type="checkbox"] as the css selector when it is chained with uncheck().
uncheck() − The uncheck() command without argument unchecks all the
checkboxes. The get method should have the [type="checkbox"] as the css selector when it is chained with uncheck().
cy.get('[type="checkbox"]').uncheck()
uncheck() − The uncheck() command without argument checks the checkbox
with a specific id given as an argument to the chained Cypress get() command.
uncheck() − The uncheck() command without argument checks the checkbox
with a specific id given as an argument to the chained Cypress get() command.
cy.get('#option1').uncheck()
uncheck('Value1') − The uncheck() command with value as argument
unchecks the checkbox with the mentioned value. The get method should have the [type="checkbox"] as the css selector when it is chained with uncheck() command.
uncheck('Value1') − The uncheck() command with value as argument
unchecks the checkbox with the mentioned value. The get method should have the [type="checkbox"] as the css selector when it is chained with uncheck() command.
cy.get('[type="checkbox"]').uncheck('Tutorialspoint')
uncheck('Value1', 'Value2') − The uncheck() command with values arguments unchecks the checkbox with the mentioned values. The get method should have the [type="checkbox"] as the css selector when it is chained with uncheck().
uncheck('Value1', 'Value2') − The uncheck() command with values arguments unchecks the checkbox with the mentioned values. The get method should have the [type="checkbox"] as the css selector when it is chained with uncheck().
cy.get('[type="checkbox"]').uncheck('Tutorialspoint', 'Selenium')
uncheck({ force: true }) − The uncheck() command with option as argument
change in default behavior of checkbox. There can be three types of options −
log, force and timeout having default values as true, false and defaultCommandTimeout ( 4000 milliseconds) respectively.
uncheck({ force: true }) − The uncheck() command with option as argument
change in default behavior of checkbox. There can be three types of options −
log, force and timeout having default values as true, false and defaultCommandTimeout ( 4000 milliseconds) respectively.
cy.get('.check-boxes').should('not.be.visible').uncheck({ force: true
}).should('be.unchecked')
The option force is used by Cypress to interact with hidden elements and then forces to uncheck the checkbox internally.
We can apply assertions with both check() and uncheck() commands in Cypress.
Code Implementation with checkbox.
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case2', function (){
      cy.visit("https://www.tutorialspoint.com/selenium/selenium_automatio
      n_practice.htm");
      // checking by values
      cy.get('input[type="checkbox"]')
      .check(['Manual Tester','Automation Tester']);
      // unchecking all values
      cy.get('input[type="checkbox"]').uncheck();
      // checking and assertion combined with and()
      cy.get('input[value="Automation Tester"]')
      .check().should('be.checked').and('have.value','Automation Tester');
      // unchecking and assertion combined with and()
      cy.get('input[value="Automation Tester"]')
      .uncheck().should('not.be.checked');
   });
});