Cypress: Optimize way to find the very deep element

Question

I am trying to check the text inside a span element which is very deep down the dom tree, and I dont want to use a sequence of get/find command to find the text, here is my dom structure looks like:

<td>
  <div>
    <div>
      <div>
        <div></div>
         <div>
           <div>
             <div> </div>
             <span> **target** </span>
           </div>
         </div>
      </div>
     </div>
    <div>
     ...
    </div>
  </div>
</td>

thanks for the help

Answer 1

You could get the first div element and find by span.

example:

const spanEl = cy.get('div').find('span')

If the parent div element has a CSS class or some unique attribute, it would be easier.

const spanEl = cy.get('#attribute-of-div-el').find('span')

ref: https://docs.cypress.io/api/commands/get#Get-vs-Find

Answer 2

If your <span> has unique text then you'll benefit from using cy.contains(). It is quite powerful and underused.

cy.contains('span', 'Your unique text')

you can even use regex

cy.contains('span', /your unique text/)