Quando a complexidade e o tamanho de um aplicativo aumentam, é impraticável confiar no teste manual da confiabilidade, captura de bugs e teste de regressão de novos recursos.
Para resolver esse problema, estabelecemos o Runner de Cenário Angular para imitar as operações do usuário e nos ajudar a verificar a robustez de aplicações angulares.
1. Resumo
Podemos escrever testes de cenário em JavaScript para descrever o comportamento de nossa aplicação e interagir com certos estados. Um cenário consiste em um ou mais blocos de "TI" (podemos tratá -los como requisitos para o nosso aplicativo), que são compostos nos comandos e expectativas. O comando diz ao corredor para fazer algo no aplicativo (como ir a uma página ou clicar em um botão), e a expectativa diz ao corredor para julgar algo sobre o estado (como o valor de um determinado domínio ou o URL atual). Se alguma expectativa falhar, o corredor tag esse "it" como "false" e continua com o próximo "it". O cenário também pode ter bloqueios "antes dos cada" e "pós -cada" que funcionam antes ou depois de cada bloqueio "it", independentemente de passar ou não.
Além dos elementos acima, o cenário também pode incluir funções auxiliares para evitar o código duplicado no bloco "It".
Aqui está um exemplo de cenário simples:
Descreva ('Buzz Client', function () {It ('Deve filtrar resultados', function () {input ('User'). Enter ('JackSparrow'); Element (': Button'). Click (); espera ('Repeater (' ul li '). Count ()). li '). count ()). toequal (1);});});Esse cenário descreve os requisitos do cliente de rede e, explicitamente, deve ter a capacidade de filtrar os usuários. Começa inserindo um valor na caixa de entrada "Usuário", clicando no botão único na página e, em seguida, verificando que há uma lista de 10 itens. Em seguida, ele entra "abelhas" na caixa de entrada de "filtroText" e verifique se a lista será reduzida para apenas um item.
O seguinte capítulo da API lista o comando e expectativa disponíveis no corredor.
2. API
Código fonte: https://github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
pausa()
Pause a execução do teste até chamarmos o currículo () no console (você também pode clicar no link de currículo na interface do corredor)
sono (segundos)
Pausar a execução do teste por n segundos.
navegador (). Navigateto (URL)
Carregue o URL especificado no setFrame.
navegador (). Navigateto (url, fn)
Carregue o URL retornado por FN no quadro de teste. O parâmetro URL aqui é usado apenas como saída de teste. Esta API pode ser usada quando o URL de destino é dinâmico (o endereço ainda é desconhecido ao escrever testes).
navegador (). Reload ()
Atualize a página atualmente carregada no quadro de teste.
navegador (). window (). href ()
Retorne ao Window.Location.Href da página atual do quadro de teste.
navegador (). Window (). PATH ()
Retorna a janela.Location.PathName da página atual do quadro de teste.
navegador (). window (). pesquisa ()
Retorne ao window.Location.search da página atual do quadro de teste.
navegador (). Window (). Hash ()
Retorna a janela.Location.Hash (não incluindo #) da página atual do quadro de teste.
navegador (). localização (). url ()
Retorne o resultado de $ local.url () da página atual (http://docs.angularjs.org/api/ng.$location)
navegador (). Local (). Caminho ()
Retorne o resultado de $ local.path () da página atual (http://docs.angularjs.org/api/ng.$location)
navegador (). localização (). pesquisa ()
Retorne o resultado da localização $ da página atual. Search () (http://docs.angularjs.org/api/ng.$location)
navegador (). Local (). Hash ()
Retorne o resultado de $ local. Hash () da página atual (http://docs.angularjs.org/api/ng.$location)
Espere (futuro). {Matcher}
Determina se o valor futuro fornecido satisfaz o Matcher. Todas as declarações da API retornam um objeto futuro com um valor especificado obtido após serem executados. O Matcher é definido usando o Angular.SceNario.Matcher e usa o valor do futuro para executar a expectativa. Por exemplo:
Espere (Browser () .Location () .href ()) .ToEqual ('http://www.google.com');
Espere (futuro) .Not (). {Matcher}
Determina se o valor de um determinado futuro é o oposto das expectativas esperadas do Matcher especificado.
Usando (seletor, etiqueta)
Escopos a próxima seleção de elementos DSL. (Presumivelmente limita o escopo do seletor, as estimativas de etiquetas são usadas para testar a saída)
exemplo:
usando ('#foo', "'foo' campo de texto"). Input ('bar')
encadernação (nome)
Retorna a primeira ligação que corresponde ao nome especificado (talvez relacionado à NG-Bind).
entrada (nome) .Enter (valor)
Digite o valor especificado no campo de nome do formulário especificado.
entrada (nome) .check ()
Selecione ou desmarque a caixa de seleção do nome especificado.
entrada (nome) .select (valor)
Selecione entrada [type = "Radio"] com o valor mediano de rádio do nome especificado.
entrada (nome) .val ()
Retorna o valor atual da entrada do nome especificado.
repetidor (seletor, etiqueta) .Count ()
Retorna o número de linhas do repetidor que corresponde ao seletor especificado (seletor de jQuery). A etiqueta é usada apenas como saída de teste.
Repetidor ('#Tabela de produtos', 'Lista de produtos'). count () // Número de linhas
repetidor (seletor, etiqueta) .row (índice)
Retorna uma matriz, vinculando as linhas especificadas no repetidor que corresponde ao índice especificado. A etiqueta é usada apenas para testar a saída.
Repetidor ('#Tabela de produtos', 'Lista de produtos'). Linha (1) // Todas as ligações na linha como uma matriz
repetidor (seletor, etiqueta) .column (ligação)
Retorna uma matriz com o valor da coluna no repetidor correspondendo à ligação especificada que corresponde ao seletor especificado (seletor de jQuery). A etiqueta é usada apenas para testar a saída.
Repeater ('#Tabela de produtos', 'Lista de produtos').
Selecione (nome) .Option (valor)
Selecione a opção para especificar o valor na seleção do nome especificado.
selecione (nome) .Option (Value1, Value2)
Selecione a opção (múltipla escolha) do valor especificado na seleção do nome especificado.
elemento (seletor, etiqueta) .Count ()
Retorna o número de elementos que correspondem ao seletor especificado. A etiqueta é usada apenas como saída de teste.
elemento (seletor, etiqueta) .Click ()
Clique no elemento que corresponde ao seletor especificado. A etiqueta é usada apenas como saída de teste.
elemento (seletor, etiqueta) .Query (FN)
Execute o FN especificado (SelectedElements, feito) e o SeletetedElement é o conjunto de elementos que correspondem ao seletor especificado; e feito é uma função que será executada após a execução do FN. A etiqueta é usada apenas como saída de teste.
elemento (seletor, etiqueta). {Method} ()
Retorna o valor de retorno da execução do método no elemento que corresponde ao seletor especificado. O método pode ser os seguintes métodos jQuery: val, texto, html, altura, interior, externo, largura, largura interna, largura externa, posição, scrollLelft, scrolltop, deslocamento. A etiqueta é usada apenas como saída de teste.
elemento (seletor, etiqueta). {Method} (valor)
Execute o método especificado no elemento que corresponde ao seletor especificado e use a chave e o valor como parâmetros. O método pode ser os seguintes métodos jQuery: val, texto, html, altura, interior, externo, largura, largura interna, largura externa, posição, scrollLelft, scrolltop, deslocamento. A etiqueta é usada apenas como saída de teste.
elemento (seletor, etiqueta). {Método} (chave)
Retorna o resultado da execução de um método especificado no elemento que corresponde ao seletor especificado. Esses métodos podem ser os seguintes métodos jQuery: att, prop, css. A etiqueta é usada apenas como saída de teste.
elemento (seletor, etiqueta). {Método} (chave, valor)
Execute o método no elemento que corresponde ao seletor especificado e pegue a chave e o valor como parâmetros. Esses métodos podem ser os seguintes métodos jQuery: att, prop, css. A etiqueta é usada apenas como saída de teste.
O JavaScript é uma linguagem dinamicamente digitada que traz expressões poderosas, mas também nos dá pouca ajuda do compilador. Portanto, sentimos fortemente que qualquer código escrito em JavaScript requer muitos testes abrangentes e abrangentes. A Angular possui muitos recursos que facilitam o teste de nossos aplicativos. Portanto, não temos desculpa para não escrever testes. (-_- !!)
O exposto acima é uma coleção de informações sobre o teste do AngularJS E2E. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!