Como tirar screenshots ao longo dos testes com Cypress

Hoje em “pitadas de Cypress”, aprenda como tirar screenshots durante a execução dos testes, até mesmo de componentes específicos

Essa pitada vai pro André Souza, que um dia desses perguntou:

Como eu faço screenshot com Cypress para testes web?

Boa pergunta André!

Antes de mais nada, vale comentar que tal conhecimento pode ser de grande valia quando depurando falhas, criando artefatos de testes, ou até mesmo para a criação de conteúdos como este.

Para exemplificar, vou mostrar um teste do curso básico de Cypress da Escola TAT, onde testo a submissão de um formulário com sucesso.

it('submete o formulário com sucesso', () => {
  const customer = {
    firstName: 'João',
    lastName: 'Silva',
    email: 'joaosilva@example.com'
  }

  cy.screenshot('empty-form')
  cy.fillMandatoryFields(customer)
  cy.screenshot('form-filled')
  cy.contains("Confirm Tickets").click()

  cy.get('.success p')
    .should('contain', 'Ticket(s) successfully ordered.')
  cy.screenshot('success-message')
})

Antes do preenchimento do formulário, tiro uma screenshot, onde o nome do arquivo é empty-form (formuário vazio). Veja a screenshot abaixo.

Após o preenchimento dos campos obrigatórios, mas antes de submter o formulário, tiro outra screenshots, chamada form-filled (formulário preenchido). Veja a screenshot abaixo.

E por fim, após a verificação da mensagem de sucesso, tiro uma screenshot com o nome success-message. Veja a screenshot abaixo.

Obs.: Ao executar testes em modo headless, por padrão o Cypress tira screenshots em casos de falhas, mas agora você saber como fazer isso mesmo que os testes passem!

Bônus

E se você quiser, dá até pra tirar screenshot de um elemento HTML específico. Veja.

cy.get('.success p')
  .should('contain', 'Ticket(s) successfully ordered.')
  .screenshot('success-message-component')

Veja abaixo a screenshot tirada, a qual nomeei success-message-component.

Legal, né?

Então tá, por hoje é isso.

Obs. 2: Para mais detalhes sobre o uso do comando cy.screenshot(), consulte a documentação oficial do Cypress.

Gostou da “pitada de Cypress” de hoje?

Estou curioso para saber o que você gostaria de aprender em um próximo conteúdo. Deixa um comentário, e quem sabe escreverei a respeito!

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, e bons testes! 🎉