Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
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');
});
});
9K+ Views
