Selenium

http://slides.com/roldaojr/selenium

Introdução ao Selenium

O que é Selenium

• Selenium é uma suite de ferramentas open source que pode ser utilizado para criação de testes funcionais para aplicações web.

Motivação

• Os testes de interface gráfica do software são
  • Demorados
  • Tediosos 
  • Possíveis de erro 

Origem

• Criada em 2004 quando Jason Huggins testava um aplicativo na ThoughtWorks.
• Algum tempo depois, Simon Stewart do Google iniciou um projeto chamado WebDriver
• Ambos projetos se uniram, dando origem ao Selenium-WebDriver (Selenium 2.0)

Características

• Permite a execução de testes em qualquer navegador com suporte a JavaScript.
• Provê um rico conjunto de funções específicas para implementação dos testes.

Componentes

• Selenium IDE
• Selenium Remote Control (1.0)
• Selenium WebDriver (2.0)
• Selenium GRID

Selenium IDE

• Plug-in do Firefox
• Ferramenta do tipo record-and-playback
• Não oferece suporte a testes com interação ou que devem ser executados com base em determinadas condições.
• Permite exportar código para ser usado em conjunto com o WebDriver
• Oferece suporte a plug-ins para extender sua funcionalidade

Tela do Selenium IDE

Selenium WebDriver

• Uso de linguagem de programação
• Maior flexibilidade nos testes
• Integração com ferramentas de teste

Selenium WebDriver - Linguagens Suportadas

• Pelo projeto
  • Java, C#, Ruby, Python, Javascript (Node)
• Por terceiros
  • Perl, PHP, Objetive-C, Dart, TCL, Haskell

Selenium WebDriver - Navegadores Suportados

• Firefox, Internet Explorer, Safari, Google Chrome, Opera, Windows Phone, Android, iOS, BlackBerry 10, HtmlUnit, PhantomJS

Exemplo de uso do WebDriver

package br.edu.ifrn.tads.teste.selenium;

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

public class Exemplo {
    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("teste de sofware");
        element.submit();
        System.out.println("O título da página é: " + driver.getTitle());
        driver.quit();
    }
}

https://gist.github.com/roldaojr/9dc15be4c5a71aa16b2b

Selenium GRID

• Distribui os testes em múltiplas máquinas
• Reduz o tempo gasto na execução de uma suite de testes grande
• Ideal para executar grandes suites de testes ou suites que devem ser executadas em várias platafomas

Utilizando o Selenium IDE

Árvore de um documento HTML

Instalação do Selenium IDE

• Abrir site http://www.seleniumhq.org
• Ir até a opção Download
• Rolar até a seção Selenium IDE
• Clicar no link do número da versão (2.8.0) para instalar o complemento do Firefox

Comandos básicos

• O Selenium IDE fornece uma série de comandos
• São dividos três tipos
  • Verificação
  • Ação
  • Gerais
• Pode-se chamar comandos de ação na página
• Todos os comandos que terminam com AndWait fazem uma espera até a página ser carregada (é possível configurar o tempo limite).

Comandos de verificação

• assert* - Garante que uma certa informação está na página, falha a execução do script caso a informação não esteja presente
• verify* - Verifica se uma certa informação está na página, o script continua mesmo se a informação não existir.

Comandos de ação

• click* - Clique do usuário
• type* - Mudar texto de um elemento
• sendKeys* - Digitar texto dentro de um elemento
• key* - Comandos de teclado
• mouse* - Botões mouse
• drag* - Arrastar
• check - Marcar um checkbox
• goBack - Voltar no navegador
• refresh - Atualizar a página

Comandos gerais

• store* - Guardar uma informação
• setTimeout - Definir tempo máximo de espera
• rollup - Executar um grupo e comandos predefinido
• echo - Mostrar um texto no console
• runscript - Executar código javascript no navegador

Locators

