Dúvida após a refatoração com o commands | Cypress: automatizando testes E2E

O meu teste de login com sucesso eu deixei um ultimo passo que é para fazer a validação se realmente logou conforme o comando abaixo:

cy.contains('Veja os amigos disponíveis para adoção!')

Logo que eu refatoreu conforme apresentado nessa aula usando os commands, fiz toda a refatoração levando apenas o trecho que digita e-mail, senha e o clique no botão para dentro do commands. Quando salvei e fui executar apresentou um erro que tbm percebi em sua execução na aula que foi o seguinte.... Logo após clicar no botão "Entrar" a tela ficou travada e não foi direcionado para a home logada. Por quê isso acontece ?

Não sei se isso pode ser um bug, mas aqui no meu caso eu comentei a linha "cy.contains('Veja os amigos disponíveis para adoção!')" e rodei o teste novamente e passou. Posteriormente descomentei esse trecho e rodei novamente, passou com sucesso.

Eu percebi esse mesmo problema em outras situações de clique em botão e que deveria ser redirecionado para outra página, tentei usar um cy.wait() mas não resolveu.

Olá, Renato! Joia

Isso pode estar acontecendo devido a uma série de razões, mas vou tentar ajudar com algumas sugestões práticas.

Quando você refatora seu código para usar comandos personalizados, pode haver um pequeno atraso ou uma condição de corrida onde o Cypress tenta verificar a presença do texto antes que a página tenha completamente carregado. Aqui estão algumas abordagens que podem ajudar a resolver esse problema:

Adicionar Espera Explícita: Embora você tenha mencionado que cy.wait() não resolveu, você pode tentar usar cy.contains com uma espera explícita para garantir que o texto está presente antes de prosseguir.

Cypress.Commands.add('login', (email, senha) => {
  cy.get('[data-test="input-loginEmail"]').type(email);
  cy.get('[data-test="input-loginPassword"]').type(senha);
  cy.get('[data-test="submit-button"]').click();
  cy.contains('Veja os amigos disponíveis para adoção!', { timeout: 10000 }).should('be.visible');
});

Isso adiciona uma espera de até 10 segundos para que o texto apareça na página.

Verificar Redirecionamento: Verifique se há algum redirecionamento ou carregamento de página que pode estar causando o problema. Às vezes, adicionar uma espera para a URL mudar pode ajudar.

Cypress.Commands.add('login', (email, senha) => {
  cy.get('[data-test="input-loginEmail"]').type(email);
  cy.get('[data-test="input-loginPassword"]').type(senha);
  cy.get('[data-test="submit-button"]').click();
  cy.url().should('include', '/home'); // Ajuste a URL conforme necessário
  cy.contains('Veja os amigos disponíveis para adoção!', { timeout: 10000 }).should('be.visible');
});

Uso de cy.intercept: Se o problema persistir, você pode usar cy.intercept para esperar por uma requisição específica que indica que a página foi carregada completamente.

Cypress.Commands.add('login', (email, senha) => {
  cy.intercept('GET', '**/amigos').as('getAmigos'); // Ajuste a URL conforme necessário
  cy.get('[data-test="input-loginEmail"]').type(email);
  cy.get('[data-test="input-loginPassword"]').type(senha);
  cy.get('[data-test="submit-button"]').click();
  cy.wait('@getAmigos');
  cy.contains('Veja os amigos disponíveis para adoção!', { timeout: 10000 }).should('be.visible');
});

Espero que essas sugestões ajudem a resolver o problema que você está enfrentando.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Mergulhe em programação