javascript - Continue rolando para baixo enquanto carrega no cypress

Eu tenho uma página que possui um elemento onde, se você rolar para baixo, ele carrega novos dados.

Isso leva cerca de 10 segundos.

Eu escrevi o seguinte teste:

it('Should display at least one facility in booking panel', (done) => {
  function recursivelyScroll() {
    cy.get(element)
      .scrollTo('bottom');

    cy.get(element)
      .then($el => {
        // If the element contains a loading class, we wait one second and scroll down again
        if ($el.find(Loading).length > 0) {
          setTimeout(recursivelyScroll, 1000);
        } else {
          // We are done waiting, no more loading is needed
          // write test here

          done();
        }
      });
  }
  recursivelyScroll();
});

CypressError

Tempo esgotado após 4000ms. O callback done() nunca foi invocado!

O método done() não é chamado rápido o suficiente de acordo com o Cypress, mas eles não têm documentação sobre como estender o período de tempo do done. Além disso, pode haver uma maneira melhor, da qual eu não estou ciente, de criar esse comportamento de rolagem no Cypress. Existe uma solução fácil?

Resposta #1

Você já tentou usar o plugin de recursão no Cypress?

Ficaria mais ou menos assim:

cy.get(element).scrollTo('bottom');
recurse(
    () => cy.contains('element', 'Loading').should(() => {}),
    ($quote) => $quote.length > 0 ,
    {
      limit: 300,
      log: false,
      post(){
        setTimeout(recursivelyScroll, 1000);
      }
    },
)

A ideia foi retirada daqui: https://www.youtube.com/watch?v=KHn7647xOz8 Aqui um exemplo de como usar e instalar https://github.com/bahmutov/cypress-recurse

Resposta #2

Tente mudar para a asserção When e declarar essa função fora da execução:

When('Should display at least one facility in booking panel', (done) => {
    recursivelyScroll(done)
}

function recursivelyScroll(done){
    //see implementation below
}

Não tenho certeza sobre qual é o "Loading", talvez você precise colocar entre aspas duplas?

Além disso, observe que o Cypress é assíncrono, então os trechos de código scrollTo e then são executados ao mesmo tempo no seu código, basta usar then após o scroll.

E eu vou mudar o setTimeout para a função cy wait antes de executar a recursão, dê uma olhada no código abaixo:

function recursivelyScroll(done) {
    cy.get(element)
    .scrollTo('bottom')
    .then($el => {
        // If the element contains a loading class, we wait one second and scroll down again
        if ($el.find(".Loading").length > 0) {
            cy.wait(1000).then(()=>{
                recursivelyScroll(done);
            })
        } else {
            // We are done waiting, no more loading is needed
            // write test here
            done();
        }
    });
}