document.querySelectorAll doesn't work in cypress running with chrome 80

user_9468259 0
Viewed 4224

When executing document.querySelectorAll in the chrome DOM it is returning the values ​​normally however when executing as a function in cypress the document.querySelectorAll always returns me empty.

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>

Chrome DOM

enter image description here

Crypress with Chrome 80 DOM

enter image description here

I need to build an array with the values ​​of each item, to use in a future scenario test

cypress automated-tests dom javascript
1 Answers

To access your test page's document, you should use the cy.document() command to obtain a reference. The document you access as a global belongs to the Cypress runner, but the test page is inside an iFrame which has a different document reference.

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