Screen capturing with Protractor

Bora documentar um pouco mais de aprendizado…

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