Tutorial de teste de transferidor: estrutura de ferramenta de automação

O que é teste de transferidor?

Transferidor é uma ferramenta de automação e teste orientado a comportamento de ponta a ponta que desempenha um papel importante no Ensaios de aplicações AngularJS e funciona como integrador de soluções combinando tecnologias poderosas como Selenium, Jasmine, driver da Web, etc. O objetivo do teste do transferidor não é apenas testar aplicativos AngularJS, mas também escrever testes de regressão automatizados para aplicativos da Web normais.

Por que precisamos da estrutura do transferidor?

JavaO script é usado em quase todos os aplicativos da web. Conforme os aplicativos crescem, JavaScript também aumenta em tamanho e complexidade. Nesse caso, torna-se uma tarefa difícil para os testadores testar a aplicação web em vários cenários.

Às vezes é difícil capturar os elementos da web em aplicativos AngularJS usando JUnit or Selenium WebDriver.

Transferidor é um programa NodeJS escrito em JavaO script é executado com o Node para identificar os elementos da web em aplicativos AngularJS e também usa o WebDriver para controlar o navegador com ações do usuário.

Ok, agora vamos discutir o que exatamente é um aplicativo AngularJS?

Aplicativos AngularJS são aplicativos da Web que usam sintaxe HTML estendida para expressar componentes de aplicativos da web. É usado principalmente para aplicações web dinâmicas. Esses aplicativos usam código menos flexível em comparação com aplicativos da Web normais.

Por que não podemos encontrar elementos da web Angular JS usando Normal Selenium Driver da Web?

Os aplicativos Angular JS têm alguns atributos HTML extras, como ng-repeater, ng-controller, ng-model .., etc., que não estão incluídos em Selenium localizadores. Selenium não é capaz de identificar esses elementos da web usando Selenium código. Então, transferidor no topo Selenium pode manipular e controlar esses atributos em aplicativos da Web.

O transferidor é uma estrutura de teste ponta a ponta para aplicativos baseados em Angular JS. Enquanto a maioria das estruturas se concentra na realização de testes unitários para aplicativos Angular JS, o Protractor se concentra em testar a funcionalidade real de um aplicativo.

Antes de iniciarmos o Transferidor, precisamos instalar o seguinte:

SeleniumVocê pode encontrar o Selenium Etapas de instalação nos links a seguir, (https://www.guru99.com/installing-selenium-webdriver.html )
Instalação do NPM (Node.js) NodeJS, precisamos instalar o NodeJS para instalar o Transferidor. Você pode encontrar essas etapas de instalação no link a seguir. ( https://www.guru99.com/download-install-node-js.html )

Instalação do transferidor

Passo 1) Abra o prompt de comando e digite “npm install –g transferidor” e pressione Enter.

O comando acima irá baixar os arquivos necessários e instalar o Protractor no sistema cliente.

Passo 2) Verifique a instalação e versão usando "Transferidor –versão. " Se for bem-sucedido, mostrará a versão conforme a imagem abaixo. Caso contrário, execute a etapa 1 novamente.

(As etapas 3 e 4 são opcionais, mas recomendadas para melhores práticas)

Passo 3) Atualize o gerenciador de driver da Web. O gerenciador de driver da web é usado para executar os testes no aplicativo da web angular em um navegador específico. Após a instalação do Transferidor, o gerenciador de driver da web precisa ser atualizado para a versão mais recente. Isso pode ser feito executando o seguinte comando no prompt de comando.

webdriver-manager update

Passo 4) Inicie o gerenciador de driver da web. Esta etapa executará o gerenciador de driver da web em segundo plano e ouvirá quaisquer testes executados por meio do transferidor.

Depois que o Transferidor for usado para executar qualquer teste, o driver da web carregará e executará automaticamente o teste no navegador relevante. Para iniciar o gerenciador de driver da web, o seguinte comando precisa ser executado no prompt de comando.

webdriver-manager start

Agora, se você acessar o seguinte URL (http://localhost:4444/wd/hub/static/resource/hub.html) em seu navegador, você verá o gerenciador de driver da Web em execução em segundo plano.

Exemplo de teste de aplicativo AngularJS usando Protractor

O transferidor precisa de dois arquivos para ser executado, um especulação arquivo e • Configuração arquivo.

Arquivo de configuração: Este arquivo ajuda o transferidor para onde os arquivos de teste são colocados (specs.js) e para conversar com Selenium servidor (Selenium Endereço). Chrome é o navegador padrão do Transferidor.

Arquivo de especificações: Este arquivo contém a lógica e os localizadores para interagir com a aplicação.

Passo 1) Temos que fazer login https://angularjs.org e digite o texto como “GURU99” na caixa de texto “Digite um nome aqui”.

Passo 2) Nesta etapa,

Digitei o nome “Guru99”
No texto de saída “Hello Guru99″ é visto.

Passo 3) Agora temos que capturar o texto da página web após inserir o nome e verificar com o texto esperado.

Código:

Temos que preparar o arquivo de configuração (conf.js) e arquivo de especificação (espec.js) como acima mencionado.

Lógica de spec.js:

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

Explicação do código de spec.js:

descreve('Insira o nome do GURU99', function() A sintaxe de descrição vem da estrutura Jasmine. Aqui, “descrever” ('Insira o nome do GURU99') normalmente define componentes de um aplicativo, que pode ser uma classe ou função, etc. chamado como “Enter GURU99”, é apenas uma string e não um código.
it('deve adicionar um nome como GURU99', function()
navegador.get('https://angularjs.org')Como em Selenium Webdriver browser.get abrirá uma nova instância do navegador com o URL mencionado.
elemento(por.model('seuNome')).enviarChaves('GURU99') Aqui estamos encontrando o elemento web usando o nome do modelo como “seuNome”, que é o valor de “ng-model” na página web. Verifique a captura de tela abaixo-

var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Aqui estamos encontrando o elemento web usando XPath e armazene seu valor em uma variável “guru”.
esperar(guru.getText()).para igual('Olá GURU99!') Finalmente estamos verificando o texto que obtivemos da página da web (usando gettext() ) com o texto esperado.

Lógica do conf.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

Explicação do código de conf.js

seleniumAddress: 'http://localhost:4444/wd/hub'O arquivo de configuração informa ao Protractor a localização de Selenium Endereço para conversar Selenium WebDriver.
specs: ['spec.js']Esta linha informa ao Transferidor a localização dos arquivos de teste spec.js

Execução do Código

Aqui primeiro, mudaremos o caminho do diretório ou navegaremos até a pasta onde confi.js e spec.js estão colocados em nosso sistema.

Siga o seguinte passo.

Passo 1) Abra o prompt de comando.

Passo 2) Certifique-se de que o gerenciador de driver da web Selenium esteja instalado e funcionando. Para isso dê o comando como “webdriver-manager start” e pressione Enter.

(Se o driver da web Selenium não estiver instalado e funcionando, não poderemos prosseguir com o teste, pois o Transferidor não consegue encontrar o driver da web para lidar com o aplicativo da web)

Passo 3) Abra um novo prompt de comando e dê o comando como “transferidor conf.js” para executar o arquivo de configuração.

Explicação:

Aqui o Transferidor executará o arquivo de configuração com o arquivo de especificação fornecido.
Podemos ver o servidor Selenium rodando em “http://localhost:4444/wd/hub”que fornecemos no arquivo conf.js.
Além disso, aqui você pode ver o resultado de quantos foram aprovados e falhas como na captura de tela acima.

Tudo bem, verificamos o resultado quando foi aprovado ou conforme o esperado. Agora vamos examinar também o resultado da falha.

Passo 1) Abra e altere o esperado para resultar em spec.js para “'Hello change GURU99” como abaixo.

Após mudança em spec.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

Passo 2) Salve o arquivo spec.js e repita as etapas acima da seção “Execução do código”

Agora, execute as etapas acima.

Resultado:

Podemos ver o resultado como falha indicado com 'F' na captura de tela com o motivo como “Esperado 'Olá GURU99!' para ser igual a 'Olá, mudança GURU99!'. Além disso, mostra quantas falhas são encontradas ao executar o código.

Podemos conseguir o mesmo com Selenium driver da web?

Às vezes podemos identificar os elementos da web de aplicativos AngularJS usando XPath ou seletor CSS de Selenium motorista web. Mas em aplicações AngularJS, os elementos serão gerados e alterados dinamicamente. Portanto, o Transferidor é a melhor prática para trabalhar com aplicativos AngularJS.

Gere relatórios usando Jasmine Reporters

O Protractor oferece suporte aos repórteres Jasmine para gerar relatórios de teste. Nesta seção, usaremos JunitXMLReporter para gerar relatórios de execução de testes automaticamente em formato XML.

Siga as etapas abaixo para gerar relatórios em formato XML.

Instalação do Jasmine Reporter

Existem duas maneiras de fazer isso, local ou globalmente

Abra o prompt de comando, execute o seguinte comando para instalar localmente

npm install --save-dev jasmine-reporters@^2.0.0

O comando acima instalará os módulos de nó dos relatórios jasmine localmente, significando a partir do diretório onde estamos executando o comando no prompt de comando.

Abra o prompt de comando e execute o seguinte comando para instalação global

npm install –g jasmine-reporters@^2.0.0

Neste tutorial, instalaremos os repórteres Jasmine localmente.

Passo 1) Execute o comando.

npm install --save-dev jasmine-reporters@^2.0.0

no prompt de comando como abaixo.

Passo 2) Verifique as pastas de instalação no diretório. ”Node_modules” deve estar disponível se for instalado com sucesso como no instantâneo abaixo.

Passo 3) Adicione o seguinte código colorido a um arquivo conf.js existente

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

Explicação do código:

No código, estamos gerando o relatório “JUnitXmlReporter”E fornecendo o caminho onde armazenar o relatório.

Passo 4) Abra o prompt de comando e execute o comando transferidor conf.js.

Passo 5) Ao executar o código acima, junitresults.xml será gerado no caminho mencionado.

Passo 6) Abra o XML e verifique o resultado. A mensagem de falha é mostrada no arquivo de resultado como nosso Caso de teste falhou. O caso de teste falhou porque o resultado esperado de “spec.js” não corresponde ao resultado real de uma página da Web

Passo 7) Utilize o arquivo junitresult.xml para evidências ou arquivos de resultados.

Resumo

Embora Selenium pode fazer algumas das coisas que o transferidor faz, o transferidor é o padrão industrial e a melhor prática para testar aplicativos AngularJS. Um Transferidor também pode gerenciar vários recursos nele e lidar com as mudanças dinâmicas de elementos da web usando modelo ng, ng-click.., etc.. (O que o selênio não pode fazer).

Você pode gostar: