Primeiras aulas do curso Protractor: Testes automatizados com javascript

Protractor: Testes automatizados com javascript

Entendendo o Protractor - Introdução

Olá.

Eu sou o Gustavo Oshiro e dou as boas vindas ao curso de Protractor aqui da Alura.

Protractor que é uma ferramenta que utiliza o Selenium para dominação de elementos do DOM.

Então, como faremos isso?

Através dessa plataforma chamada Alurapic que foi desenvolvida também aqui na Alura.

Com ele, nós podemos buscar, carregar, editar, curtir, excluir uma imagem.

Então, testaremos esse sistema.

Mas como faremos isso?

Através do código que desenvolveremos com o Protractor.

Mas como também utilizaremos o Protractor através dos elementos dele que, quais são?

Os elements, o busca por classe CSS, por ID e todos os métodos que ele disponibiliza para nós. Então, bora lá?

Entendendo o Protractor - Instalações iniciais

Agora para a gente começar o nosso projeto, preparar nosso ambiente, a gente precisa instalar o Node porque como o nosso projeto vai ser todo em Javascript, a gente precisa ter o Node instalado na máquina.

No caso, a gente precisa ter uma versão específica dele, que é essa versão 10.4.0.

Vou só mostrar como é que eu cheguei nessa página.

Eu abri aqui... Abre o Google mesmo, um buscador e digito aqui Node 10.4.0.

Eu venho nesse segundo link, que ele tem mais detalhado todas as versões que o Node disponibiliza para a gente.

Tem algumas mais recentes agora, enquanto está lançando esse curso, ele está na versão 12. É a mais atual dele.

Provavelmente daqui a um tempo esteja mais instável as outras versões para a gente testar, fazer os testes com o Protractor, mas nesse momento o Node JS versão 10.4.0 é o mais instável.

Então, eu clico aqui em downloads e chegamos naquela tela que eu mostrei.

Se você estiver utilizando o Windows, você procura por essa extensão aqui no final: MSI, que é a Node menos Node - V10.4.0.

Ele vai baixar para a gente, ele vai fazer aquele mesmo processo que todo programa no Windows às vezes faz. Next, next, finish.

Só fica atento aonde você vai instalar, o local onde você vai instalar o Node.

Next. Ele vai pedir para você aceitar um contratinho aqui. Só dar Next.

Aqui fica atento aonde você vai instalar. No caso, eu estou num diretório D, program files, Node JS. Tranquilo. [1:50] Você pode escolher aonde você vai querer colocar, de acordo com a hierarquia de pastas do seu computador.

Aqui eu vou deixar onde ele colocou mesmo. Um Next também. Next. Install.

Ele vai pedir a permissão de algumas coisas.

Dependendo da velocidade do computador mesmo, ele pode dar uma demorada.

Bom, agora que finalizou o teste, dá um Finish aqui. Tranquilo. Já está instalado.

Para a gente verificar, eu aperto o quê? Windows R, que ele vai abrir o Executor e eu coloco aqui: CMD. Dou um OK.

Ele vai abrir o prompt de comando para mim e eu digo o quê?

Para ver se o Node foi instalado mesmo, eu digito Node V, se não me engano, e ele já mostra aqui a versão do Node que a gente instalou.

O importante é que ela seja a mesma que a gente mandou ele instalar. Beleza.

Agora, a gente precisa instalar o quê? O Protractor.

Certo, se você vier aqui no site deles mesmo. A mesma coisa.

Eu vou mostrar aqui como é que eu cheguei. Vim aqui no buscador, no Google Chrome mesmo, digitei Protractor.

Ou melhor, ele já veio para o site.

Mas eu só quero buscar e nesse primeiro link já vai mostrar o site oficial do Protractor.

E nessa página inicial ele já mostra qual que é o setup, quais são as instruções para que a gente instale ele.

No caso aqui, ele manda esse comandinho, esse NPM, que é o gerenciador de pacotes do próprio Node, bem famoso, que ele já vem instalado no próprio Node.

Eu digo o quê? Eu preciso dar um NPM install-g. Esse -g significa global, ou seja, na sua pasta global do NPM, no seu computador, vai estar instalado o Protractor.

Eu copio ele. Eu aperto Windows R, CMD, e venho aqui.

NPM install-g Protractor.

Ele vai instalar.

Claramente, isso depende um pouco da velocidade da sua internet. Às vezes pode demorar um pouquinho ou não.

Então, vamos aguardar para que ele instale tudo perfeitamente, tá certo?

Pronto. Está instalado. Depois que deu todas essas informações aqui. Protractor 5.4.2.

Essa é a versão que ele instalou, mas a gente pode garantir que ele instalou da mesma forma que a gente fez com o Node. Como?

Protractor. Vou digitar aqui.

Aqui no caso é menos menos version.

Ele mostra a versão dele.

Uma coisa muito importante que a gente tem que ver na instalação do Protractor é que ele instala esse Web Driver Manager.

Esse Web Driver Manager é uma... digamos assim, ele utiliza uma casquinha do Selenium para rodar os browsers para ele mesmo executar os nossos testes que a gente vai criar.

No caso aqui, a gente só vai seguir essa instrução Web Driver Manager update.

Vamos pedir para ele atualizar.

Esse Web Driver Manager, na hora que você instalou o Protractor aqui, ele já instalou também o Web Driver Manager para você.

Às vezes você já pode ter instalado na máquina, se você tiver alguma coisa do Selenium já instalada, ele apensar utiliza, só para você entender melhor, ele apenas utiliza o Web Driver Manager aqui. Ou melhor, uma função do Selenium para que facilite o nosso código em Javascript utilizando o Protractor, para a gente não precisar utilizar nenhuma outra linguagem, já para ficar bem comum e deixar tudo em Javascript.

Bom, a gente rodou o Web Driver Manager update, e aparentemente deu tudo certo, não mostrou nenhum erro e vamos fazer o quê?

Aqui ele fala para só para verificar se a instalação deu tudo certo.

Colocando o comando Web Driver Manager, start.

Então, vou dar um Ctrl C aqui.

Aqui, eu apertei a seta para cima, ele copia o seu último comando.

No caso, eu quero executar aquele outro, vou dar um Ctrl V. Já dei um Ctrl C lá.

E ele está dizendo que foi executado na porta 4444.

Vamos testar.

Vou abrir uma nova guia.

Local host 4444. Perfeito. Está executando.

Não vamos precisar dele agora. Eu dou um Ctrl C aqui no nosso terminal para ele cancelar e vou dar um CLS para limpar todo o terminal. Certo.

Uma coisa importante também que a gente precisa instalar é que vamos utilizar o código do Angular, do curso de Angular.

Então, a gente precisa ter instalado o Angular na nossa máquina.

Então vamos ver aqui, procurar por Angular.

Já vai ser esse primeiro link do Google. Certo?

A gente vem em o quê? Get Started e viemos aqui embaixo.

Ele já dá as mesmas instruções que o Protractor faz. NPM install-g@angular - cli.

Dou um Ctrl C e Ctrl V, dou um Enter e vamos aguardar a instalação dele.

Bom, foi instalado aqui o Angular.

No caso do Angular, a gente precisa testar de uma outra maneira.

Ao invés de digitar o próprio nome do Angular, a gente digita um comando do próprio CLI que foi instalado dele, que é o quê? NG menos menos version. Você pode digitar ou V, que vai ser a abreviatura de menos menos version.

E vamos ver se vai rodar.

Rodou perfeitamente.

Ele mostrou o que ele instalou aqui.

Os pacotes que ele instalou do Angular e as versões dele. Tranquilo.

Vamos dar um CLS para limpar tudo isso daqui.

E agora a gente já tem tudo instalado que a gente vai precisar para fazer para o nosso curso.

Uma coisa importante também que a gente vai precisar é do projeto do Angular que foi feito na aula de Angular do curso de Angular em si.

