使用cypress從復雜層次結構中獲取元素

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不是一個類，所以它不應該有一個. 在選擇器的前面。 它是一個id所以應該用#選擇它。

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

參考：

• 最佳實踐

作為旁注，最佳實踐是在您的 html 中使用單獨的屬性來分配測試特定的 id（例如 data-tid、data-cy 等）並在您的測試中引用它。 此信息也在上面的鏈接參考中。