Testes automatizados com o Framework Selenium

Fique por dentro

A automaç�o de testes soma praticamente 20% do tempo de trabalho de um testador (ou desenvolvedor testador) e economiza v�rias horas de manutenç�o e de testes de regress�o para verificar se tudo est� funcionando h� cada nova release de software lançada. O Selenium se popularizou como um dos principais frameworks de automaç�o de testes do mercado, principalmente pelo seu suporte a linguagens como Python, Ruby, Java, C# e Node.js.

Neste artigo aprenderemos a configurar o Selenium de duas formas: via IDE Eclipse e via Selenium IDE. Voc� ver� como gravar testes nos browsers, salvar scripts, re-execut�-los, al�m de comunicar seus testes com JavaScript, jQuery e HTML5. Ao final deste, o leitor estar� apto a executar testes s�ncrona e assincronamente via API, linha de comando ou interface gr�fica, al�m de entender que tipo de teste se encaixa melhor em cada realidade de software.

A automaç�o de testes existe para, atrav�s de ferramentas e estrat�gias, reduzir ao m�ximo o envolvimento humano em atividades manuais repetitivas, como o cadastro de um cliente ou o login/logout em uma aplicaç�o.

O principal objetivo de um teste automatizado � ser usado futuramente em testes de regress�o. Esse termo, por sua vez, � usado para quando precisamos efetuar ciclos de re-teste de uma ou v�rias funcionalidades, com a intenç�o de identificar problemas ou defeitos introduzidos pela adiç�o de novas funcionalidades ou pela correç�o de alguma j� existente.

Levando em consideraç�o um exemplo real, quando um projeto de software n�o utiliza testes automatizados em sua concepç�o, sempre que uma alteraç�o acontece em determinada tela ou m�dulo, um novo ciclo de testes manuais precisa ser refeito e, assim, sucessivamente at� que o projeto esteja terminado. O problema aumenta mais ainda quando o projeto n�o tem fim e exige manutenç�o constante, implicando consequentemente em mais custos com uma equipe de teste e possivelmente em entregas sem qualidade, j� que n�o houve tempo o suficiente para testar e re-testar tudo.

Em contrapartida, a utilizaç�o de testes automatizados acelera os ciclos do software, uma vez que o teste passa a ser executado por outro software inteligente, que acessa as telas e reexecuta os mesmos testes nos dando relat�rios r�pidos do que deixou de funcionar. Al�m disso, estamos menos suscet�veis a erros, j� que a m�quina nunca erra, ao contr�rio de termos humanos testando.

Existem v�rias abordagens diferentes para a automaç�o de testes. Os tipos s�o normalmente agrupados de acordo com a maneira com a qual os testes se integram e interagem com o software. Um testador pode construir seu teste baseando-se em dois conceitos:

Interface gr�fica
1. Gravaç�o/Execuç�o (Capture/Playback): os testes s�o feitos diretamente na interface gr�fica da aplicaç�o: HTML, XML, Swing, etc. As ferramentas geralmente disponibilizam recursos para efetuar a gravaç�o (capture) das aç�es feitas nas telas que ser�o convertidas para uma linguagem de script intelig�vel pela mesma, a qual poder� futuramente ser reexecutada (playback).
2. Dirigido a dados (Data-Drive): representa uma abordagem mais dirigida aos dados no sentido de gravar as aç�es do usu�rio, por�m sempre fornecendo dados distintos para deixar o teste mais pr�ximo da realidade.
3. Dirigido a palavras-chave (Keyword-Driven): s�o testes com alto n�vel de abstraç�o, onde at� mesmo usu�rios comuns podem criar instruç�es para iniciar um teste, uma vez que o mesmo ser� baseado em palavras-chave. Cada palavra-chave representa um comando da ferramenta.
L�gica de neg�cio
1. Linha de comando (Command Line Interface): fornece uma interface com um mecanismo de interaç�o com a aplicaç�o por meio de um prompt cmd do SO e os comandos podem ser enviados de l�.
2. API (Application Programming Interface): fornece bibliotecas ou um conjunto de classes para permitir que outras aplicaç�es acessem a interface do teste sem necessariamente ter de conhecer como eles foram feitos.
3. Test Harness (Equipamentos de teste): � um teste espec�fico que visa o teste �nico e exclusivo da l�gica de neg�cio. N�o � permitida interaç�o alguma com as interfaces gr�ficas.

O sucesso desse tipo de teste depende de identificar e alocar elementos da GUI (Graphical User Interface) na aplicaç�o a ser testada e ent�o executar operaç�es e verificaç�es nestes mesmos elementos para que o fluxo do teste seja completado com sucesso.

O Selenium � um framework de testes automatizados port�vel para aplicaç�es web desenvolvido em 2004 por Jason Huggins como um projeto interno da empresa ThougthWorks. Ele fornece todo o aparato para capturar e reproduzir os testes via scripts sem a necessidade de aprender nenhuma linguagem de scripting. Tamb�m disponibiliza uma linguagem de teste espec�fica para linguagens populares como Java, C#, Groovy, Perl, PHP, Python e Ruby. Os testes podem ser executados em browsers web modernos e os deploy de aplicaç�o rodam tanto em Windows, quanto em Linux e Macintosh.

Dentre a lista de funcionalidades fornecida pelo framework, temos:

Preenchimento de caixas de texto;
Checagem de checkboxes e bot�es de r�dio;
Click em bot�es e links;
Navegaç�o de e para <iframe>�s;
Navegaç�o de e para novas janelas/tabs criadas por links;
Interaç�o com a maioria dos elementos como um humano faz.

