Checkbox verification with Cypress

CypressTest AutomationSoftware Testing

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.

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.

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.

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.

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.

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().

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.

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.

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().

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.

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.

Example

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');
   });
});
raja
Published on 05-Aug-2020 12:03:22
Advertisements