No artigo anterior, falei sobre testes de unidade de NG. Hoje vou falar sobre o teste E2E (de ponta a ponta).
Quando testamos um único ponto funcional de um determinado módulo, o teste de unidade é mais adequado. No entanto, quando um bug ocorre quando um usuário interage com várias páginas, o teste de unidade não funciona. No momento, o E2E deve ser usado para simular operações do usuário e restaurar o site do problema. Obviamente, o uso do teste E2E também pode testar a robustez do programa. Muitas coisas que o teste de unidade não podem ser feitas pelos testes E2E.
Anteriormente, o NG usava o Runner de Cenário Angular para executar testes E2E e agora foi substituído pelo Transferidor para executar o E2E.
Transferidor
O transferidor é uma estrutura usada no AngularJS para testar E2E. É um módulo NPM e é construído no WebDriverjs. O transferidor pode realmente permitir que seus casos de teste sejam executados no navegador e simule completamente o comportamento real dos usuários.
Aqui estão alguns de seus endereços de recursos:
1. API de teste fornecida pelo transferidor
2. Exemplo de uso simples de transferidor
3. Guia WebDriverjs, este é o núcleo da dependência do transferidor, o módulo NPM é chamado de selênio-webdriver
Princípio da operação de transferidor
Transferidor depende das seguintes coisas para executar testes E2E:
1. As APIs do WebDriver, que são os WebDriverjs mencionados acima, são as APIs JS relacionadas fornecidas pelo Selenium para testes front-end.
2. O servidor de selenium, um pacote de jar de back -end, é usado para se comunicar com o driver do navegador
3. Os drivers do navegador da Webdriver são usados para exibir conteúdo real do site e se comunicar com o Selenium Server. Este é o local para transmitir operações reais do navegador.
Todo o processo de operação é o seguinte
Se você quiser saber mais sobre as interações anteriores desses componentes, clique aqui
Use NG Seed Project para explicar o E2E
Usamos o projeto de sementes fornecido pelo NG para explicar um exemplo real de E2E. Primeiro, use o seguinte comando para obter o projeto de semente
A cópia do código é a seguinte:
Git clone https://github.com/angular/angular-seed.git
Em seguida, corra
A cópia do código é a seguinte:
NPM Instale
Instalar todas as dependências relacionadas a
Aqui, falaremos primeiro sobre o arquivo de configuração necessário para executar o teste E2E. Você pode ver que o arquivo Test/PRIMERATOR-CONF.JS é usado para configurar funções relacionadas. Vamos nos concentrar em vários atributos
1.Specs representa o caminho do arquivo de teste a ser executado, e o escrito aqui é E2E/*. JS
2.Baseurl representa o endereço raiz da página salto entre os navegadores no arquivo de teste
3. Os recursos representam qual navegador usar para executar casos de teste, como o uso do Chrome, você pode defini -lo assim
A cópia do código é a seguinte:
Recursos: {
'Nome de navegação': 'Chrome'
}
A estrutura representa qual estrutura de teste para usar, aqui está Jasmine
Se você quiser saber mais sobre esse arquivo de configuração, clique aqui para visualizá -lo.
Depois de falar sobre o arquivo de configuração, vamos dar uma olhada no caminho para escrever casos de teste e postar um exemplo no site oficial primeiro.
A cópia do código é a seguinte:
'Use rigoroso';
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md */
descreva ('meu aplicativo', function () {
navegador.get ('index.html');
ele ('deve redirecionar automaticamente para /view1 quando a localização hash /fragmento está vazia', function () {
espera (navegador.getLocationABsurl ()). Tomatch ("/view1");
});
descrever ('view1', function () {
antes e cada vez (function () {
navegador.get ('index.html#/view1');
});
ele ('deve renderizar view1 quando o usuário navegar para /view1', function () {
Espere (element.all (by.css ('[ng-view] p')). primeiro (). getText ()).
tomatch (/parcial para exibição 1/);
});
});
descrever ('view2', function () {
antes e cada vez (function () {
navegador.get ('index.html#/view2');
});
ele ('deve renderizar view2 quando o usuário navegar para /view2', function () {
Espere (element.all (by.css ('[ng-view] p')). primeiro (). getText ()).
tomatch (/parcial para exibição 2/);
});
});
});
Primeiro de tudo, a sintaxe acima é o método de escrita suportado pela estrutura de jasmim. Se você não entende seu uso, pode clicar aqui
Aqui vamos falar apenas sobre alguns métodos e propriedades comuns fornecidos pelo transferidor no exemplo acima
1.Browser, um objeto global, representa uma instância do navegador atual. O método GET comumente usado é usado para implementar a alteração de endereço do navegador.
2. Elemento, objeto global, fornece funções como jQuery responsáveis por encontrar elementos de documentos e geralmente são usados no uso conjunta por objetos.
3.BLE, Global Object, fornece um tipo de seletor, por exemplo, você pode encontrar um elemento através de CSS, Modelo, Bind e outros recursos.
Para o método de elemento e, por favor, consulte a documentação da API de transferidor acima
Tendo dito muito, é hora de executar os casos de teste acima, o comando é relativamente simples
A cópia do código é a seguinte:
NPM Run Update-Webdriver
Isso é responsável por baixar os drivers do navegador relevante e os pacotes de jar local do servidor de selênio. Geralmente, isso falha porque os dois recursos estão no servidor do Google, para que você possa usar o navegador para navegar na parede para baixá -lo separadamente. O endereço é o seguinte:
1. Endereço do driver Chrome, geralmente baixe o arquivo Chromedriver_2.9.zip.
2. Faça o download do pacote local de selanium-servidor, geralmente baixe o arquivo Selenium-Server-Standalone-2.40.0.jar.
Em seguida, copie o servidor de selênio para a pasta selênio no pacote de transferidor. Se o comando acima cronometrado, o arquivo aparecerá aqui, mas estará vazio, basta substituí -lo diretamente. Você também precisa copiar o arquivo após a descompressão do Chromedriver_2.9.zip para aqui.
Finalmente, execute o seguinte comando para ver os resultados do teste
A cópia do código é a seguinte:
NPM Run PRARMATOR
Se você quiser saber mais sobre a linha de comando no projeto NG Seed, você pode clicar aqui para visualizá -lo
Resumir
O teste NG E2E é muito mais complicado que a configuração do teste de unidade, mas pode fazer muitas coisas. Se você vale muito a pena, também pode tentar. Se você tiver alguma dúvida, poderá responder aos comentários.