Na lista de funcionalidades que ele n�o suporta, temos:

Interaç�o com Flash, PDF ou Applets;
Interaç�o com quaisquer objetos colocados dentro das tags HTML <object> e <embed>.

Neste artigo exploraremos os principais recursos desse framework, atrav�s da construç�o de exemplos reais usando as linguagens JavaScript, jQuery e Java em conjunto com HTML5 e testes efetuados no Google Chrome e Firefox. Veremos desde a configuraç�o e instalaç�o da ferramenta, bem como as principais diferenças entre usar o Selenium embarcado (com uma linguagem de programaç�o) e o Selenium IDE (diretamente no browser Firefox como Add-On).

Configuraç�o do ambiente

O primeiro requisito obrigat�rio para executar o Selenium no seu Sistema Operacional � ter uma vers�o recente do JDK (Java Development Kit) instalada. Para verificar se voc� j� tem alguma, basta acessar o terminal de comandos e digitar o seguinte comando:


        java -version

Se voc� vir um n�mero com a vers�o do Java sendo impresso, ent�o voc� j� o tem instalado. Caso contr�rio, acesse a p�gina de downloads do mesmo (seç�o Links) e efetue os passos para instalaç�o (voc� encontrar� tutoriais de como instalar no pr�prio site da Oracle caso tenha alguma d�vida).

Em seguida, precisamos efetuar o download do Eclipse (seç�o Links), que � a IDE mais utilizada para desenvolver com o Selenium. Selecione sempre a opç�o �Eclipse IDE for Java EE Developers�, dessa forma teremos uma vers�o da IDE que tamb�m desenvolve para a web. Certifique-se tamb�m de baixar a vers�o correspondente com o seu Sistema Operacional (32/64 bits). Quando finalizar o download, mova o arquivo zip baixado e o descompacte em um local de sua prefer�ncia. Como n�o � preciso instal�-lo, basta dar clique duplo no arquivo eclipse.exe e a ferramenta ir� iniciar.

Por fim, precisamos selecionar tamb�m os jars do Selenium para termos pleno suporte ao mesmo dentro dos projetos. Optaremos por usar o Java como linguagem server side, em vista de a imensa maioria dos usu�rios do Selenium usarem essa linguagem no mercado por padr�o. Portanto, acesse a p�gina de download do Selenium (seç�o Links) e na seç�o �Selenium Client & WebDriver Language Bindings� clique no link correspondente � linguagem Java (Figura 1).

Figura 1. P�gina de download do WebDriver do Selenium.

O arquivo baixado estar� tamb�m no formato zip, logo extraia-o novamente no diret�rio do projeto. A Figura 2 mostra a representaç�o dos arquivos internos, dos quais faremos uso essencialmente dos jars.

Figura 2. Estrutura de pastas e arquivos do Selenium.

Execute agora o Eclipse e selecione um workspace para salvar o projeto. Ap�s isso, vamos criar um primeiro exemplo de AloMundo com o browser Firefox. Seleciona a opç�o �File > New > Project > Java Project� e, na janela que aparecer, d� o nome �AloMundoSelenium� ao projeto e certifique-se de selecionar a opç�o JavaSE-7 no bot�o �Use na execution environment JRE�, conforme mostra a Figura 3.

Figura 3. Wizard de criaç�o de novo projeto Selenium no Eclipse.

Clique em �Finish�. Para que as nossas classes reconheçam o Selenium WebDriver, precisamos adicionar os jars ao classpath. Para isso, clique com o bot�o direito no projeto gerado e selecione �Properties > Java Build Path� e acesse a tab �Libraries�. Clique no bot�o �Add External JARS...� e navegue at� as pastas onde voc� descompactou o Selenium. Selecione todos os jars da raiz do diret�rio e da pasta �libs� e clique em �Abrir� (Figura 4).

Figura 4. Libs do Selenium adicionadas ao projeto.

Para fazer um teste r�pido, v� at� o diret�rio src do projeto, clique com o bot�o direito e selecione a opç�o �New > Class� e d� um nome de pacote (br.edu.devmedia.selenium) e um nome de classe �AloMundoSelenium� e clique em �Finish�. Na classe que for aberta, adicione o conte�do da Listagem 1 � mesma.

Listagem 1. Classe de teste com o browser Firefox.


        package br.edu.devmedia.selenium;

        import java.io.File;

        import org.openqa.selenium.WebDriver;
        import org.openqa.selenium.chrome.ChromeDriver;
        import org.openqa.selenium.firefox.FirefoxDriver;
        import org.openqa.selenium.ie.InternetExplorerDriver;

        public class AloMundoSelenium {
        public static void main(String[] args) {
        abrirFirefox();
        }

        private static void abrirFirefox() {
        WebDriver driver = new FirefoxDriver();
        driver.get("http://devmedia.com.br");
        String i = driver.getCurrentUrl();
        System.out.println(i);
        driver.close();
        }

        }

O c�digo traz uma representaç�o simples de teste no Selenium que ir� somente abrir uma inst�ncia do browser Firefox (linha 16), acessar o site da DevMedia (linha 17) e retornar a URL para o qual o mesmo foi redirecionado (linha 18). No final, ele fecha a conex�o com o driver (linha 20). Para executar v� at� o menu �Run� no topo da p�gina ou clique com o bot�o direito na classe e selecione �Run As > Java Application�.

O resultado ser� a abertura de uma inst�ncia do browser citado com o respectivo site e a mensagem final impressa no console (Figura 5).

