O que é teste de transferidor?
PROTRACTOR é uma ferramenta de automação e teste de comportamento de ponta a ponta que desempenha um papel importante no teste de aplicativos AngularJS e funciona como um integrador de solução combinando tecnologias poderosas como Selenium, Jasmine, driver da Web, etc. O propósito do teste de prolongador não serve apenas para testar aplicativos AngularJS, mas também para escrever testes de regressão automatizados para aplicativos da Web normais.
Neste tutorial para iniciantes, você aprenderá-
- Por que precisamos da estrutura do transferidor?
- Instalação do transferidor
- Amostra de teste de aplicativo AngularJS usando Protractor
- Execução do Código
- Gerar relatórios usando Jasmine Reporters
Por que precisamos da estrutura do transferidor?
JavaScript é usado em quase todos os aplicativos da web. Conforme os aplicativos crescem, o JavaScript também aumenta em tamanho e complexidade. Nesse caso, torna-se uma tarefa difícil para os testadores testar o aplicativo da web para vários cenários.
Às vezes, é difícil capturar os elementos da web em aplicativos AngularJS usando JUnit ou Selenium WebDriver.
Protractor é um programa NodeJS escrito em JavaScript e executado com Node para identificar os elementos da web em aplicativos AngularJS e também usa WebDriver para controlar o navegador com ações do usuário.
Ok, agora vamos discutir o que exatamente é um aplicativo AngularJS?
Os aplicativos AngularJS são aplicativos da Web que usam a sintaxe HTML estendida para expressar os componentes do aplicativo da web. É usado principalmente para aplicativos da web dinâmicos. Esses aplicativos usam menos código e flexível em comparação com aplicativos da Web normais.
Por que não podemos encontrar elementos da web Angular JS usando o driver Normal Selenium Web?
Os aplicativos Angular JS têm alguns atributos HTML extras, como ng-repetidor, ng-controlador, ng-model ..., etc., que não estão incluídos nos localizadores Selenium. O Selenium não é capaz de identificar esses elementos da web usando o código Selenium. Portanto, o Transferidor na parte superior do 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 dos frameworks se concentra na realização de testes de unidade 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:
- Selênio
Você pode encontrar as etapas de instalação do Selenium nos seguintes links, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Instalação do NodeJS, precisamos instalar o NodeJS para instalar o Protractor. 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
Etapa 1) Abra o prompt de comando e digite "npm install -g protractor" e pressione Enter .
O comando acima baixará os arquivos necessários e instalará o Protractor no sistema cliente.
Etapa 2) Verifique a instalação e a versão usando " Protractor --version ". Se for bem-sucedido, ele mostrará a versão como na imagem abaixo. Caso contrário, execute a etapa 1 novamente.
(As etapas 3 e 4 são opcionais, mas recomendadas para melhores práticas)
Etapa 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 Protractor, 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
Etapa 4) Inicie o gerenciador de driver da web. Esta etapa executará o gerenciador de driver da web em segundo plano e ouvirá todos os testes executados por meio do transferidor.
Assim que o Protractor for usado para executar qualquer teste, o driver da web irá carregar automaticamente e executar 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 a seguinte URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) em seu navegador, verá o gerenciador de driver da Web em execução em segundo plano.
Amostra de teste de aplicativo AngularJS usando Protractor
O Protractor precisa de dois arquivos para ser executado, um arquivo de especificação e um arquivo de configuração .
- Arquivo de configuração : Este arquivo ajuda o transferidor para onde os arquivos de teste são colocados (specs.js) e para falar com o servidor Selenium (Endereço Selenium). Chrome é o navegador padrão do Protractor.
- Arquivo de especificações: este arquivo contém a lógica e os localizadores para interagir com o aplicativo .
Etapa 1) Temos que fazer o login https://angularjs.org e inserir o texto como "GURU99" na caixa de texto "Insira um nome aqui".
Etapa 2) Nesta etapa,
- Introduziu o nome "Guru99"
- Na saída, o texto "Hello Guru99" é visto.
Passo 3) Agora temos que capturar o texto da página web após inserir o nome e precisamos verificar com o texto esperado .
Código:
Temos que preparar o arquivo de configuração (conf.js) e o arquivo spec (spec.js) conforme mencionado acima.
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:
- descrever ('Digite o nome GURU99', função ()
A sintaxe de descrição é da estrutura Jasmine. Aqui, "descrever" ('Digite o nome GURU99') normalmente define os componentes de um aplicativo, que pode ser uma classe ou função, etc. No conjunto de códigos denominado "Digite GURU99", é apenas uma string e não um código.
- it ('deve adicionar um nome como GURU99', function ()
- browser.get ('https://angularjs.org')
Como no Selenium Webdriver browser.get abrirá uma nova instância do navegador com o URL mencionado.
- elemento (por.modelo ('seuNome')). sendKeys ('GURU99')
Aqui, estamos encontrando o elemento da web usando o nome do modelo como "seuNome", que é o valor de "ng-model" na página da 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 da web usando XPath e armazenamos seu valor em uma variável "guru" .
- esperar (guru.getText ()). toEqual ('Olá GURU99!')
Finalmente, estamos verificando o texto que obtivemos da página da web (usando gettext ()) com o texto esperado.
Lógica de 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 do Selenium Address para falar com o Selenium WebDriver.
- especificações: ['spec.js']
Esta linha informa ao Protractor a localização dos arquivos de teste spec.js
Execução do Código
Aqui, primeiro, vamos alterar o caminho do diretório ou navegar até a pasta onde confi.js e spec.js estão colocados em nosso sistema .
Siga o seguinte passo.
Etapa 1) Abra o prompt de comando.
Etapa 2) Certifique-se de que o gerenciador de driver da web selênio esteja instalado e funcionando. Para isso dê o comando "webdriver-manager start" e pressione Enter .
(Se o driver da web selenium não estiver instalado e funcionando, não podemos prosseguir com o teste, pois o Protractor não consegue encontrar o driver da web para lidar com o aplicativo da web)
Etapa 3) Abra um novo prompt de comando e digite o comando "protractor conf.js" para executar o arquivo de configuração.
Explicação:
- Aqui, o Protractor executará o arquivo de configuração com o arquivo de especificação fornecido nele.
- Podemos ver o servidor selenium em execução em " http: // localhost: 4444 / wd / hub ", que fornecemos no arquivo conf.js.
- Além disso, aqui pode ver o resultado de quantas foram aprovadas e falhas como na imagem acima .
Tudo bem, verificamos o resultado quando ele é aprovado ou conforme o esperado. Agora, vamos examinar o resultado da falha também.
Etapa 1) Abra e mude o esperado para resultar em spec.js para "'Hello change GURU99" como abaixo.
Após a 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!');});});
Etapa 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!' igual a 'Hello change GURU99!'. Além disso, mostra quantas falhas foram encontradas ao executar o código.
Podemos conseguir o mesmo com o driver da web Selenium?
Às vezes, podemos identificar os elementos da web de aplicativos AngularJS usando XPath ou seletor CSS do driver da web Selenium. Mas em aplicativos AngularJS, os elementos serão gerados e alterados dinamicamente. Portanto, o Transferidor é a melhor prática para trabalhar com aplicativos AngularJS.
Gerar relatórios usando Jasmine Reporters
O Protractor ajuda os repórteres Jasmine a gerar relatórios de teste. Nesta seção, usaremos JunitXMLReporter para gerar relatórios de execução de teste automaticamente no 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 e execute o seguinte comando para instalar localmente
npm install --save-dev jasmine-reporters@^2.0.0
O comando acima irá instalar o jasmine reports node-modules localmente 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 .
Etapa 1) Execute o comando.
npm install --save-dev jasmine-reporters@^2.0.0
a partir do prompt de comando como abaixo.
Etapa 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.
Etapa 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.
Etapa 4) Abra o prompt de comando e execute o comando protractor conf.js.
Etapa 5) Ao executar o código acima, junitresults.xml será gerado no caminho mencionado.
Etapa 6) Abra o XML e verifique o resultado. A mensagem de falha é mostrada no arquivo de resultado, pois 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
Etapa 7) Use o arquivo junitresult.xml para evidências ou arquivos de resultados.
Resumo:
Embora o Selenium possa fazer algumas das coisas que o transferidor faz, o transferidor é o padrão industrial e a prática recomendada para testar aplicações AngularJS. Um transferidor também pode gerenciar vários recursos nele e lidar com as mudanças dinâmicas de elementos da web usando ng-model, ng-click ..., etc ... (o que o selênio não pode fazer).
Este artigo é uma contribuição de Ranjith Kumar Enishetti