Screen capturing with Protractor

Bora documentar um pouco mais de aprendizado…

Screen Shot 2014-11-28 at 2.17.48 AMUma funcionalidade legal que um framework de testes automatizados pode ter é a possibilidade de guardar screenshots das verificações, tanto em casos de falha, para ajudar no processo de debug, como também para testes que passaram (funcionalmente), mas que podem estar com o estilo quebrado (interface do usuário).

Para fazer isso com o protractor devemos editar o arquivo spec.js adicionando a seguinte dependência (antes do describe):

var fs = require('fs');

Depois, dentro do describe, adicionamos a função que tira as screenshots (a qual pode depois se tornar um helper).

Esta função recebe o tipo de arquivo da screenshot e o nome do arquivo que será gerado, ou mesmo o path e nome do arquivo.

function takeScreenShot(fileType, filename) {
  var stream = fs.createWriteStream(filename);
  stream.write(new Buffer(fileType, 'base64'));
  stream.end();
}

E então, antes das verificações tiramos a screenshot propriamente dita, como exemplificado abaixo (neste exemplo, como no segundo argumento da função estamos passando o caminho onde o arquivo será salvo, além do nome do arquivo, este caminho deve ser previamente criado (ou seja, as pastas tmp/screenshots devem ser criadas):

it('should verify if the main web elements are present in the page', function() {
  var newTodo = element(by.id('new-todo'));
  browser.takeScreenshot().then(function (png) {
    takeScreenShot(png, 'tmp/screenshots/screenshot-1.png');
  });
  expect(newTodo.isPresent()).toBe(true);
});

Você pode encontrar um pouco mais de código tirando screenshots de uma aplicação real aqui.

Deixe seu comentário e até a próxima!

 

Anúncios

6 comentários em “Screen capturing with Protractor

  1. Comecei a brincar com o protractor em um projeto, e eu já ia procurar sobre as screenshots. Vou favoritar aqui pra voltar e ler depois. Eu queria pedir um post sobre page objects e diferenças em testar aplicação angular e non-angular. Eu já li sobre isso na internet, mas é sempre bom ter mais artigos em português pro povo conhecer mais.

  2. Sim, eu ja tinha visto André, exatamente quando comecei a estudar sobre screen capturing com Protractor, mas na época acabei tento alguma dificuldade. Você está usando? Que tal um post seu sobre o assunto?

Deixe um comentário

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 )

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s