Figura 5. Resultado de execuç�o do teste no Firefox.

O Selenium trabalha com o conceito de drivers para o browser a ser trabalhado. Nos projetos reais, geralmente temos c�digo para lidar com ao menos tr�s browsers: Firefox, Chrome e IE, que s�o os mais usados. Caso voc� queria adicionar uma nova inst�ncia, precisar� tamb�m efetuar o download do driver dele, uma vez que o Selenium reconhece apenas o Firefox em vista da sua IDE ser desenvolvida nele. Para isso, efetue o download do arquivo chromedriver.exe na sua vers�o mais recente no endereço dispon�vel na seç�o Links e posicione-o no endereço do workspace do projeto.

O c�digo para acessar agora passa a ser igual ao da Listagem 2.

Listagem 2. C�digo para acessar a inst�ncia do Chrome.


        package br.edu.devmedia.selenium;
        import java.io.File;
        import org.openqa.selenium.WebDriver;
        import org.openqa.selenium.chrome.ChromeDriver;
        import org.openqa.selenium.firefox.FirefoxDriver;
        import org.openqa.selenium.ie.InternetExplorerDriver;
        public class AloMundoSelenium {
        public static void main(String[] args) {
        abrirChrome();
        }
        private static void abrirChrome() {
        File file = new File("D:/Downloads/chromedriver.exe");
        System.setProperty("webdriver.chrome.driver", file.getAbsolutePath());
        WebDriver driver = new ChromeDriver();
        driver.get("http://devmedia.com.br");
        String i = driver.getCurrentUrl();
        System.out.println(i);
        driver.close();
        }
        private static void abrirIE() {
        WebDriver driver = new InternetExplorerDriver();
        driver.get("http://devmedia.com.br");
        String i = driver.getCurrentUrl();
        System.out.println(i);
        driver.close();
        }
        }

Veja que na linha 6 temos a importaç�o do arquivo do driver diretamente da pasta onde ele foi alocado e, em seguida, setamos a propriedade �webdriver.chrome.driver� nas propriedades do sistema com o valor do caminho do driver, para que o Selenium possa encontrar uma inst�ncia correta da classe ChromeDriver. O restante do procedimento � o mesmo. Na linha 25 vemos o equivalente para o browser do Internet Explorer, mas tamb�m ser� necess�rio baixar o driver do mesmo.

Um outro bom exemplo � quando queremos n�o s� acessar uma p�gina, como tamb�m enviar informaç�es para ela, gerar submits e recuperar dados dos responses. Esse tipo de funcionalidade � poss�vel atrav�s da classe HTMLUnitDriver, que funciona como os mesmos drivers que vimos para os browsers, por�m trabalhando internamente, sem interface gr�fica. Essa estrat�gia � muito usada por desenvolvedores ou testadores que querem criar scripts rapidamente sem ter de ficar acessando o browser o tempo todo.

Vamos criar um exemplo de acesso � p�gina do Google e enviar uma palavra para ser pesquisada, dando submit no formul�rio e recebendo a resposta. Quando uma pesquisa � feita o t�tulo da p�gina do Google muda de acordo com o texto, assim podemos recuperar essa nova informaç�o e checar se o teste funcionou. Veja a Listagem 3 para isso.

Listagem 3. C�digo de teste para pesquisa no Google.


        package br.edu.devmedia.selenium;

        import java.util.concurrent.TimeUnit;

        import org.openqa.selenium.By;
        import org.openqa.selenium.JavascriptExecutor;
        import org.openqa.selenium.WebDriver;
        import org.openqa.selenium.WebElement;
        import org.openqa.selenium.htmlunit.HtmlUnitDriver;

        public class HTMLDriver {
        public static void main(String[] args) {
        WebDriver driver = new HtmlUnitDriver();

        driver.get("http://www.google.com");

        WebElement element = driver.findElement(By.name("q"));

        element.sendKeys("Queijo!");

        element.submit();

        System.out.println("O t�tulo da p�gina �: " + driver.getTitle());

        driver.quit();
        }
        }

Agora � poss�vel ver o acesso direto ao browser virtual do HTMLUnitDriver que tamb�m pode ser retornado para uma inst�ncia do WebDriver (linha 13). O m�todo findElement() da linha 17 recupera o conte�do HTML completo da p�gina e faz uma busca pelo crit�rio definido no se par�metro que, por sua vez, ser� respons�vel por buscar um elemento �nico de nome �q� (no caso, a caixa de pesquisa da p�gina do Google). Os crit�rios podem ser v�rios como por nome, id, classe CSS, etc.

O m�todo sendKeys() na linha 19 envia o valor exatamente para o campo de input que deve ser preenchido antes do submit (linha 21) ser enviado. No final, extra�mos o valor do atributo �title� do mesmo driver que j� estar� atualizado com a resposta.

Para conferir o resultado, execute a aplicaç�o via comando Run e voc� ver� algo parecido com o conte�do da Listagem 4.

