使用赛普拉斯从复杂的层次结构中获取元素

Question

我是柏树的新手。最近，我正在尝试获取网站中的文本变量并将元素推送到数组中。但是，我无法正确获取元素位置。我尝试了不同的方法，例如 get(), find() 但仍然无法获得 CypressError: Timed out retryimg: Expected to find element:'.nav-link pr-0 d-none d-lg-block>.langSelector', but never found it

这是我的 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>
...

这是我失败的尝试：

  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())
            })
        })

还有一个失败的尝试：

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

错误信息是一样的：CypressError: Timed out retryimg: Expected to find element:'.nav-link pr-0 d-none d-lg-block>.langSelector', but never found it任何想法都会有很大的帮助！感谢万！

Answer 1

langSelector 不是 class，因此选择器前面不应有 .。它是一个 id，所以应该选择 #。

尝试 cy.get('#langSelector > a')

参考：

Best practices

附带说明一下，最佳做法是在 html 中使用单独的属性来分配测试特定 ID（类似于 data-tid、data-cy 等）并参考它进行测试。此信息也在上面的链接参考中。

使用赛普拉斯从复杂的层次结构中获取元素

get element from complex hierarchy using cypress

javascript

get

find

cypress