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.