Listagem 4. C�digo de resultado da execuç�o.


        ADVERT�NCIA: CSS error: 'http://www.google.com.br/?gfe_rd=cr&ei=Z1h4VdzSMabX8gew3oHgAg' [1:9364] Error in
        expression; ':' found after identifier "progid".
        jun 10, 2015 12:31:42 PM com.gargoylesoftware.htmlunit.DefaultCssErrorHandler error
        [...]
        ADVERT�NCIA: CSS error: 'http://www.google.com.br/?gfe_rd=cr&ei=Z1h4VdzSMabX8gew3oHgAg' [1:12791] Error in
        expression.
        (Invalid token ";". Was expecting one of: <S>, <NUMBER>, "inherit", <IDENT>, <STRING>,
        "-",
        <PLUS>, <HASH>, <EMS>, <EXS>,
        <LENGTH_PX>, <LENGTH_CM>, <LENGTH_MM>, <LENGTH_IN>, <LENGTH_PT>,
        <LENGTH_PC>,
        <ANGLE_DEG>,
        <ANGLE_RAD>, <ANGLE_GRAD>, <TIME_MS>, <TIME_S>, <FREQ_HZ>, <FREQ_KHZ>,
        <RESOLUTION_DPI>,
        <RESOLUTION_DPCM>, <PERCENTAGE>, <DIMENSION>, <URI>, <FUNCTION>.)
        [...]
        jun 10, 2015 12:31:42 PM com.gargoylesoftware.htmlunit.DefaultCssErrorHandler error
        ADVERT�NCIA: CSS error: 'http://www.google.com.br/?gfe_rd=cr&ei=Z1h4VdzSMabX8gew3oHgAg' [1:15068] Error in
        pression; ':' found after identifier "progid".
        jun 10, 2015 12:31:42 PM com.gargoylesoftware.htmlunit.DefaultCssErrorHandler error
        [...]
        O t�tulo da p�gina �: Queijo! - Pesquisa Google

Veja que no final da listagem temos a exibiç�o do t�tulo da p�gina. Nas linhas anteriores temos alguns erros exibidos (dentre outros que foram omitidos da listagem) que caracterizam o processo de validaç�o do Selenium, ou seja, sempre que alguma tag n�o for fechada ou faltar algum atributo obrigat�rio ou tivermos qualquer erro a n�vel de HTML, essas linhas ser�o impressas. Mas n�o precisa se preocupar com isso, esse � um comportamento padr�o do Selenium.

Em algumas situaç�es ser� preciso tamb�m acessar propriedades via JavaScript de dentro das p�ginas. Por exemplo, suponha que em vez de acessarmos o t�tulo da p�gina via m�todo getTitle() do driver, n�s quis�ssemos executar um script JavaScript que fizesse o mesmo procedimento. Para isso, precisar�amos fazer uso da classe JavaScriptExecutor da API do Selenium e passar a string do nosso script como par�metro para o seu m�todo executeScript().

Entretanto, como em todo browser, tamb�m precisamos habilitar o seu suporte ao JavaScript. Os browsers comuns j� v�m com ele habilitado, mas n�o � o caso do HTMLUnitDriver do Selenium. Vejamos o c�digo da Listagem 5 para isso. Vamos acessar agora o site da DevMedia que tem mais recursos visuais para usarmos de exemplo.

Listagem 5. C�digo para busca de elementos via JavaScript.


        package br.edu.devmedia.selenium;

        import java.util.concurrent.TimeUnit;

        import org.openqa.selenium.By;
        import org.openqa.selenium.JavascriptExecutor;
        import org.openqa.selenium.WebDriver;
        import org.openqa.selenium.WebElement;
        import org.openqa.selenium.htmlunit.HtmlUnitDriver;

        public class HTMLDriver {
        public static void main(String[] args) {
        HtmlUnitDriver driver = new HtmlUnitDriver();
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        driver.setJavascriptEnabled(true);

        driver.get("https://www.devmedia.com.br/");

        WebElement element = driver.findElementByCssSelector(".dm-busca");
        System.out.println("Cor de fundo: " + element.getCssValue("background-color"));
        System.out.println("Padding: " + element.getCssValue("padding"));
        System.out.println("Classe CSS:" + element.getAttribute("class"));

        JavascriptExecutor javascript = (JavascriptExecutor) driver;
        String tituloPagina = (String) javascript.executeScript("return document.title");
        System.out.println("O t�tulo da p�gina � : " + tituloPagina);

        driver.quit();
        }
        }

Veja que na linha 14 estamos configurando um timeout para as requisiç�es feitas ao HTMLUnitDriver. Isso porque os testes podem ser impactados quando um request demorar muito a retornar, logo voc� tem essa opç�o em m�os semelhante ao que fazemos com Web Services. O m�todo implicityWait() define o tempo m�ximo de processamento, no caso cinco segundos.

Em seguida, na linha 15, usamos o m�todo setJavascriptEnabled() para definir que o JavaScript estar� habilitado nesse browser. Se estiver usando uma inst�ncia do Firefox ou Chrome como fizemos antes, esse c�digo n�o ser� necess�rio.

Nas linhas seguintes vemos algumas propriedades novas, a saber:

Linha 19: O m�todo findElementByCssSelector() recebe o seletor do elemento a ser recuperado na p�gina HTML, no caso a caixa de pesquisas da p�gina inicial; A Tabela 1 traz uma lista completa dos m�todos poss�veis.
Linhas 20 a 22: Imprimimos o valor das propriedades CSS de cor de fundo, padding e classe do mesmo elemento, respectivamente;
Linha 24: Instanciamos um novo objeto do tipo JavascriptExecutor a partir do pr�prio objeto driver (que o herda automaticamente pela herança de classes);
Linha 25: Chamamos o m�todo executeScript() passando o JavaScript que queremos que seja executado no browser. Essa cl�usula sempre deve vir precedida da palavra-chave �return�, j� que precisamos que algo seja retornado;
Linha 28: Encerramos o driver.

Tabela 1. Lista de m�todos para recuperar elementos no Selenium.

