Cypress siblings command

Earlier we have discussed parent, parents, and children command now it's time to discuss another related command which is a sibling.

Sibling means two or more children or offspring or elements in HTML terms, having parent elements in common. With siblings command, you will get Get siblings DOM elements that share the same parent. .sibling() command will yield new elements or elements if found.

Syntax

.siblings()
.siblings(selector)
.siblings(options)
.siblings(selector, options)

Here, a selector to identify matching DOM elements and for options, we can have 2 values log and timeout.

Example

Again, this command can not be chained directly with cy. For demo, we will be working on the top menu of ProgramsBuzz

 it.only('sibling demo', () => {
        cy.visit('/')

        // Yield all li's siblings for top navigation - 6 elements
        cy.get('div.gva-navigation > ul > li').siblings()

        // Click on Ask doubt link
        cy.contains('Ask Doubt').click()
        
        // Yield all li's siblings with class '.menu-item--active-trail' i.e. ask doubt (1 element)
        cy.get('div.gva-navigation > ul > li').siblings('.menu-item--active-trail')

        // output 5 elements
        cy.get('div.gva-navigation > ul > li.menu-item--active-trail').siblings()
    })

In the above code first, we counted a number of menu items using sibling, which will return 6 items, then after clicking on the ask doubt link, we are checking how many items are active. Obviously, that is the one which we clicked with the link title Ask Doubt.

In the 4th command, after finding the active element (Ask Doubt) using the selector. We are finding siblings of Ask Doubt, which are the remaining element except for the ask doubt, and hence count will be 5.