Então, depois eu vou deixar o link para vocês baixarem tanto a API que foi utilizada na aula de Angular tanto o projeto em Angular em si.

Entendendo o Protractor - Entendendo o projeto

Bom, aqui nessa pasta eu tenho os dois projetinhos que eu falei na aula de instalação que é o quê?

O projeto da API que a gente utiliza em Node.

A gente não vai precisar focar nele, abrir o código, a gente só vai precisar executar e fazer a instalação dele; e esse Alurapic, que é o projeto em Angular que a gente também precisa fazer a instalação e entender o que é esse projeto que a gente vai testar.

Então, eu venho aqui no meu prompt de comando. Vou navegar até a pasta onde estão esses dois projetos.

No caso eu posso utilizar cd dois pontos, cd ponto ponto para retroceder uma pasta ou cd mesmo e digitar o nome da pasta para ele ir avançando as pastas.

No caso, eu vou até o diretório.

Aqui uma curiosidade legal: se ele estiver em outro repositório, por exemplo, aqui a pasta principal do Windows é o C dois pontos, por exemplo, você vai fazer o projeto em algum pendrive, em algum HD externo; você vem até aqui o Windows e digita qual que é o diretório dele.

No caso aqui, é o D.

Então, vamos aqui.

Vou até aonde eu preciso ir.

O nome.

Protractor.

Projeto.

Aqui se eu der um start, digitar start e ponto, ele vai abrir a pasta que está lá no CMD, aqui no prompt. Certo?

O que a gente vai precisar fazer? Fazer a instalação dele.

NPM i e NPM i tanto na API e no Alurapic. Certo? Então, vamos aqui.

No projeto dou um cd API.

Entrei na pasta. Vou dar um NPM i.

Posso digitar NPM install também. Não tem problema nenhum.

Enquanto ele vai instalando a API, eu vou dar um Windows R de novo.

CMD. E vou para outra pasta.

Windows, digito Windows. O mesmo processo que a gente fez.

Aqui para facilitar também, se você quiser, ele vai listando as pastas conforme você vai apertando Tab.

No caso aqui Gus, eu digitei só Gus, a inicial da pasta, dou um Tab, e ele completa para mim.

Venho aqui em Projeto.

O outro é Alurapic. Eu digitei só Alura, cd, Alura, e dei um Tab aqui, ele já mostrou o nome da pasta.

Vou dar um NPM i, de NPM install aqui.

Vamos ver como é que foi.

O outro ele mostrou que tem um erro aqui, que é porque a gente precisa instalar esse módulo à parte, que é o sqlite... sqlite, certo, que é um... ele vai instalar um pequeno banco de dados aqui para a gente.

Então, vou digitar um NPM i, e esse módulo aqui que ele deu o alerta que não foi instalado.

Ele já vai começar a instalação para a gente.

Instalando tudo certinho.

Vamos ver o outro como é que está. Está na metade. Eu acredito que esse vai acabar mais rápido porque é um módulo só.

Certo. Vamos ver aqui.

Não vamos ser tão específicos então porque eu copiei aqui a versão dele e aparentemente ele deu algum errinho.

Então, não precisamos ser tão específicos. Vamos lá: NPM i sqlite3.

Vamos ver aqui. Vamos aguardar esse daqui. Como é só um módulo, ele não vai demorar tanto para fazer a instalação, para baixar. Aqui, olha, deu tudo certo.

Agora, vamos fazer o quê com ele?

Vamos rodar para ver se deu tudo certo mesmo. Vou dar um comando NPM start para executar a nossa API.

E aqui já está rodando tudo certo, olha. Servidor escutando na porta 3000.

Então, nosso servidor, nossa API vai estar rodando na porta 3000.

Aqui ele já mostra alguns usuários: Flávio, Almeida, calopsita, alura. Certo?

E com eles provavelmente a gente vai fazer o login na nossa aplicação. Tá certo?

