Transferidor - Objetos

Este capítulo discute em detalhes sobre os objetos no Protractor.

O que são objetos de página?

O objeto de página é um padrão de design que se tornou popular para escrever testes e2e a fim de aprimorar a manutenção do teste e reduzir a duplicação de código. Ele pode ser definido como uma classe orientada a objetos servindo como uma interface para uma página de seu AUT (aplicativo em teste). Mas, antes de mergulhar nos objetos de página, devemos entender os desafios do teste de IU automatizado e as maneiras de lidar com eles.

Desafios com testes automatizados de IU

A seguir estão alguns desafios comuns com testes automatizados de IU -

Mudanças na interface do usuário

Os problemas muito comuns ao trabalhar com testes de IU são as mudanças que acontecem na IU. Por exemplo, acontece na maioria das vezes que botões ou caixas de texto, etc., geralmente são alterados e criam problemas para o teste de IU.

Falta de suporte DSL (Domain Specific Language)

Outro problema com o teste de IU é a falta de suporte DSL. Com esse problema, fica muito difícil entender o que está sendo testado.

Muita repetição / duplicação de código

O próximo problema comum em testes de IU é que há muita repetição ou duplicação de código. Pode ser entendido com a ajuda das seguintes linhas de código -

element(by.model(‘event.name’)).sendKeys(‘An Event’);
element(by.model(‘event.name’)).sendKeys(‘Module 3’);
element(by.model(‘event.name’));

Manutenção difícil

Devido aos desafios acima, torna-se uma dor de cabeça para manutenção. É porque temos que encontrar todas as instâncias, substituir pelo novo nome, seletor e outro código. Também precisamos gastar muito tempo para manter os testes alinhados com a refatoração.

Testes quebrados

Outro desafio nos testes de IU é a ocorrência de muitas falhas nos testes.

Maneiras de lidar com desafios

Vimos alguns desafios comuns de teste de IU. Algumas das maneiras de lidar com esses desafios são as seguintes -

Atualizando referências manualmente

A primeira opção para lidar com os desafios acima é atualizar as referências manualmente. O problema com esta opção é que devemos fazer a mudança manual no código, bem como em nossos testes. Isso pode ser feito quando você tem um ou dois arquivos de teste, mas e se você tiver centenas de arquivos de teste em um projeto?

Usando objetos de página

Outra opção para lidar com os desafios acima é usar objetos de página. Um objeto de página é basicamente um JavaScript simples que encapsula as propriedades de um modelo Angular. Por exemplo, o arquivo de especificação a seguir é escrito sem e com objetos de página para entender a diferença -

Without Page Objects

describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      browser.get('http://www.angularjs.org');
      element(by.model('yourName')).sendKeys('Julie');
      var greeting = element(by.binding('yourName'));
      expect(greeting.getText()).toEqual('Hello Julie!');
   });
});

With Page Objects

Para escrever o código com Objetos de Página, a primeira coisa que precisamos fazer é criar um Objeto de Página. Portanto, um objeto de página para o exemplo acima poderia ser parecido com este -

var AngularHomepage = function() {
   var nameInput = element(by.model('yourName'));
   var greeting = element(by.binding('yourName'));

   this.get = function() {
      browser.get('http://www.angularjs.org');
   };

   this.setName = function(name) {
      nameInput.sendKeys(name);
   };
   
   this.getGreetingText = function() {
      return greeting.getText();
   };
};
module.exports = new AngularHomepage();

Usando objetos de página para organizar testes

Vimos o uso de objetos de página no exemplo acima para lidar com os desafios do teste de IU. A seguir, vamos discutir como podemos usá-los para organizar os testes. Para isso, precisamos modificar o script de teste sem modificar a funcionalidade do script de teste.

Exemplo

Para entender esse conceito, estamos pegando o arquivo de configuração acima com objetos de página. Precisamos modificar o script de teste da seguinte maneira -

var angularHomepage = require('./AngularHomepage');
describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      angularHomepage.get();

      angularHomepage.setName('Julie');
   
      expect(angularHomepage.getGreetingText()).toEqual
      ('Hello Julie!');
   });
});

Aqui, observe que o caminho para o objeto da página será relativo à sua especificação.

Na mesma nota, também podemos separar nosso conjunto de testes em vários conjuntos de testes. O arquivo de configuração pode então ser alterado da seguinte forma

exports.config = {
   // The address of a running selenium server.
   seleniumAddress: 'http://localhost:4444/wd/hub',

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },
   // Spec patterns are relative to the location of the spec file. They may
   // include glob patterns.
   suites: {
      homepage: 'tests/e2e/homepage/**/*Spec.js',
      search: ['tests/e2e/contact_search/**/*Spec.js',
         'tests/e2e/venue_search/**/*Spec.js']
   },

   // Options to be passed to Jasmine-node.
   jasmineNodeOpts: {
      showColors: true, // Use colors in the command line report.
   }
};

Agora, podemos alternar facilmente entre a execução de um ou outro conjunto de testes. O comando a seguir executará apenas a seção da página inicial do teste -

protractor protractor.conf.js --suite homepage

Da mesma forma, podemos executar conjuntos específicos de testes com o comando da seguinte maneira -

protractor protractor.conf.js --suite homepage,search