Cypress: Get child element of parent based on another child element

Question

I have 2 div collapse

<div class="collapse>
    <div class="title">Apple</div>
    <item>Apple 1</item>
    <item>Apple 2</item> // get this item
    <item>Apple 3</item>
</div>

<div class="collapse>
    <div class="title">Samsung</div>
    <item>Samsung 1</item>
    <item>Samsung 2</item>
</div>

How I can get item list by class title like this:

cy.get('.collapse').within(() => {
  if (cy.contains('.title', 'Apple') {
   cy.get(item).eq(1).... // handle item second of apple
  }
});

Answer 1

You can specify which .collapse you want by the content of it's children

cy.contains('.collapse', 'Apple')  // gets the 1st collapse element where child has "Apple" text
  .find('item').eq(1)             // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

If your actual HTML is more complicated and you want to start with the title element,

cy.contains('.title', 'Apple')  // get the title child with "Apple" text
  .parent()                    // move up to div.collapse
  .find('item').eq(1)         // within that, get the 2nd <item>
  .should('have.text', 'Apple 2')

or siblings navigation

cy.contains('.title', 'Apple')  // get the tile child with "Apple" text
  .siblings('item').eq(1)       // 2nd item sibling
  .should('have.text', 'Apple 2')