Estrat�gia	Sintaxe	Descriç�o
Por ID	driver.findElement(By.id(<ID do elemento>))	Recupera um elemento pelo atributo �id�
Por nome	driver.findElement(By.name(<Nome do elemento>))	Recupera um elemento pelo atributo �name�
Por nome da classe	driver.findElement(By.className(<Classe CSS do elemento>))	Recupera um elemento pelo atributo �class�
Pelo nome da tag	driver.findElement(By.tagName(<Nome da tag HTML>))	Recupera um elemento pelo nome da tag HTML
Pelo texto do link	driver.findElement(By.linkText(<Texto do Link>))	Recupera um link usando seu texto.
Pelo texto parcial do link	driver.findElement(By.partialLinkText(<Texto parcial do Link>))	Recupera um link pelo seu texto parcial
Por CSS	driver.findElement(By.cssSelector(<Seletor do elemento>))	Recupera um elemento pelo seu seletor CSS
Por XPath	driver.findElement(By.xpath(<express�o query xpath>))	Recupera um elemento usando um query XPath

Para verificar o resultado, reexecute a aplicaç�o e voc� dever� ver no console a mensagem impressa pela Listagem 6.

Listagem 6. Mensagem final de execuç�o do teste.


        Cor de fundo: rgb(48, 47, 49)
        Padding: 95px 0 45px 0
        Classe CSS:container-fluid dm-busca
        O t�tulo da p�gina �: DevMedia - Tutoriais, Videos e Cursos de Programaç�o

Agora suponha que precisamos migrar toda essa l�gica de testes para o Firefox. Mais que isso, precisamos enviar apenas um texto de sugest�o para a caixa de pesquisa do Google, mas sem clicar no submit. E ap�s isso, esperar at� que a caixa de sugest�es apareça para que recuperemos todas as sugest�es que o Google deu para a palavra informada. Vejamos como ficaria o nosso m�todo main (Listagem 7).

Listagem 7. Teste caixa de sugest�es do Google.


        package br.edu.devmedia.selenium;

        import java.util.concurrent.TimeUnit;

        import org.openqa.selenium.By;
        import org.openqa.selenium.JavascriptExecutor;
        import org.openqa.selenium.WebDriver;
        import org.openqa.selenium.WebElement;
        import org.openqa.selenium.htmlunit.HtmlUnitDriver;

        public class HTMLDriver {
        public static void main(String[] args) throws Exception {
        WebDriver driver = new FirefoxDriver();

        driver.get("http://www.google.com/webhp?complete=1&hl=en");

        WebElement query = driver.findElement(By.name("q"));
        query.sendKeys("devmedia");

        long end = System.currentTimeMillis() + 5000;
        while (System.currentTimeMillis() < end) {
        WebElement resultsDiv = driver.findElement(By.className("sbdd_b"));

        if (resultsDiv.isDisplayed()) {
        break;
        }
        }

        List<WebElement> allSuggestions = driver.findElements(By.xpath("//div[@class='sbqs_c']"));

        for (WebElement suggestion : allSuggestions) {
        System.out.println(suggestion.getText());
        }

        driver.quit();
        }
        }

At� a linha 18 fazemos a mesma configuraç�o de recuperaç�o do campo de pesquisa e informaç�o da string a ser pesquisada. Na linha 20 criamos uma vari�vel inteira com um valor cinco segundos � frente do tempo atual atrav�s do m�todo currentTimeMillis(), assim teremos como pausar a execuç�o do Selenium at� que a p�gina de sugest�es seja gerada. O teste se baseia nos cinco segundos ou at� que o objeto driver encontre o elemento de classe CSS �sbdd_b� que corresponde � respectiva caixa.

Uma vez encontrada (linha 24), recuperamos todos os elementos que casem com o xpath (express�o de caminho) da linha 29. Essa express�o diz que o driver tem de buscar por todos os elementos do tipo div que tenham classe CSS com valor �sbqs_c� que correspondem aos itens de sugest�o.

No final, iteramos sobre essa lista (linha 31) e exibimos todos os seus valores (geralmente quatro). O interessante a se notar � que dessa vez acompanharemos a execuç�o j� que estamos executando via driver do Firefox.

Para ver o resultado, reexecute a aplicaç�o e aguarde. Voc� dever� ver uma tela semelhante � da Figura 6 aparecer e fechar sozinha quando finalizar o teste, bem como o texto da Listagem 8 aparecer no console da IDE.

Figura 6. Tela de teste no Firefox com sugest�es.

Listagem 8. Mensagem final de execuç�o do teste com sugest�es impressas.


        >devmedia
        >devmedia cursos
        >devmedia player
        >devmedia java magazine
        >jun 10, 2015 1:04:47 PM org.openqa.selenium.os.UnixProcess$SeleniumWatchDog destroyHarder
        INFORMAÇ�ES: Command failed to close cleanly. Destroying forcefully (v2).
        org.openqa.selenium.os.UnixProcess$SeleniumWatchDog@53aad5d

A mensagem final quer dizer que, uma vez que chamamos o m�todo driver.quit() a inst�ncia do Firefox ser� finalizada.

Seletores jQuery

A biblioteca jQuery � extremamente mais simples e produtiva de usar em relaç�o ao JavaScript puro. Voc� pode optar por us�-la em conjunto com seus seletores para recuperar elementos, definir eventos e funç�es de callback, bem como enviar submits em formul�rios.

Para criar um cen�rio mais pr�ximo da realidade dos projetos, vamos criar uma p�gina de cadastro de usu�rio simples com suporte a jQuery para os scripts e Bootstrap para o estilo e estrutura da mesma. Vejamos na Listagem 9 o c�digo para isso.

