10 Web Elements - biswajitsundara/Cypress GitHub Wiki

Handling Checkboxes

We need to use check() method to tick a checkbox and uncheck() method to untick

DOM

<input type="checkbox" name="love" value="love" id="love">
<label for="love"> Check if you love this website!</label>

Code To Test

cy.visit('https://html.com/input-type-checkbox/');

//check
cy.get('#love').check().should('be.checked').and('have.value', 'love');
cy.get('#love').next('label').should('have.text',' Check if you love this website!');

//uncheck
cy.get('#love').uncheck().should('not.be.checked');

Here we can see the label has the text that displays for the checkbox
so if we want to validate then we need to use next('label') method
it will check just after the checkbox the label tag has the specific text.

Handling Drop Downs

HTML drop downs will be like this

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

1. How to check the default drop down text

cy.get("#cars").invoke('val').then((text)=>{
            let defaultText = text.toString();
            expect(defaultText).to.equals('volvo');
       })

2. How to select an option in the drop down

cy.get('#cars').select('mercedes').should('have.value','mercedes'); 

Handling Web Tables

Cypress can handle web tables. This HTML element starts with tag <table> and for each row there's a <tr> and for each column there's a <td> tag. Based on the nature of the web element there are two types of web tables

  • static - The row & column count remains same
  • dynamic - The row & column count changes during run time.

1. Validate the value anywhere in the table.

cy.visit("http://testautomationpractice.blogspot.com/");
cy.get("table[name='BookTable']").contains('td', 'Selenium').should('be.visible');

2. Validate the value in a specific row/column

cy.visit("http://testautomationpractice.blogspot.com/");
const i = 3, j = 3;
cy.get("table[name='BookTable'] > tbody > tr:nth-child(" + i + ") > td:nth-child(" + j + ")")
  .contains('Java')
  .should('be.visible');

3. Validate the value in the same row of another value.

cy.visit("http://testautomationpractice.blogspot.com/");
cy.get("table[name='BookTable'] > tbody > tr td:nth-child(2)").each(($e, index, $list) => {

            const text = $e.text();
            if (text.includes("Amod")) {
                cy.get("table[name='BookTable'] > tbody > tr td:nth-child(1)")
                   .eq(index).then(function (bname) {
                    const bookName = bname.text();
                    expect(bookName).to.equal('Master In Java');
                })
            }

     });

4. Validate content of a row

cy.get('td').contains('Learn Java').parent('tr').within(() => {
            // all searches are automatically rooted to the found tr element
            cy.get('td').eq(1).contains('Mukesh')
            cy.get('td').eq(2).contains('Java')
            cy.get('td').eq(3).contains('500')
 })

5. Find the number of rows and columns

const rows= cy.get("table[name='BookTable'] > tbody > tr").its('length');
const cols = cy.get("table[name='BookTable'] > tbody > tr th").its('length');
console.log(rows)
console.log(cols)
⚠️ **GitHub.com Fallback** ⚠️