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

If you can control the DOM then you can basically add an Id or a data attribute to find it. — Eldar, Apr 14 '22 at 19:55
Then what I can suggest is if an item has something unique (an Id, a class name, or a tag name) you can narrow down the search by adding that unifier at the beginning of your CSS query. — Eldar, Apr 14 '22 at 19:58
can we consider span as unique? if so what would be the command? — Samira Arabgol, Apr 14 '22 at 20:00

score 1 · Accepted Answer · answered Apr 14 '22 at 20:03

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

answered Apr 14 '22 at 20:03

João Santos

61
6

I tried it but got error: `Timed out retrying after 30000ms: Expected to find element: div, but never found it.` – Samira Arabgol Apr 14 '22 at 21:13
You should read into [variables in cypress](https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Return-Values) @jsantos – jjhelguero Apr 14 '22 at 21:14
1

thanks! that solved my problem, the error was coming from a different issue. – Samira Arabgol Apr 14 '22 at 21:18

score 0 · Answer 2 · answered Apr 14 '22 at 21:16

0

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/)

answered Apr 14 '22 at 21:16

jjhelguero

2,281
5
13

Cypress: Optimize way to find the very deep element

2 Answers2