Listagem 9. C�digo da p�gina HTML de cadastro de usu�rios.


        <!DOCTYPE html>
        <html lang="en">
        <head>
        <title>Selenium Teste</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        </head>
        <body>

        <div class="container">
        <div class="col-md-12">
        <h2>Cadastro de Pessoa</h2>
        <div class="panel panel-info">
        <div class="panel-heading">Formul�rio B�sico</div>
        <div class="panel-body">
        <form role="form">
        <div class="form-group">
        <label class="control-label" for="exampleInputEmail1">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Digite seu email">
        </div>

        <div class="form-group">
        <label class="control-label" for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Digite sua senha">
        </div>

        <div class="form-group">
        <div class="checkbox">
        <label> <input type="checkbox"> Ativo </label>
        </div>
        <p class="help-block">Lorem ipsum dolor sit amet</p>
        </div>

        <div class="form-group">
        <label class="control-label">Opç�es</label>
        <div class="checkbox">
        <label> <input type="checkbox" name="optionsRadios" id="optionsCheckbox1" value="option1"
        ecked="">
        ç�o 1 </label>
        </div>
        <div class="checkbox">
        <label> <input type="checkbox" name="optionsRadios" id="optionsCheckbox2" value="option2"> Opç�o
        2
        </label> </div>
        </div>

        <div class="form-group">
        <label class="control-label">Sexo</label>
        <div class="radio">
        <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
        Masculino </label>
        </div>
        <div class="radio">
        <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Feminino
        </label>
        </div>
        </div>

        <button type="submit" class="btn btn-default">Criar Usu�rio</button>
        </form>
        </div>
        </div>
        </div>
        </div>
        </body>
        </html>

A listagem faz a importaç�o no in�cio dos arquivos de script necess�rios para carregar o jQuery e o estilo do Bootstrap (linhas 7 a 9). Os imports foram feitos via CDN (Content Delivery Network) portanto, n�o precisamos baix�-los estaticamente. A p�gina traz apenas dois campos de input (email e senha, linhas 22 e 32), tr�s checkboxes, dois bot�es de r�dio e o bot�o de submit no fim da mesma. Voc� pode visualizar a p�gina executando o arquivo diretamente no browser, tal como mostrado na Figura 7.

Figura 7. Tela de cadastro de usu�rios para teste.

Nossos objetivos com esta p�gina ser�o (Listagem 10):

Buscar todos os elementos checked e exibir a quantidade;
Buscar o id do elemento que recebeu o foco (email);
Mudar a seleç�o do campo sexo para feminino;
Mudar o texto do bot�o de submit para �Texto Mudado�.

