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.

screenshot de um formulário vazio

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.

screenshot de um formulário preenchido

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

screenshot de um formulário com mensagem de sucesso

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.

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! 🎉

7 comentários em “Como tirar screenshots ao longo dos testes com Cypress

Deixe uma resposta para shard (@drahcir9) Cancelar resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s