🌏 Inglês
Este módulo contém funções auxiliares que podem ser usadas com o framework Protractor para a criação de testes end-to-end robustos.
Muitas das funções auxiliares neste módulo usam a classe protractor.ExpectedConditions para garantir que os elementos com os quais queremos interagir estejam no estado correto antes da interação ou antes de realizar verificações nos elementos. Isto ajuda evitar tentar interagir com elementos quando eles ainda não estão prontos para isso, o que ajuda a evitar testes flaky.
-
Abrir para visualizar todas as funções disponíveis
setTimeoutisCurrentUrlDifferentFromBaseUrlwaitForAlertToBePresentwaitForElementPresencewaitForElementNotToBePresentwaitForElementVisibilitywaitForElementNotToBeVisibleclickhoverAndClickfillFieldWithTextfillFieldWithTextAndPressEnteruploadFileIntoInputFieldclearclearFieldAndFillItWithTexttapwaitForTextToBePresentInElementwaitForTextNotToBePresentInElementwaitForUrlToBeEqualToExpectedUrlwaitForUrlNotToBeEqualToExpectedUrlwaitForUrlToContainStringwaitForUrlNotToContainStringscrollToElement
- Utilizando métodos que iniciam com 'wait' como verificações de teste
- Recursos externos
- Contribuindo
- Código de conduta
- Créditos
- Licença
Digamos que você deseja criar um teste para o fluxo básico de login em uma aplicação exemplo.
Sem o protractor-helper o teste poderia ser escrito da seguinte forma:
const EC = protractor.ExpectedConditions;
const TIMEOUT_PADRAO_EM_MS = 5000;
describe("Página de login", () => {
it("login realizado com sucesso", () => {
browser.get("https://exemplo.com/login");
const campoEmail = element(by.id("email"));
const campoSenha = element(by.id("senha"));
const botaoDeLogin = element(by.id("login"));
browser.wait(EC.visibilityOf(campoEmail), TIMEOUT_PADRAO_EM_MS);
browser.wait(EC.visibilityOf(campoSenha), TIMEOUT_PADRAO_EM_MS);
browser.wait(EC.elementToBeClickable(botaoDeLogin), TIMEOUT_PADRAO_EM_MS);
campoEmail.sendKeys("email@valido.com");
campoSenha.sendKeys("senhavalida");
botaoDeLogin.click();
const avatar = element(by.id("avatar"));
browser.wait(EC.visibilityOf(avatar), TIMEOUT_PADRAO_EM_MS);
expect(avatar.isDisplayed()).toBe(true);
});
});O mesmo teste poderia ser escrito conforme abaixo, utilizando o módulo protractor-helper.
const protractorHelper = require("protractor-helper");
describe("Página de login", () => {
it("cadastro realizado com sucesso", () => {
browser.get("https://exemplo.com/login");
const campoEmail = element(by.id("email"));
const campoSenha = element(by.id("senha"));
const botaoDeLogin = element(by.id("login"));
protractorHelper.fillFieldWithText(campoEmail, "email@valido.com");
protractorHelper.fillFieldWithText(campoSenha, "senhavalida");
protractorHelper.click(botaoDeLogin);
const avatar = element(by.id("avatar"));
protractorHelper.waitForElementVisibility(avatar);
});
});Como você pode notar, utizando o módulo protractor-helper o código é mais legível e menos complexo.
Abaixo é descrito o processo de instalação do protractor-helper.
Execute o comando npm install protractor-helper --save-dev para instalar o módulo como uma dependência de desenvolvimento do seu projeto.
Após a instalação do protractor-helper você precisará requisitá-lo no seu arquivo de teste (veja abaixo).
// foobar.spec.js
const protractorHelper = require("protractor-helper");Assim que for importado no seu arquivo de testes, você poderá utilizar os métodos do protractor-helper.
Aqui você encontrará exemplos de uso de cada um dos métodos disponíveis. (Importante: leia as notas no topo)
Abaixo segue a lista de todas as funções disponíveis no protractor-helper com seus respectivos exemplos:
Este método permite alterar o timeout de todos os métodos chamados após o setTimeout.
O timeoutInMilliseconds padrão é 5000 milisegundos
Caso seja invocado sem que um parametro seja passado, o timeout será definido com o valor padrão.
Um exemplo de uso desse método é a necessidade de assegurar que a tela seja carregada dentro de XX segundos, devido uma necessidade expressa pelo gerente de produtos. Isso ocorre frequentemente em sistemas de e-commerce em datas especiais como a Black Friday.
Este método retorna um valor booleano dependendo se a URL atual é diferente da URL base e não necessita de parâmetros.
Este método espera até que um alerta esteja presente na página. Exemplo
Este método espera até que um elemento esteja presente no DOM.
Nota: Um elemento pode estar presente mas não visível. Se você deseja esperar até que o elemento esteja visível, use o método
waitForElementVisibility
Este método é o oposto do anterior, de tal forma que espera até que um elemento não esteja presente no DOM.
Este método aguarda até que um elemento esteja visível na página. Estar visível significa não apenas estar presente no DOM, mas também ter altura e largura maior que 0.
Este método é o oposto do anterior, de tal forma que espera que um elemento não esteja visível na página. Por não visível, entenda-se que o elemento pode estar no DOM mas não estar visível.
Este método é utilizado para efetuar um clique em um elemento assim que estiver em um estado visível e habilitado para o clique.
Este método é utilizado para mover o mouse sobre o elemento assim que estiver presente no DOM e então efetuar um clique.
Este método preenche um campo de input com um texto assim que estiver visível.
Este método preenche um campo de input com um texto assim que estiver visível e então simula a ação de pressionar a tecla ENTER do teclado. É utilizado em casos como fazer uma busca e pressionar ENTER, em vez de preencher o campo e clicar no botão de busca, por exemplo.
Este método efetua o upload de um arquivo em um input de arquivos assim que estiver presente no DOM.
Este método limpa o conteúdo de um campo de input assim que estiver visível.
Este método limpa o conteúdo de um campo de input assim que estiver visível, então preenche o mesmo com um texto.
Este método executa a ação de toque em um elemento HTML capaz de eventos de toque/clique assim que estiver em um estado possível de toque/clique. Tal método é utilizado quando se está fazendo testes web mobile em emuladores, por exemplo.
Este método espera por um texto específico em um determinado elemento HTML.
Este método é o oposto do anterior, de tal forma que espera que um texto não esteja presente em um determinado elemento HTML.
Este método aguarda até que a URL seja igual a outra esperada. Este método é útil quando se quer executar ações em elementos apenas se estiver na URL correta.
Este método aguarda até que a URL não seja igual a uma outra determinada URL. Este método é útil quando se quer continuar a executar ações em elementos apenas quando não estiver em uma URL específica.
Este método aguarda até que a URL contenha um determinado texto. É utilizado quando se deseja fazer verificações baseadas na URL atual.
Este método aguarda até que a URL não contenha um determinado texto. É utilizado quando se deseja fazer verificações baseadas na URL atual.
Este método é usado para rolar a página até um elemento até que tal elemento esteja visível no DOM.
Alguns dos métodos disponíveis nesta biblioteca podem ser utilizados como verificações de teste. Isto significa que quando usando eles, você não necessariamente precisa adicionar uma verificação explícita, tal como expect(avatar.isDisplayed()).toBe(true);.
Ao utilizar a biblioteca protractor-helper, isso pode acontecer de forma implícita (ex.: protractorHelper.waitForElementVisibility(avatar);). Aqui, implícita significa que a se a função waitForElementVisibility(avatar) passar, quer dizer que o elemento está visível, ou seja, está sendo exibido.
Abaixo você vai encontrar a lista de métodos que podem ser utilizados como verificações de teste:
waitForElementPresence(element)waitForElementNotToBePresent(element)waitForElementVisibility(element)waitForElementNotToBeVisible(element)waitForTextToBePresentInElement(element, text)waitForTextNotToBePresentInElement(element, text)waitForUrlToBeEqualToExpectedUrl(expectedUrl)waitForUrlNotToBeEqualToExpectedUrl(expectedUrl)waitForUrlToContainString(string)waitForUrlNotToContainString(string)
Obs.: se você utilizar tais métodos como verificações de teste eles não contarão como verificações no relatório de execução dos testes. Porém, em caso de falha, uma mensagem clara será exibida para facilitar o entendimento do porquê o teste falhou. No fim das contas, relatórios de testes são normalmente úteis quando os testes estão falhando e precisamos entender o porquê. Se todos os testes estiverem verdes, não há motivo para se preocupar, ao menos não se eles tiverem sido implementados da maneira correta.
Vejamos como uma falha é exibida quando usando alguns desses métodos como verificações de teste.
- Falha ao usar o método
waitForElementPresence:
Failed: element with locator 'By(css selector, *[id="foo"])' is not present.- Falha ao usar o método
waitForElementVisibility:
Failed: element with locator 'By(css selector, *[id="foo"])' is not visible.- Falha ao usar o método
waitForTextToBePresentInElement:
Failed: text 'foo' not present on element with locator 'By(css selector, h1)'.Como você pode verificar, as mensagens são claras e demonstram exatamente por que o teste falhou, tal como no exemplo anterior, onde um texto específico ('foo') não está presente em um elemento com o seletor CSS 'h1'.
Listamos aqui alguns recursos externos como postagens de blog as quais citam (ou usam) o protractor-helper.
- Lançamento do protractor-helper v4 - Breaking changes
- Lançamento da versão 4.1.1 do protractor-helper - Definições de tipos nas assinaturas das funções
- Por que não se deve utilizar sleeps em testes automatizados
- Uma versão simplificada de Page Objects para seus testes escritos com Protractor (EN)
Veja as orientações de contribuição.
Veja o código de conduta
O protractor-helper foi criado por Walmyr Filho e é mantido em conjunto com o Paulo Gonçalves.
Siga eles no Twitter (@walmyrlimaesilv e @paulorgoncalves).
Agradecimentos ao Lucas Amaral, Michiel Cuijpers, Ghazi Khan, Pedro Hyvo, Urvi Koladiya e Zidrex Andag por contribuírem com o projeto.