Listagem 10. C�digo para acessar propriedades da p�gina de cadastro.


        package br.edu.devmedia.selenium;

        import java.util.concurrent.TimeUnit;

        import org.openqa.selenium.By;
        import org.openqa.selenium.JavascriptExecutor;
        import org.openqa.selenium.WebDriver;
        import org.openqa.selenium.WebElement;
        import org.openqa.selenium.htmlunit.HtmlUnitDriver;

        public class HTMLDriver {
        public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        driver.get("file:///D:/Downloads/login.html");

        List<String> checked = Arrays.asList(new String[]{"optionsCheckbox1", "optionsRadios1"});
        JavascriptExecutor js = (JavascriptExecutor) driver;

        @SuppressWarnings("unchecked")
        List<WebElement> checkedElements = (List<WebElement>) js.executeScript("return
        jQuery.find(':checked')");

        @SuppressWarnings("unchecked")
        List<WebElement> focusElements = (List<WebElement>) js.executeScript("return
        jQuery.find(':focus')");

        if (checkedElements.size() == 2)
        System.out.println("Duas checkboxes selecionadas");

        if (focusElements.size() == 1)
        System.out.println("Campo com foco: " + focusElements.get(0).getAttribute("id"));

        for (WebElement element : checkedElements) {
        if (checked.contains(element.getAttribute("id"))) {
        System.out.println("Elemento cont�m id");
        }
        }

        js.executeScript("jQuery('#optionsRadios2').attr('checked', 'checked')");
        js.executeScript("jQuery('button[type=\"submit\"]').text('Texto Mudado')");

        // driver.close();
        }
        }

A primeira mudança significativa est� na linha 14, onde estamos acessando o arquivo HTML localmente, diretamente da pasta onde voc� salvou a p�gina. Dessa forma n�o precisamos hospedar a aplicaç�o para fazer os testes e o Selenium prov� esse recurso de maneira off-line. Na linha 16 criamos uma lista de WebElement�s para recuperar todos os itens checados (r�dio e checkbox) da p�gina. Veja que � nesse trecho onde executamos o primeiro c�digo jQuery que precisa ter o seletor informado dentro m�todo executeScript().

Na linha 23 fazemos a mesma seleç�o, s� que agora para o campo que tem o foco (:focus). Na linha 25 testamos o tamanho da lista de elementos checados e na linha 28 para a lista de elementos com foco. Da linha 31 a 35 verificamos se algum dos elementos recuperados cont�m o atributo �id�, apenas para imprimir a mensagem de sucesso.

No final, na linha 37 executamos o c�digo jQuery para selecionar o r�dio de Feminino, e na linha 38 mudamos o texto do bot�o de submit.

Para verificar o resultado, reexecute a aplicaç�o e voc� ver� algo semelhante ao que temos na Figuras 8 (no browser Firefox) e 9 (no console da IDE).

Figura 8. Tela de cadastro de usu�rios ap�s o teste.

Figura 9. Tela de console com resultado da execuç�o.

O leitor ainda pode adicionar mais arquivos de scripts ou CSS dinamicamente a partir do c�digo Selenium via vari�vel var headID que est� dispon�vel para representar o cabeçalho da p�gina. Isso vale, inclusive, para quaisquer frameworks jQuery que queira acrescentar na implementaç�o.

Selenium IDE na pr�tica

A Selenium IDE � uma ferramenta de testes para aplicaç�es web totalmente integrada com os conceitos do framework no que se refere � gravaç�o e playback dos testes de regress�o. Atrav�s dela, o desenvolvedor n�o � mais obrigado a usar qualquer linguagem de programaç�o, apesar de poder fazer isso. Tamb�m � poss�vel exportar os scripts para quaisquer linguagens suportadas.

Os scripts criados para a aplicaç�o de teste s�o chamados de casos de teste e um conjunto de casos de teste � chamado de su�te. Para trabalhar com ela, � preciso primeiro fazer o download (seç�o Links). Efetue o download da vers�o mais recente na subseç�o �Selenium IDE� e d� um click duplo para iniciar a instalaç�o.

� importante que o leitor considere que essa IDE s� � suportada pelo Firefox, logo n�o � poss�vel configur�-la em outros browsers (caso prefira o Chrome, use a opç�o com Java mostrada na seç�o anterior). Reinicie o Firefox e pronto, sua IDE est� instalada. Para verificar, v� at� a opç�o �Tools > Selenium IDE� e uma janela igual � da Figura 10 ir� aparecer.

Figura 10. Janela da Selenium IDE no Firefox.

Na Tabela 2 voc� pode encontrar um detalhamento dos principais bot�es e funcionalidades fornecidos pela IDE.

Tabela 2. Lista de bot�es e comandos padr�o da Selenium IDE.

Bot�o		Descriç�o
Controlador de Velocidade		� usado para controlar o qu�o r�pidos seus casos de teste ir�o executar.
Bot�o �Run All�		� usado para executar a su�te de testes completa, com todos os testes adicionados a ela. A execuç�o ocorre na ordem em que os testes forem declarados.
Bot�es �Pause/Resume�		O primeiro bot�o pausa a execuç�o do teste atual, enquanto o segundo retoma-a.
Bot�o �Step�		� usado para executar os comandos de teste um por um, manualmente. Suponha que voc� tenha pausado o teste e agora deseja ver linha por linha o que est� acontecendo.... Esse bot�o faz isso, simulando um debug comum.
Bot�es �Record/Stop Recording�		O primeiro � usado para iniciar a gravaç�o de um script e o segundo para encerr�-la.
Bot�o �Toggle Schedule�		� usado para agendar execuç�es de script. Serve para situaç�es onde o software precisa rodar um teste de tempos em tempos, sem a necessidade de um humano por perto.
Janela �Table�		Exibe os comandos gravados. Voc� pode modificar e incluir novos comandos, que s�o divididos em tr�s partes: Command: descreve o nome do comando; Target: descreve o elemento alvo (id ou name) do Xpath; Value: descreve o valor do elemento.

Primeiros testes na IDE

Agora que temos a IDE instalada, podemos gravar um teste automatizado apenas usando a aplicaç�o desejada normalmente. Façamos um teste com os seguintes passos:

Entrar no site da DevMedia.
Clicar no bot�o �Login�.
Digitar um login e senha qualquer.
Clicar em �OK�.

O teste � demasiadamente simples, mas � o suficiente para que voc� entenda como o Selenium salva seus scripts. Agora, abra uma nova aba do browser (em branco) e na IDE clique no bot�o �Record�. Em seguida, efetue a lista de passos que mostramos e ao finalizar, clique no bot�o �Stop Recording�.

Ao final, sua IDE estar� semelhante � que temos na Figura 11. Veja que temos cinco comandos com tipos e targets diferentes. Por exemplo: o tipo �open� define que entramos numa URL (exibida no topo da janela, no campo �Base URL�); o tipo �click� define que clicamos num elemento de nome �usuario� e o tipo �clickAndWait� define que foi enviado um submit e que o Selenium deve aguardar at� que a resposta retorne. Em relaç�o aos campos que precisam de um valor a ser informado (input text), a terceira coluna � preenchida com os mesmos.

Figura 11. Selenium IDE com testes finalizados e gravados.

Voc� tamb�m pode modificar os seus testes via script. Clique na aba �Source� ao lado de �Table� e voc� ver� um conte�do semelhante ao da Listagem 11.

Listagem 11. C�digo script gerado para o teste na Selenium IDE.


        <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head profile="http://selenium-ide.openqa.org/profiles/test-case">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="selenium.base" href="https://www.devmedia.com.br/" />
        <title>New Test</title>
        </head>
        <body>
        <table cellpadding="1" cellspacing="1" border="1">
        <thead>
        <tr><td rowspan="1" colspan="3">New Test</td></tr>
        </thead><tbody>
        <tr>
        <td>open</td>
        <td>/</td>
        <td></td>
        </tr>
        <tr>
        <td>click</td>
        <td>css=div.popover1</td>
        <td></td>
        </tr>
        <tr>
        <td>type</td>
        <td>name=usuario</td>
        <td>test</td>
        </tr>
        <tr>
        <td>type</td>
        <td>name=senha</td>
        <td>123</td>
        </tr>
        <tr>
        <td>clickAndWait</td>
        <td>css=button[type="submit"]</td>
        <td></td>
        </tr>

        </tbody></table>
        </body>
        </html>

O conte�do do script � sempre gerado em HTML, logo temos as importaç�es das tags meta e link na tag head, bem como a tabela com os comandos logo abaixo. � aconselh�vel que o leitor sempre utilize a opç�o gr�fica para evitar qualquer erro de sintaxe na ferramenta.

Agora, sempre que quiser reexecutar o mesmo teste, basta selecionar o nome do test case na barra lateral esquerda e clicar no bot�o �Play test suite�.

Sobre os Casos de Teste

A primeira vez que abrimos a IDE do Selenium o bot�o de gravaç�o j� vem ativado, e isso permite uma interaç�o via uso do site que ter� seus scripts salvos. Se voc� n�o deseja que a IDE faça isso, v� at� o menu �Options > Options...� e desmarque a opç�o �Start recording immediately on open�.

Quando se est� construindo um caso de testes, algumas consideraç�es devem ser levadas em conta:

Para gravar aç�es do tipo submit, � necess�rio que o usu�rio clique no bot�o em vez de dar um enter em algum dos campos do formul�rio. Isso porque o Selenium n�o consegue reconhecer esse evento e associar a um envio de request, j� que o usu�rio pode dar v�rios enters, ou ter um controle de navegaç�o de campo para campo via tecla Enter, em vez de Tab.
Quando clicamos em um link durante uma gravaç�o, o Selenium IDE grava o comando no tipo �click�. Por�m, voc� deve mudar esse tipo para �clickAndWait� para garantir que o seu caso de teste far� uma pausa at� que a p�gina carregue por completo e o fluxo possa prosseguir sem erros. Caso contr�rio, nosso caso de teste continuar� executando os comandos antes que a p�gina tenha todos os elementos UI carregados na HTML.

Os seus casos de teste tamb�m ter�o que verificar as propriedades de uma p�gina da web. Isso requer o uso dos comandos assert (comparar dois valores) e verify (fazer um teste qualquer). Quando o Selenium IDE estiver gravando, v� at� o navegador exibindo seu aplicativo de teste e clique com o bot�o direito em qualquer lugar da p�gina. Ser� exibido um menu de contexto mostrando os referidos comandos bem como outros (Figura 12) que podem ser usados via Selenium.

Figura 12. Menu de contexto com comandos Selenium.

A primeira vez que voc� acessar a IDE, ter� apenas um ou dois comandos dispon�veis. Mas � medida que for criando seus casos de teste e o browser for efetuando operaç�es mais complexas, como submits, scrolling, dentre outras, o Selenium ir� preenchendo essa lista automaticamente com as opç�es que ela julgar que voc� possa precisar. Dentre a lista de comandos mostrada na figura, os principais s�o:

open: abre uma p�gina usando a URL passada;
click/clickAndWait: executa uma operaç�o de clique e, opcionalmente, aguarda uma nova p�gina carregar;
verifyTitle/assertTitle: verifica se um t�tulo esperado para a p�gina est� presente;
verifyTextPresent: verifica se um texto esperado est� em algum lugar na p�gina;
verifyElementPresent: verifica se um elemento UI esperado, tal como definido pela sua tag HTML, est� presente na p�gina;
verifyText: verifica se o texto esperado e sua tag HTML correspondente est�o presentes na p�gina;
verifyTable: verifica se conte�do esperado de uma tabela est� presente;
waitForPageToLoad: finaliza a execuç�o at� que uma nova p�gina seja carregada. Chamado automaticamente quando o clickAndWait � usado;
waitForElementPresent: finaliza a execuç�o at� que um elemento da interface do usu�rio esperado, conforme definido pela sua tag HTML, est� presente na p�gina.

Existem in�meras outras abordagens nas quais o leitor poder� usar o Selenium. Como vimos, a automaç�o precisa estar obrigatoriamente vinculada a telas, estejam elas executando num PC, smartphone, tablet, etc. O Selenium conta ainda com dois drivers espec�ficos para ambientes m�veis: AndroidDriver, classe da API do Selenium exclusiva para dispositivos Android; e iWebDriver, para simular testes em ambiente iOS.

Tamb�m � poss�vel integrar o Selenium com o JUnit, QUnit, JTestDriver e outros in�meros frameworks de teste unit�rio dispon�veis no mercado. Os arquivos que eles geram em conjunto s�o leves e podem facilmente se adaptar a um controle de integraç�o com o Jenkins, por exemplo, bem como ser manuseados por ferramentas de versionamento (Git, Mercurial, etc.).

Para os desenvolvedores PHP que querem fazer uso do Selenium, o mesmo n�o prov� suporte nativo � linguagem, mas � poss�vel usar o PHPUnit: uma inst�ncia do xUnit para testes unit�rios que traz consigo m�dulos do Selenium que podem ser instalados via linha de comando.

Links

P�gina oficial de download do JDK.

P�gina oficial de download do Eclipse.

P�gina de download do driver do Chrome para o Selenium.

Confira tamb�m

Cursos de Java

Cursos

Linguagem Java: Hello Word!

Curso

Bean Validation: Validaç�o de dados em Java

Curso

Testes automatizados com o Framework Selenium

Aprenda nesse artigo a automatizar os testes das suas telas front-end com o framework Selenium e ganhe em produtividade e escalabilidade em suas aplicações.

Guia do artigo:

Configuraç�o do ambiente

Seletores jQuery

Selenium IDE na pr�tica

Primeiros testes na IDE

Sobre os Casos de Teste

Confira tamb�m

Cursos de Java

Linguagem Java: Hello Word!

Bean Validation: Validaç�o de dados em Java

Artigos relacionados