Passos para aprender Automação Web – Parte 1

Introdução

A base para a automação de testes para web é o entendimento de suas tecnologias. Isso irá ajudar você a entender como as páginas web se comportam e também para poder identificar os elementos web, ponto chave para o trabalho com estas ferramentas.

Se você não viu o primeiro post da série, recomendo a leitura dele como pré-condição:
http://eliasnogueira.com/passos-para-aprender-automacao-web-introducao/

Tecnologia Web

Basicamente existem três tecnologias que fazem uma página web funcionar em um browser: HTML, CSS e JavaScript.

HTML5_CSS_JavaScript

O HTML é a linguagem de marcação para a criação de elementos (texto, campos, etc…). Digamos que ele cuida da estrutura da página.
O CSS é o que estiliza a página (cores, posicionamento, etc…). Digamos que cuida da forma de apresentação visual da página.
O JavaScript é o que dá o dinamismo em uma página HTML. Digamos que ele cuida do comportamento dinâmico da página.

html_css_javascript_animado

Porque é importante aprender as tecnologias Web?

Você quer automatizar testes para as páginas HTLM de uma aplicação, certo?
Um dos primeiros motivos é você conhecer o que você quer automatizar.

Diversas APIs e/ou ferramentas para automação de testes para web utilizam estas tecnologias para poder localizar e interagir com os elementos na tela. Também nos possibilitam simular eventos de JavaScript, e tudo isso servirá muito para criar e/ou melhorar um teste automatizado já criado.

Você não precisa conhecer 100% destas tecnologias, mas o mínimo que eu recomendo é você saber:

  • Criar uma página web (HTML)
  • Estiliza-la (CSS)
  • Deixa-la dinâmica (Javascript)

Veja o exemplo do link abaixo, onde ele apresenta uma mensagem de erro quando você não informa um número de 1 a 10.

http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_validate

 

Sobre Elementos Web

Este é um dos maiores focos que você deve dar quando vai automatizar testes para páginas web.
Tudo dentro de uma página web é um elemento, não se esqueça disso e de utilizar esta nomenclatura: elemento! Ele é o ponto chave de toda a localização do elementos na tela para com a ferramenta de automação web.

O meu intuito não é te ensinar sobre estas tecnologias aqui (veja abaixo minhas dicas de estudo). Você só não pode esquecer a diferença entre quatro itens importantes: o elemento, o atributo, o valor do atributo e o texto do elemento. Se você souber identifica-los você está no caminho certo.

Abaixo uma pequena ilustração de como identifica-los através de um trecho de código-fonte HTML.

explicacao_elemento_atributo_valor

Agora é com você!

Mais pra frente, quando aprender sobre as três tecnologias, se você conseguir fazer algo semelhante ao que foi passado como exemplo, estará apto a passar para o próximo passo! 🙂

Mas para conseguir isso eu sei que é necessário muito estudo.
A minha recomendação é a seguinte:

  • Aprenda sobre as três tecnologias em conjunto
  • Dê um certo foco aos seletores CSS, eles irão te ajudar muito na posterior localização de elementos com uma API/ferramenta de automação de testes para web

Há diversos cursos por na internet, e a grande maioria de graça!!!
Eu recomendo muito estes dois sites, onde você pode aprender da melhor forma: fazendo!

 

Abraços!

2 thoughts to “Passos para aprender Automação Web – Parte 1”

  1. Parabens Elias, esse post com certeza vai ajudar a muitos colegas na area de teste que assim como eu precisam evoluir do simples teste manual para o novo mundo das aplicações web e a automatização de testes.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *