ProtracTutorial de Teste Tor: Estrutura de Ferramenta de Automação

⚠️ Aviso de descontinuação: Protractor é obsoleto e arquivadoO suporte terminou em agosto de 2023 e o Angular CLI descontinuou sua versão Pro.tracConstrutor Tor após Angular 15. Escolha Dramaturgo, CypressWebdriverIO ou TestCafe para novos teste de ponta a pontaO passo a passo abaixo continua válido para as suítes antigas.

Por que precisamos de profissionais?tracFramework Tor?

JavaScripts são usados ​​em praticamente todos os aplicativos da web. À medida que os aplicativos crescem, JavaScript Além disso, aumenta em tamanho e complexidade. Nesse caso, torna-se uma tarefa difícil para os testadores testarem a aplicação web em diversos cenários.

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

ProtracTor é um programa Node.js 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.

Afinal, o que é exatamente uma aplicação AngularJS?

AngularJS Aplicações AngularJS são aplicações web que utilizam sintaxe HTML estendida para expressar componentes de aplicações web. São usadas principalmente para aplicações web dinâmicas. Essas aplicações utilizam menos código e são mais flexíveis em comparação com aplicações web tradicionais. Observe que o AngularJS 1.x deixou de ter suporte de longo prazo em 31 de dezembro de 2021, portanto, essas aplicações são consideradas legadas atualmente.

Por que não conseguimos encontrar elementos web do AngularJS usando o Normal? Selenium WebDriver?

Os aplicativos AngularJS possuem 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, Protractor no topo de Selenium Pode manipular e controlar esses atributos em aplicações web.

ProtracTor é um framework de testes de ponta a ponta para aplicações baseadas em AngularJS. Enquanto a maioria dos frameworks se concentra em realizar testes de compatibilidade, o Tor também se destaca na execução de testes de desempenho. testes de unidade Para aplicações AngularJS, ProtracO Tor se concentra em testar a funcionalidade real de um aplicativo.

Antes de começarmos o ProtracPara usar o Tor, precisamos instalar o seguinte:

1. Selenium: você pode encontrar o Selenium etapas de instalação em Selenium Guia de instalação do WebDriver.
2. NPM (Node.js): Precisamos instalar o Node.js para instalar o Pro.tractor. Você pode encontrar essas etapas de instalação no Guia de download e instalação do Node.js.

ProtracInstalação de tor

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

O comando acima fará o download dos arquivos necessários e instalará o Pro.tractor no sistema do cliente, conforme mostrado abaixo.

Passo 2) Verifique a instalação e versão usando "prótracversão tor. " 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 do WebDriver. O gerenciador do WebDriver é usado para executar testes no aplicativo web Angular em um navegador específico. Após o ProtracSe o Tor estiver instalado, o gerenciador do WebDriver precisa ser atualizado para a versão mais recente. Isso pode ser feito executando o seguinte comando no prompt de comando.

webdriver-manager update

Os arquivos binários do driver são baixados conforme mostrado abaixo.

Passo 4) Inicie o gerenciador do WebDriver. Esta etapa executará o gerenciador do WebDriver em segundo plano e ficará à escuta de quaisquer testes executados via `pro`.tracThor.

Após a execução de um teste, o WebDriver o carrega automaticamente no navegador correspondente. Inicie o gerenciador com o comando abaixo.

webdriver-manager start

O console exibe o endereço de escuta.

Agora, se você acessar o seguinte URL (http://localhost:4444/wd/hub/static/resource/hub.htmlNo seu navegador, você verá o gerenciador do WebDriver em execução em segundo plano.

Teste de exemplo de aplicação AngularJS usando Protractor

Com o gerenciador de drivers em execução, ProtracO Tor precisa de dois arquivos para funcionar, um especulação arquivo e • Configuração arquivo.

1. Arquivo de configuraçãoEste arquivo ajuda profissionaistractor para onde os arquivos de teste estão localizados (specs.js) e para se comunicar com Selenium servidor (Selenium Endereço). O Chrome é o navegador padrão do Pro.tracThor.
2. Arquivo de especificações: Este arquivo contém a lógica e os localizadores para interagir com a aplicação.

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

Passo 2) Nesta etapa,

1. Digitei o nome “Guru99"
2. No texto de saída "Olá" Guru99″ é visível.

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

Code:

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!');
  });
});

Code Explicação do arquivo spec.js:

1. descreve('Digite o nome GURU99', função()A sintaxe de descrição é de Estrutura JasmineAqui, “descrever” ('Digite o nome GURU99') normalmente define componentes de um aplicativo, que podem ser uma classe, uma função etc. No conjunto de códigos chamado “Digite o nome GURU99”, trata-se apenas de uma string e não de um código.
2. it('deve adicionar um nome como GURU99', function()
3. navegador.get('https://angularjs.org')Como em Selenium O WebDriver browser.get abrirá uma nova instância do navegador com o nome mencionado. URL.
4. elemento(por.model('seuNome')).enviarChaves('GURU99') Aqui estamos encontrando o elemento da web usando o nome do modelo como “yourName”, que é o valor de “modelo ng"na página da web. Veja a captura de tela abaixo-"

5. 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”.
6. 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']
};

Code Explicação do arquivo conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'O arquivo de configuração informa ao Protracpara a localização de Selenium Endereço para conversar Selenium WebDriver.
2. especificações: ['spec.js']Esta linha informa ao Protracpara a localização dos arquivos de teste spec.js

Execução do Code

Primeiro, navegue até a pasta onde os arquivos conf.js e spec.js estão localizados e, em seguida, siga os passos abaixo..

Passo 1) Abra o prompt de comando.

Passo 2) Certificar-se de que Selenium O gerenciador do WebDriver está em execução. Para isso, digite o comando “webdriver-manager start” e pressione Enter..

(E se Selenium O WebDriver não está em execução, portanto não podemos prosseguir com o teste como Pro.trac(O Tor não consegue encontrar o WebDriver para lidar com a aplicação web)

Passo 3) Abra um novo prompt de comando e dê o comando como "prótractor conf.js” Para executar o arquivo de configuração. A execução termina conforme mostrado abaixo.

Explicação:

• Aqui ProtracO Tor executará o arquivo de configuração que contém o arquivo spec fornecido.
• Podemos ver o Selenium servidor em execução 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.

Um resultado positivo foi verificado. Em seguida, analise um resultado negativo.

Passo 1) Abrir e alterar o resultado esperado no arquivo spec.js é "'Olá, altere 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 os passos acima de “Execução do Code" seção

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 durante a execução do código.

Podemos conseguir o mesmo com Selenium WebDriver?

Às vezes, elementos do AngularJS podem ser localizados com XPath ou seletores CSS. Selenium WebDriver. No entanto, esses elementos são gerados e reatribuídos dinamicamente, portanto ProtracO Tor era a opção mais segura para suítes de testes AngularJS.

Gere relatórios usando Jasmine Reporters

ProtracO Tor é compatível com os repórteres do Jasmine. Esta seção usa JUnitO XmlReporter permite gerar relatórios de execução de testes automaticamente em formato XML, seguindo os passos abaixo.

Instalação do Jasmine Reporter

Existem duas opções: local ou global.

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

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

O comando acima instala o pacote jasmine-reporters localmente, dentro do diretório onde ele é executado.

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

npm install –g jasmine-reporters@^2.0.0

Aqui, os repórteres são instalados 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 prótractor 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 O 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.

ProtracTor versus alternativas modernas de automação de testes

Desde ProtracComo o Tor não recebe mais atualizações, as equipes que planejam novos conjuntos de ferramentas precisam saber como ele se compara aos frameworks para os quais os projetos Angular estão migrando. A tabela abaixo compara o Protractor com as três alternativas que aparecem com mais frequência nas perguntas frequentes abaixo.

Equipes com um Pro existentetracO pacote Tor geralmente se move mais rapidamente para WebdriverIO, visto que seu estilo de comando e Selenium-o gerenciamento de motoristas baseado em Pro se mantém próximo ao que o ProtracOs testadores do Tor já sabem. Equipes que estão começando do zero, ou que precisam de testes mais rápidos, geralmente escolhem essa opção. Cypress ou dramaturgo, em vez disso.

Perguntas Frequentes