Uma introdução ao Protractor - Angular Testing E2E

Neste pequeno post pretendo condensar meu estudos referente a ferramenta Protactor compartilhando este pequeno documento como "guia" de consulta sobre o assunto.

O que são testes 🤔

O teste do software é a investigação do software a fim de fornecer informações sobre sua qualidade em relação ao contexto em que ele deve operar, se relaciona com o conceito de verificação e validação. Isso inclui o processo de utilizar o produto para encontrar seus defeitos.

Dito isso teste de softwares tem apenas uma finalidade revelar falhas/bugs para que sejam corrigidas até que o produto final atinja a qualidade desejada / acordada.

Com isso, seguimos um ciclo de desenvolvimento onde escrevemos:

• (Red): É a primeira fase do ciclo, em que o desenvolvedor escreve um código de teste para uma nova funcionalidade, ainda que não tenha o código de produção elaborado. Provavelmente, esse teste vai falhar, mas é justamente essa a intenção.
• (Green): Esta é a segunda etapa, em que é feito o código que irá passar no teste da etapa anterior. É importante que somente esse código seja escrito.
• (Refactoring): Esta é a etapa final, para limpar o código, melhorar estruturas, diminuir as linhas e aprimorar a performance.

      *Imagem referente ao ciclo do TDD.*

Existem também diversos tipos de testes de softwares alguns são:

• Teste de unidade – testa-se unidades menores de um software, de modo isolado, para ver se todas funcionam adequadamente;
• Teste de integração – depois das unidades testadas, realiza-se uma verificação se elas funcionam juntas, integradas. Pode ocorrer delas apresentarem incompatibilidades ao funcionarem em conjunto, mesmo após terem sido aprovadas no teste de unidade;
• Testes E2E - São baseados em regras e/ou requisitos associados à uma ação do usuário. Você parte do princípio que deverão existir reações satisfatórias para determinadas ações na sua interface (sucesso em um redirecionamento a partir de um link clicado, a validação de um formulário, se o pagamento de um produto foi confirmado, se o produto foi adicionado ao carrinho corretamente, etc).

Neste pequeno documento vamos estar vendo um pouco sobre como funciona testes do tipo E2E usando Angular com Protractor porém antes vamos entender um pouco sobre o que é essa ferramenta.

O que é o Protractor 🤔

Protractor é um framework de testes funcionais para aplicações AngularJS (Angular 2+) e funciona como uma solução integradora combinando poderosas ferramentas e tecnologias tais como NodeJS, Selenium, webDriver, Jasmine, Cucumber e Mocha.

Para que possamos fazer a instalação do protractor podemos seguir a documentação oficial da ferramenta neste link

Dito isso vamos entender um pouco sobre como funciona a sua estrutura.

e2e
├── protractor.conf.js
├── src
│   └── home
│       └── signin
│           ├── signin.e2e-spec.ts
│           └── signin.po.ts
└── tsconfig.e2e.json

• Dentro do diretório e2e temos o arquivo de configuração do protractor. É nele que vamos colocar todo o tipo de configuração que utilizaremos em nossos testes, como, por exemplo, o browser, a url padrão que acessaremos, a pasta na qual estão nossos testes e etc.
• Dentro do diretório home temos o componente que será testado no caso o signin.
• Dentro de signin temos os arquivos:
  • signin.e2e-spec - Arquivo onde temos os testes de signin.
  • signin.po - Arquivo onde iremos ter os métodos que iram utilizar a api do protractor.

Ex: signin.po

import { browser } from "protractor";

export class SigninPage {
  acessarPaginaHome() {
    return browser.get("");
  }
}

Dentro deste pequeno exemplo importamos de dentro de protractor o método browser, com isso exportamos uma class chamada SigninPage por exemplo **e dentro dela temos um pequeno método **acessarPaginaHome, dentro do método acessarPaginaHome iremos utilizar a função **get de browser para que possamos acessar uma rota informada.

Neste exemplo foi apenas passada uma string vazia, pois dentro do arquivo protractor.conf.js onde temos toda a configuração da ferramenta temos definido a url padrão do nosso projeto.

Agora dentro do arquivo signin.e2e-spec temos o seguinte conteúdo:

Ex: signin.e2e-spec

import { SigninPage } from "./signin.po";

describe("Testando a tela home", () => {
  let signinPage: SigninPage;
  beforeEach(() => {
    signinPage = new SigninPage();
  });

  it("Deve acessar a página Home", () => {
    expect(signinPage.acessarPaginaHome()).toBeNull();
  });
});

Describe

Primeiramente fazemos o import da classe SigninPage do arquivo signin.po como já vimos antes e utilizamos a função describe que define uma suíte de testes, passando como primeiro parâmetro uma descrição e o segundo parâmetro é um callback onde vão ter os testes.

Primeiramente definimos uma variável do signinPage do SigninPage a classe onde teremos os métodos para a utilização do protractor.

Em seguida temos a função beforeEach onde estamos definido que antes de rodar os nossos testes queremos ter uma instância de signinPage.

A função it é o teste em si, que vai ser executado. Ele recebe dois parâmetros também, uma descrição do teste e um callback. E dentro da função it temos o nosso primeiro teste

Describe, it, são funções referentes ao Jasmine que é um framework de testes JavaScript baseado na metodologia de desenvolvimento guiado por comportamento.

O Jasmine conta com seu próprio script de execução de testes, que utiliza uma página web para exibir os resultados dos testes executados, o desenvolvedor só precisa se preocupar em referenciar na página os scripts de dependências para execução dos testes, os scripts de testes e as implementações a serem testadas. A utilização deste script é bem simples e pode ser encontrado na documentação da ferramenta.

Rodando os testes 😎

Agora dentro da sua aplicação iremos rodar o comando webdriver-manager start que irá executar o Selenium na porta 4444 e dentro do nosso projeto angular você pode rodar o comando ng e2e que o angular irá cuidar de rodar todos os testes dentro de sua aplicação.

Testando a tela home
✓ Deve acessar a pagina Home

Executed 1 of 1 spec SUCCESS in 1 sec.

Pronto, o nosso primeiro teste rodando..👨‍💻

Links e referências:

• Jasmine*:* https://jasmine.github.io/
• Protractor: https://www.protractortest.org/#/