Opa, eu apertei Ctrl C para parar a aplicação. Foi sem querer aqui. Vamos rodar de novo. NPM start.

Vamos ver só como é que está o processo de instalação do Angular. Ele está demorando um pouco, então vamos esperar aqui.

E pronto. Ele instalou. Fez a instalação de todos os pacotes do Angular aqui para a gente.

Então, a gente já tem o nosso servidor rodando, o nosso API back-end. Na verdade, essa API às vezes que eu falo, é mais referência ao back-end que a gente vai fazer a consulta, ao nosso servidor.

Ele já está rodando, então, a gente também precisa rodar aqui o Alurapic, o nosso front. O que eu vou fazer? NPM start.

E ele vai executar o nosso projeto de front.

Às vezes pode demorar um pouquinho porque é a primeira vez que você vai executar, às vezes não tem cast, tudo mais e pode demorar um pouquinho. Mas nada de muito, não.

Beleza, executou.

Ele está me informando aqui que eu posso abrir no browser com a URL de http://localhost4200, porta 4200. Então, é isso mesmo que a gente vai fazer.

Vou abrir aqui o Google Chrome e digitar localhost:4200. Vamos ver. Está executando.

Bom, normalmente quando a gente vai fazer algum teste automatizado, algum teste de, sei lá, integração, a gente precisa primeiro ter uma documentação.

No caso, a gente não tem a documentação do projeto. Então, a gente vai seguir o que o nosso projeto mesmo diz para nós. Como assim?

Aqui entendemos que é o quê? Uma plataforma. A Alurapic.

Acredito eu que pic seja de foto. Eu tenho a tela de login. Então, vamos logar aqui.

Eu vou pegar um desses usuários. Acredito eu que seja esse. Vou pegar esse calopsita. Não, vou pegar do Flávio mesmo que Flávio é o primeiro aqui.

Vai saber o que ele colocou um monte de foto de pássaro lá.

Vamos mudar um pouquinho.

Coloquei Flávio, coloquei a senha, apertei Login. Funcionou.

Essas coisas a gente também vai fazer. A gente vai fazer a integração do quê? Do nosso servidor e também das chamadas.

Como assim? Imput de login, de nome de usuário, de senha, apertou o submit, vamos ver se ele vai logar.

Esse é um dos testes que a gente vai fazer. Aqui a gente vê também que essa plataforma tem várias fotos, como diz o próprio nome, Alurapic.

Nessa plataforma aparentemente eu consigo buscar.

Vamos digitar alguma coisa aqui: ab não tem. Já sabemos que o filtro funciona. Ac, também não sei.

Vamos procurar alguma coisa que a gente consiga realmente buscar alguma coisa que nos dê algum um retorno correto.

Então, vou clicar aqui.

Eu tenho a informação farol iluminado, eu tenho a imagem, eu tenho um coraçãozinho, um comentário. Devo conseguir comentar aqui.

Consigo. Acho que sim. Vamos dizer: comentário. Publish.

Apertou aqui, olha, já deu o nome do usuário. Se eu clicar no coraçãozinho ali, ele já curte a foto.

Vamos ver. Farol iluminado aqui. Tá bom.

Vamos voltar para a home. Acho que a home é aqui. Vamos ver: farol.

O filtro funciona também.

Então, esse é o sistema que a gente vai fazer o teste.

A gente sempre vai fazer um comparativo do que ele precisa ser feito.

Por exemplo, o que ele precisa ser mostrado, quais campos tem, se os campos aqui realmente refletem o que é necessário para que o usuário final consiga ter todo o sistema perfeito, sem nenhum defeito.

Então, a gente já entendeu esse sistema. Agora a gente vai começar a desenvolver alguns pequenos testes.

Sobre o curso Protractor: Testes automatizados com javascript

O curso Protractor: Testes automatizados com javascript possui 135 minutos de vídeos, em um total de 33 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Angular acessando integralmente esse e outros cursos, comece hoje!

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1241 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas