Cypress - How to count Number of Buttons in a Div?

Question

I'm trying to find a way to count the number of buttons within a given div, right now the html looks something like this:

<div class="Button_List"></div>
    <div class="Button_Container">
        <button class="button1"></button>
        <button class="button2"></button>
        <button class="button3"></button>
    </div>
</div>

My Cypress Assertion looks something like this:

cy
  .find('.Button_Container')
  .its('length')
  .should('eq', 3)

Cypress keeps saying it only find one item though: expected 1 to equal 3

I'm new to Cypress/Automation in general so any help would be appreciated!

Answer 1

This works to check a count of items:

cy.get('.Button_Container').find('button').should('have.length', 3)

or

cy.get('.Button_Container').find('button').its('length').should('eq', 3)

Answer 2

Thanks so much everyone for the suggestions! Turns out the REAL issue was that the Button Container was inside of an iframe (Cypress + iframes = headaches) so I had to use the iframe library to locate the container and THEN use the following solution:

cy.frameLoaded('.iframeClass').find('button').its('length').should('eq', 3)

Answer 3

In case you just have these three buttons on your webpage you can directly check their length using the button selector.

cy.get('button').its('length').should('eq', 3)

You can apply other assertions as well based on the length like:

1. Greater than 3

cy.get('.Button_Container').find('button').its('length').should('be.gt', 3)

2. Greater than and equal to 3

cy.get('.Button_Container').find('button').its('length').should('be.gte', 3)

3. Less than 3

cy.get('.Button_Container').find('button').its('length').should('be.lt', 3)

4. Less than or equal to 3

cy.get('.Button_Container').find('button').its('length').should('be.lte', 3)

5. In some range e.g. Between 1 and 3

cy.get('.Button_Container')
  .find('button')
  .its('length')
  .then((len) => {
    expect(len).to.be.within(1, 3) //1 and 3 are also included in the check
  })

Answer 4

I think you want to add .children() selector

cy.get('.Button_Container')
  .children()
  .should('have.length', 3)

If there were other children which are not buttons, filter the children by tag

cy.get('.Button_Container')
  .children('button')
  .should('have.length', 3)

---

Some more variations to try out

1. Using button class values:

cy.get('button[class^="button"]')  // any button having a class starting with "button"
  .should('have.length', 3)

2. Combining selectors:

cy.get('.Button_Container button')  // note the two selectors are separated by a space
  .should('have.length', 3)

3. Using higher parent:

cy.get('.Button_List button')  // note the two selectors are separated by a space
  .should('have.length', 3)

#3 assumes the HTML is

<div class="Button_List">
    <div class="Button_Container">
        <button class="button1"></button>
        <button class="button2"></button>
        <button class="button3"></button>
    </div>
</div>