document.querySelectorAll 在运行 chrome 80 的 cypress 中不起作用

Question

当在 chrome DOM 中执行 document.querySelectorAll 时，它通常会返回值？？然而，当在 cypress 中作为函数执行时，document.querySelectorAll 总是返回空。

const itensText = []
  const url = area => cy.url().should('contain', area)
  const arrayItens = () => {
    const itensCount = document.querySelectorAll("*[data-cy='areas-item']").length
    console.log(itensCount, 'contador');
    for(var i=0; i<itensCount; i++) {
      itensText.push(document.querySelectorAll("*[data-cy='areas-item']")[i].innerText);
    };
  }

<ul data-cy="areas-holder" class="styled__AreasHolder-kUDyGB leBHiV"><li data-cy="areas-item" class="styled__AreasItem-ejSxag jdRdwx"><a data-cy="Oncogenética" class="styled__AreasItemLink-yXJfI jaazQV" href="/exames?area=Oncogenética"><svg class="styled__AreasItemIcon-iWyosv kXRKoO"><use xlink:href="#gene-mutation"></use></svg>Oncogenética</a></li><li data-cy="areas-item" class="styled__AreasItem-ejSxag jdRdwx"><a data-cy="Doenças Raras" class="styled__AreasItemLink-yXJfI jaazQV" href="/exames?area=Doenças Raras"><svg class="styled__AreasItemIcon-iWyosv kXRKoO"><use xlink:href="#petri-dish"></use></svg>Doenças Raras</a></li><li data-cy="areas-item" class="styled__AreasItem-ejSxag jdRdwx"><a data-cy="Neurogenética" class="styled__AreasItemLink-yXJfI jaazQV" href="/exames?area=Neurogenética"><svg class="styled__AreasItemIcon-iWyosv kXRKoO"><use xlink:href="#genome"></use></svg>Neurogenética</a></li></ul>

铬 DOM

带有 Chrome 80 DOM 的 Crypress

我需要用每个项目的值构建一个数组，以便在未来的场景测试中使用

Answer 1

要访问测试页的文档，您应该使用cy.document() 命令来获取参考。您作为全局访问的文档属于 Cypress runner，但测试页面位于 iFrame 内，该 iFrame 具有不同的文档引用。

cy.document().then((doc) => {
  const itensCount = doc.querySelectorAll("*[data-cy='areas-item']").length
  ...
})