Blog

Cypress – Checkbox

The commands check and uncheck are used to work with a checkbox. In the Html code, a checkbox has an input tag and its type attribute has the value as a checkbox.

Cypress Commands

The checkbox related to Cypress commands are 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 −
cy.get('#chk').check()
  • 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 −
cy.get('input[type="checkbox"]').check(['Java','Python'])
  • 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:
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 −
cy.get('.chk').check({force : true})
  • 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 −
cy.get('#chk').uncheck()
  • 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 −
cy.get('input[type="checkbox"]').uncheck(['Java','Python'])
  • 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 −
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 −
cy.get('.chk').uncheck({force : true)

Options in Cypress

The options which are available in Cypress are as follows −

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

Both check/uncheck commands require to be chained with commands that yield DOM elements and assertions can be applied to these commands.

Implementation of Cypress Commands

The implementation of the commands in Cypress is explained below −

// test suite
describe('adglob', 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).

Leave a Reply