使用cypress从复杂层次结构中获取元素

Question

I'm new to cypress. Lately, I'm trying to get the text variables within a website and push the elements into an array. However, I cannot get the element position correctly. I tried different ways such as get(), find() but still failed in getting CypressError: Timed out retryimg: Expected to find element:'.nav-link pr-0 d-none d-lg-block>.langSelector', but never found it

Here are my html:

...
<div class="nav-link pr-0 d-none d-lg-block">
  <div id="langSelector">
  <a data-dir="AAA" href="/AAA/example"> AAA </a>
  <a data-dir="BBB" href="/BBB/example"> BBB </a>
  <a data-dir="CCC" href="/CCC/example"> CCC </a>
  </div>
</div>
...

Here are my failed try-out:

  cy.get('.nav-link pr-0 d-none d-lg-block > .langSelector').find('>a').each(($el) => {
          cy.wrap($el).invoke('text')
            .then(text => {
              exampleArray.push(text.trim())
            })
        })

And another fail try-out:

 cy.get('div > .langSelector > a').each(($el) => {
          cy.wrap($el).invoke('text')
          .then(text => {
            exampleArray.push(text.trim())
          })
      })

the error message are the same : CypressError: Timed out retryimg: Expected to find element:'.nav-link pr-0 d-none d-lg-block>.langSelector', but never found it Any ideas would be a great help! Thanks million!

Answer 1

langSelector isn't a class so it shouldn't have a . in front of the selector. Its an id so it should be selected with # .

Try cy.get('#langSelector > a')

Reference:

• Best practices

As a side note, best practice would be to use a separate attribute in your html to assign a testing specific id (something like data-tid, data-cy, etc.) and reference that for your test. This info is also in the linked reference above.