How to get value of a child based on the text of another child within the same JavaScript parent

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.

Answer

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.