Na “pitada de Cypress” de hoje, aprenda como verificar que um elemento não está presente no DOM
A motivação deste post veio da seguinte pergunta, do Anderson Faria, em um comentário em outro post da série.
Como podemos garantir que um elemento não exista na tela, por exemplo um botão ou opção de um menu.
Obrigado pela pergunta Anderson!
A resposta é simples.
Vejamos um exemplo.
describe('pitadas de Cypress', () => {
it('"pitadas de pimenta" não está no DOM', () => {
cy.visit('https://exemplo.com')
cy.contains('pitadas de pimenta')
.should('not.exist')
})
})
O mesmo vale quando identificando elementos por um seletor CSS (veja).
describe('pitadas de Cypress', () => {
it('elemento com a classe "foo" não está no DOM', () => {
cy.visit('https://exemplo.com')
cy.get('.foo').should('not.exist')
})
})
Essa foi fácil.
Em breve tem mais!
Este foi foi traduzido para inglês e pode ser encontrado no DEV Community.
O que você está achando da série?
Aguardo teu feedback.
Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.
Bem bacana. Um questionamento é apenas: Será que tem como fazer uma condicional? Algo tipo assim: Se o elemento existe faça isso, se não existe faça aquilo.
(eu consegui fazendo uma verificação do body…)
Recomendo ler sobre conditional testing no blog oficial do Cypress.io https://docs.cypress.io/guides/core-concepts/conditional-testing.html#The-DOM-is-unstable
Segue um exemplo do uso de condicional, a partir do repositório da Real World App, desenvolvida pelo time do Cypress https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/support/commands.ts#L186
Na live de hoje também mostrei alguns comandos customizados com condicionais. Recomendo dar uma olhada https://youtu.be/WlaH9WAaUYw
Massa demais a série, Walmyr!! Vou deixar uma sugestão: Page Objetcs no Cypress – sim ou não?
Obrigado Bruno. Esta sugestão inclusive já está no backlog.