JavaScript

Protractor Salvando Screenshot

No post Testes e2e com Protractor fiz uma introdução ao Protractor e vimos que toda interação com o navegador é feito através da variável global browser.

Hoje vou mostrar como salvar uma imagem (screenshot) ao final de cada spec utilizando a função browser.takeScreenshot().

1
2
3
4
5
afterEach(function () { //Rodar sempre depois de cada spec
  browser.takeScreenshot().then(function (arquivo) {
  //arquivo contém o buffer do screenshot
  });
});

Como o Protractor roda no Node.js, vamos utilizar o fs.createWriteStream para salvar a imagem no diretório screenshots (Não esqueça de criar o diretório antes de rodar).

O Jasmine disponibiliza no objeto jasmine.getEnv().currentSpec várias informações do spec atual. Podemos obter a descrição do spec, o resultado se foi sucesso ou erro e várias outras informações.

Usaremos como nome do arquivo a descrição do spec atual, substituindo espaços por -.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var fs = require('fs'),
    path = require('path');

afterEach(function () { //Rodar sempre depois de cada spec
  var specAtual = jasmine.getEnv().currentSpec, //informações do spec atual
      diretorio = 'screenshots/';

  browser.takeScreenshot().then(function (arquivo) {
    //Nome do arquivo trocando espaço por -
    var NomeArquivo = specAtual.description.split(' ').join('-') + '.png';

    //Salva o arquivo no diretório
    var stream = fs.createWriteStream(path.join(diretorio, NomeArquivo));
    stream.write(new Buffer(arquivo, 'base64'));
    stream.end();
  });
});

As vezes queremos salvar somente o screenshot dos testes que falharam. Podemos fazer a verificação comparando o resultado do spec atual.
1
2
3
4
5
6
7
8
//...
afterEach(function () { //Rodar sempre depois de cada spec
  var specAtual = jasmine.getEnv().currentSpec, //informações do spec atual
  //...
  if(!specAtual.results().passed()) {
    //browser.takeScreenshot()....
  }
});

Criando módulo

Para reaproveitar o código em outros testes, podemos criar um módulo com as funções takeScreenshot e takeScreenshotIfError que salva a imagem somente se o teste falhar.

Para o exemplo criamos o módulo no arquivo ScreenShot.js

ScreenShot.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var fs = require('fs'),
    path = require('path');

module.exports = {
  //Salva a imagem
  takeScreenshot: function(specAtual) {
    var diretorio = 'screenshots/';
    browser.takeScreenshot().then(function (arquivo) {
      //Nome do arquivo trocando espaço por -
      var NomeArquivo = specAtual.description.split(' ').join('-') + '.png';
      var stream = fs.createWriteStream(path.join(diretorio, NomeArquivo));
      stream.write(new Buffer(arquivo, 'base64'));
      stream.end();
    });
  },
  //Salva a imagem somente se o teste falhar
  takeScreenshotIfError: function(specAtual) {
    if (!specAtual.results().passed())
      this.takeScreenshot(specAtual);
  }
}

Aplicando o módulo ao teste
1
2
3
4
5
6
var screenshot = require('./ScreenShot');
//...
afterEach(function () { //Rodar sempre depois de cada spec
  var specAtual = jasmine.getEnv().currentSpec;
  screenshot.takeScreenshot(specAtual);
});

Até os próximos artigos!