Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

Utilizando locators em testes com Protractor

Semana passada fiz um post sobre como dar os primeiros passos utilizando Protractor e nesse post vou falar um pouco dos locators, ou localizadores.

Quando realizamos testes end-to-end estamos, na verdade, procurando elementos em uma árvore DOM (Document Object Model), interagindo com eles e analisando o estado da aplicação que está sendo testada.

Dessa forma, para escrever bons testes tenha em mente que é fundamental conhecer bem os locators pois a escolha adequada deles facilita a manutenção e a legibilidade dos seus scripts de teste.

Como funciona a localização de elementos?

O Protractor exporta uma função global chamada element que recebe um locator e retorna um ElementFinder. O que isso quer dizer?

Informamos à função global element qual o localizador que identificará o elemento que estamos procurando e, caso o elemento seja encontrado, será retornado por essa função para que possamos interagir com ele.

Para casos onde é necessário encontrar múltiplos elementos que satisfaçam uma determinada condição, o Protractor provê a função element.all que retorna um array de elementos identificados através do locator fornecido.

Existem locators específicos para aplicações AngularJs?

Sim, alguns locators são baseados em diretivas do AngularJs e, quando essas diretivas existirem no DOM, devem ter prioridade acima dos locators comuns.

Alguns dos locators específicos para aplicações AngularJs são:

  • by.binding : Essa diretiva é capaz de veicular conteúdo a elementos HTML. A utilização desse locator permite encontrar elementos utilizando seus conteúdos como argumentos.

  • by.model : Aplicações AngularJs utilizam arquitetura MVC e utilizando esse locator, é possível encontrar elementos através dos valores do ngModel.

  • by.repeater: A diretiva ngRepeater possibilita que vários itens de uma coleção sejam criados baseados em um template. Utilizando esse locator, os elementos também podem ser encontrados baseados no index de uma coleção.

E os locators comuns?

Os locators comuns também são suportados pelo Protractor e muitos deles já são conhecidos, como:

  • by.css
  • by.id
  • by.name
  • by.xpath

Posso ver alguns exemplos?

Para exemplificar o uso de alguns locators, utilizei a página Super Calculator e o código do projeto inteiro de testes pode ser acessado no meu GitHub.

A página é uma calculadora simples, que possui a seguinte estrutura:

Super Calculator
DOM

Baseada nessa estrutura, criei o arquivo locators.spec para demonstrar a utilização de locators específicos do Protractor e comuns.

Após criar o script, executei o comando protractor conf.js e todos os elementos foram verificados corretamente:

protractor conf.js