Hoje vou fazer um teste prático com Selenium IDE, para isso
vamos testar algumas funcionalidades do meu site.

A primeira coisa que vou fazer, para começar, é abrir o site e
pensar no que será testado e depois abrir o Selenium IDE e começar a gravar os
testes.

No site www.alantiel.com
não há muitas coisas para se testar, visto que é apenas um site pessoal.

Vamos começar pelo campo URL base, que é o site/sistema que
vamos testar, no caso, http://www.alantiel.com/.

A tela do selenium ficará como a seguinte após mudar a url:

Agora, clicando no botão vermelho, para desabilitar a
gravação automática dos testes, e apertando o botão direito no campo do meio,
teremos uma opção para inserir um novo comando e é nela que vamos adicionar os
comandos que veremos. A tela a seguir mostra a tela do Selenium com o botão de
gravação e a opção de novo comando antes de ser clicada.

 

A partir daí vou explicar os comandos na ordem que vou usar
para o teste.

O primeiro é o open, que faz a ação do usuário de entrar em
alguma coisa pela url do site a partir da url inicial, por exemplo, para abrir a
primeira página, usamos como “alvo” o parâmetro “/” que significa a raiz do
endereço. Então nesse novo comando ficaria no campo “comando” o texto “open” e
no campo “alvo” o texto “/”.

Inserindo um novo comando.

Agora vamos fazer 3 testes para testar se os 3 links
horizontais do site estão presentes.

O comando é verifyElementPresent, que retorna true se o
parâmetro “alvo” está presente e false, caso contrário. No caso, vamos colocar o
texto “m1home” no campo “alvo”, m1home é o id do link Home em português.

No próximo comando novo colocamos mais um verifyElementPresent,
para o segundo link, no caso vamos colocar o texto “m1noticias” no campo
“alvo”, m1noticias é o id do link Twitter em português.

E mais um verifyElementPresent, para o segundo link, no caso
vamos colocar o texto “m1contato” no campo “alvo”, esse m1contatoé o id do link
Twitter em português.

Dessa forma testamos a presença dos três menus no idioma
português.

Agora vamos fazer o mesmo teste para o idioma em inglês,
então colocamos o comando “click” com o “alvo” com o texto:

“dom=document.getElementsByClassName(‘link’)[0];”
, veja que esse esse é um comando em javacript que pega o primeiro elemento com
a class “link”, ou seja, quando estamos no idioma português o primeiro elemento é
exatamente o link para o idioma inglês, que é o que queremos. Como fazemos uma
requisição ajax, a página pode não ter aparecido imediatamente, então um
verifyElementPresent poderia falhar, então usamos o waitForElementPresent, que
aguarda até aparecer um elemento, quando mudo o idioma, os ids dos links mudam
também, então os valores mudam também. No alvo desse comando adicionaremos o id
no item home “m2home”, no próximo comando podemos colocar o verifyElementPresent
já que a pagina já carregou o conteúdo, o alvo para o link Twitter no idioma
inglês é m2noticias, e por último mais um verifyElementPresent com o alvo m2contato.

Para fazer o mesmo teste para o idioma espanhol, a ordem de
comandos é esta:

Comando: click, alvo: dom=document.getElementsByClassName(‘link’)[1];

Comando: waitForElementPresent, alvo: m3home.

Comando: verifyElementPresent, alvo: m3noticias.

Comando: verifyElementPresent, alvo: m3contato.

Por último, vamos testar o link do Twitter, que é um link
que lista meus últimos 5 updates no twitter, para isso vou apenas verificar se
o retorno da página está com cinco itens de lista preenchidos, por exemplo se a
API do twitter estiver falhando esta pagina não teria nenhum retorno de texto e
esse código falharia.

Vamos começar com um click no primeiro link, com:

Camando click, no alvo: link=Home

E um:

Camando waitForElementPresent, no alvo: link=Twitter

E fazer um:

Comando waitForElementPresent no alvo: dom=document.getElementById(‘twitter_update_list’).getElementsByTagName(‘li’)[0]

Esse é um comando em javascript que está testando retornando
um elemento dom de uma tag <li> de índice 0, que esteja dentro de um
contexto de id ‘twitter_update_list’, que é o id da <ul> que tem os
updates js atualizados.

Depois disso é só repetir o comando mudando o índice de 0
para 1 até 4 e mudar o waitForElementPresent por verifyElementPresent, já que o
conteúdo ajax já está carregado.

Comando verifyElementPresentno alvo: dom=document.getElementById(‘twitter_update_list’).getElementsByTagName(‘li’)[1]

Comando verifyElementPresentno alvo: dom=document.getElementById(‘twitter_update_list’).getElementsByTagName(‘li’)[2]

Comando verifyElementPresentno alvo: dom=document.getElementById(‘twitter_update_list’).getElementsByTagName(‘li’)[3]

Comando verifyElementPresentno alvo: dom=document.getElementById(‘twitter_update_list’).getElementsByTagName(‘li’)[4]

No final disso o teste ficará como a tela a seguir:

Apertando o botão de play os testes rodarão no browser e
ficarão como a seta a seguir:

Esses testes são bem úteis para se fazer os chamados
testes de caixa-preta e para se
certificar de que as coisas se mantém como foram feitas, caso haja alguma mudança
mais significativa no site. No próximo artigo farei alguns testes de
caixa-branca e utilizarei algumas técnicas diferentes das que usei nesse teste.

Para baixar o teste, basta salvar a seguinte página http://alantiel.com/~file/testeseleniumide/teste_imasters.html
e abrir com o próprio selenium IDE.