so I want to be able to get "Text B" from the table below using Cypress but have tried many things and I can only get "Party B".
<div class="table">
<div class="label">
<span class="labelText">Party A</span>
</div>
<div class="text">Text A</div>
</div>
<div class="table">
<div class="label">
<span class="labelText">Party B</span>
</div>
<div class="text">Text B</div>
</div>
I have been using cy.get(div[class="table"]).contains(div[class="label"], "Party B").click() to click on the text for "Party B", but don't know how to click on the other child of the same parent.
To get the table containing "Party B", specify the selector inside .contains()
cy.contains('div.table', 'Party B') // returns the table with "Party B" inside somewhere
.find('div.text') // find the 2nd child which has class "text"
.click()
There are variations you could use, if you know "Text B" is the actual text
cy.contains('div.text', 'Text B')
.click()
If you want to navigate first to div[class="table"], then to div[class="label"]
cy.contains('Party B') // returns the <span> owning "Party B"
.click()
.parent('div.label') // go up to div[class="label"]
.sibling('div.text') // go to next element at that level
.click()
Be careful about doing multiple clicks in a chain, usually they have side-effects.
It's better to start a new chain after each click.