No mundo dos testes automatizados é comum nos confundirmos sobre o que testar, e em vez de focarmos em testar a aplicação sendo desenvolvida (ou mantida), testarmos o comportamento padrão do navegador.
Um erro comum é clicar em um link só para verificar que fomos direcionados para a URL correta, ou para verificarmos que, não só fomos redirecionados para a URL correta, como também que uma nova aba foi aberta no navegador.
É comportamento padrão dos navegadores web que quando um usuário clica em uma tag anchor (<a>Click here</a>) o mesmo será direcionado para a URL da propriedade href de tal elemento, e que caso tal elemento possua a propriedade target com o valor _blank, quando clicado, tal URL será aberta em um nova aba do navegador.
Ou seja, visto que tais comportamentos são padrão em navegadores web, não precisamos testá-los. Os times desenvolvendo os navegadores já testam isso. ✅
Nossa preocupação deve ser que a aplicação funciona, não o navegador.
Com Cypress, facilmente podemos testar se um elemento HTML possui determinadas propriedades, tais como href ou target. Por exemplo, para verificar que um link possui o href com o valor https://example.com, basta encadear um .should('have.attr', 'href', 'https://example.com') ao cy.get() que identifica o elemento em questão.
Abra o arquivo cypress/e2e/browser-testing/sample1.cy.js, e em vez de clicar link que contém o texto Login, verifique somente que tal elemento possui o valor correto para a propriedade href, além de verificar que tal elemento não possui a propriedade target.
🧙 Dica: para verificar que uma propriedade não existe você pode usar
.should('not.have.attr', 'target')
Obs.: Lembre de executar o teste após a mudança para garantir que funciona.
Use
npx cypress run --spec cypress/e2e/browser-testing/sample1.cy.jspara executar o teste em modo headless, ounpm run cy:open, para abrir o Cypress em modo interativo.
Abra o arquivo cypress/e2e/browser-testing/sample2.cy.js, e em vez de remover o target da âncora com o texto Política de Privacidade e clicar no mesmo, simplesmente verifique que tal elemento possui os valores corretos para as propriedades href e target.
Leia sobre testes em múltiplas abas na documentação oficial do Cypress (em inglês) e entenda o motivo para tal abordagem não ser suportada.
Assiste a Live Como NÃO testar com Cypress e aprenda a focar nas regras de negócio da aplicação em teste, em vez dos comportamentos padrão do navegador.
Ufa! Uma má prática a menos. 😅
Vá para a aula 2 para conhecer a segunda má prática (duplicação de código) e como lidar com ela.