Seja bem vindo(a) a série “pitadas de Cypress”! 🧂
Nesta série de conteúdos em formato de texto com snippets de código você vai aprender vários macetes do framework de testes automatizados Cypress.io, para facilitar sua vida na escrita de scripts de teste.
Irei começar com algo simples, e vamos evoluindo ao longo da série, ok?
Digamos que você esteja testando um aplicação que vende ingressos para eventos.
Nesta aplicação exemplo, para um usuário comprar um ingresso ele deve preencher alguns dados obrigatórios, e após a submissão do formulário, ele receberá uma mensagem de sucesso.
Digamos que os campos obrigatórios sejam os seguintes:
- Nome completo
- Checkbox de que concorda com os termos do serviço
Imaginemos também que os elementos acima possuem IDs únicos.
O teste seria algo assim:
describe('Aplicação de venda de ingressos online', () => {
beforeEach(() => {
cy.visit('https://exemplo.com/ingressos')
})
it('realiza ordem de compra com sucesso', () => {
cy.get('#fullName')
.should('be.visible')
.type('Walmyr Filho')
cy.get('#email')
.should('be.visible')
.type('walmyr@exemplo.com')
cy.get('#iAgree')
.should('be.visible')
.check()
cy.get('button[type="submit"]')
.should('be.visible')
.click()
cy.contains('Você receberá um email para finalizar a compra')
.should('be.visible')
})
})
Veja que antes de digitar (type), marcar (check), ou clicar em elementos (click), estou garantindo que eles estão visíveis (.should(‘be.visible’)). Isso torna o teste mais robusto.
Por fim, verifico que o texto ‘Você receberá um email para finalizar a compra’ é contido em algum elemento e está visível.
É isso aí!
Espero que tenha gostado e fique ligado para os próximos conteúdos da série. 👋
Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.
Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.
TALKING ABOUT TESTING 
Bom post. O should eu uso geralmente pra fazer a validação do teste em si, tipo o que o teste está realmente validando. Não costumo usar o should pra garantir que o campo esteja na tela. Uso o cy.get com timeout. Nunca tinha pensado em usar desta maneira.
Tem uma série de posts no blog oficial do Cypress onde eles recomendam isso como uma boa prática. Fico feliz que gostou!
Em breve novos conteúdos.
Olá! Estou com problema ao rodar os testes na pipeline. A seguinte mensagem é visualizada:
AssertionError: Timed out retrying after 80000ms: expected ” to contain ‘Nome de usuário ou senha inválida.’
Isso pq no meu código as mensagens estão em português, mas na pipeline ele lê em inglês. EU posso mudar as frases para inglês, mas qd eu for executar os testes local, vai dar erro pq o navegador (chrome) lê em português.
Tem algo que trate essas mensagens?
Oi Karina, você pode dar mais detalhes por favor? Quem sabe um snippet do seu código ajudaria.
Olá,
Uma dúvida, é possível ou tem sentido usar o .should(‘be.enabled’) ao invés do .should(‘be.visible’), visto que o campo, “nome” por exemplo, pode estar visível, mas não disponível para edição/preenchimento??
Exemplo:
it(‘realiza ordem de compra com sucesso’, () => {
cy.get(‘#fullName’)
.should(‘be.enabled)
.type(‘Walmyr Filho’)
}
Aguardo retorno.
Obrigada.
Sim Erica, se este é o caso, faz total sentido. Você pode até mesmo combinar ambos (ex.: cy.get(`#fullName`).should(`be.visible`).and(`be.enabled`).type(`Walmyr Filho`)