• Locators são forma de identificar um elemento dentro da página Web 
• Podem ser do tipo:
  • id (atributo ID do elemento)
  • nome (atribuido name elemento)
  • xpath (localizador XML XPath)
  • links
  • DOM (através de propriedades javascript DOM)
  • CSS (pelo seletor CSS)

Locator ID

<!DOCTYPE html>
<html>
  <body>
    <form id="loginForm">
      <input name="username" type="text" />
      <input name="password" type="password" />
      <input name="continue" type="submit" value="Login" />
      <input name="continue" type="reset" value="Clear" />
    </form>
  </body>
</html>

Encontra um elemento pelo atributo ID

Ex: id=loginForm

Locator Name

<!DOCTYPE html>
<html>
  <body>
    <form id="loginForm">
      <input name="username" type="text" />
      <input name="password" type="password" />
      <input name="continue" type="submit" value="Login" />
      <input name="continue" type="reset" value="Clear" />
    </form>
  </body>
</html>

Encontra um elemento pelo atributo name

Ex: name=username

Locator Link

<!DOCTYPE html>
<html>
  <body>
    <p>Deseja continuar?</p>
    <a href="continue.html">Continuar</a>
    <a href="cancel.html">Cancelar</a>
  </body>
</html>

Localiza um elemento através do atributo href

Ex: link=continue.html

      link=cancel.html

Locator CSS

<!DOCTYPE html>
<html>
  <body>
    <form id="loginForm">
      <input class="required" name="username" type="text" />
      <input class="required passField" name="password" type="password" />
      <input name="continue" type="submit" value="Login" />
      <input name="continue" type="reset" value="Clear" />
    </form>
  </body>
</html>

Localiza um elemento através do seletor CSS

Ex: css=input.required[type=text]

      css=input[type=password]

Locator DOM

<!DOCTYPE html>
<html>
  <body>
    <form id="loginForm">
      <input name="username" type="text" />
      <input name="password" type="password" />
      <input name="continue" type="submit" value="Login" />
      <input name="continue" type="reset" value="Clear" />
    </form>
  </body>
</html>

Localiza um elemento através na navegação nos elementos

Ex: document.forms[0].password

Locator XPath

<!DOCTYPE html>
<html>
  <body>
    <form id="loginForm">
      <input name="username" type="text" />
      <input name="password" type="password" />
      <input name="continue" type="submit" value="Login" />
      <input name="continue" type="reset" value="Clear" />
    </form>
  </body>
</html>

Localiza um elemento através na navegação nos elementos

Ex: /input[3]

      /input[@name="continue" and @type="reset"]

Praticar com Selenium IDE

• Escolher um site qualquer
• Gravar um script no Selenium IDE
• Usar comandos assert para testar o site

Testes com Selenium WebDriver

Instalação do Selenium WebDriver

• Abrir site http://www.seleniumhq.org
• Ir até a opção Download
• Rolar até a seção Selenium Client & WebDriver
• Clicar no link Download correspondente a linguagem Java
• Extrair o arquivo zip e adicionar os arquivos JAR ao projeto do eclipse

Exportando teste para Java

Código gerado

  @Before
  public void setUp() throws Exception {
    driver = new FirefoxDriver();
    baseUrl = "https://www.google.com.br/";
    driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
  }
  @Test
  public void testGoogleInstant() throws Exception {
    driver.get(baseUrl + "/?gws_rd=ssl");
    driver.findElement(By.id("lst-ib")).clear();
    driver.findElement(By.id("lst-ib")).sendKeys("teste de software");
    for (int second = 0;; second++) {
    	if (second >= 60) fail("timeout");
    	try {
            if (isElementPresent(By.linkText("Teste de software – Wikipédia, a enciclopédia livre"))) {
                break;
            }
        } catch (Exception e) {}
    	Thread.sleep(1000);
    }
  }

http://gist.github.com/roldaojr/86f13e8a5c9e4f0fa05e

Exercício

http://eliasnogueira.com/arquivos_blog/selenium/desafio/1desafio/

http://eliasnogueira.com/arquivos_blog/selenium/desafio/2desafio/