Drag and Drop! Descomplicando o desenvolvimento de scripts de testes automáticos

Amado por uns, dor de cabeça para outros! É assim que o Drag And Drop é encarado por muitas pessoas.

Amado porque torna algumas operações fáceis e prática de serem usada como anexar um documento em um e-mail, adicionar um produto a um carrinho, aumentar/diminuir o volume de uma música, etc... mas também é uma enorme dor de cabeça pra quem trabalha com automação de testes.

Por que?

Existem vários plugins já prontos na internet que facilitam a vida do webdesigner na hora de implementar uma funcionalidade com o "segurar e soltar" sem que se preocupe com a sopa de letrinhas de tecnologias que estão envolvidas para fazer isto (HTML5, CSS, JavaScript, JQuery, React,...). Isso dificulta o desenvolvimento dos scripts de automação de testes.

Algumas ferramentas de automação já tem funções nativas para lidar com isso, mas nem sempre funcionam por causa de todas as tecnologias citadas anteriormente.

Para esse post vamos dar alguns exemplos de duas ferramentas. O Selenium Webdriver e o Testcomplete. Uma com foco em sistemas web e outra em sistemas desktop, respectivamente, e também algumas referências de "hacks" quando as funções nativas não funcionam. Mas antes de apresentar os exemplos dos códigos é preciso entender como é o funcionamento do Drag And Drop. Você sabe como funciona?

A tradução literal já diz muita coisa (arrastar e soltar) e é bem isso mesmo o que acontece na prática. As funções de drag and drop “nativas” do Selenium WebDriver são um agrupamento de ações que são executadas em sequência. Basicamente essas funções simulam o que um usuário faria para realizar o “arrastar e soltar” da seguinte maneira:

  • “Mover” o cursor do mouse para o elemento que será arrastado;
  • “Clicar” e “Segurar” mantendo o cursor neste elemento;
  • “Mover” o cursor do mouse, arrastando o elemento original, para o elemento alvo;
  • “Soltar” o clique do cursor.

Parece complicado? Fique tranquilo! O Selenium Webdriver já possui uma função, em diversas linguagens, que encapsulam todas essas ações e mostrarei alguns exemplos de como elas são usadas em Java, C# e Python.

Exemplos - Selenium

//Java

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

WebElement target = driver.findElement(By.name("target"));

(new Actions(driver)).dragAndDrop(element, target).perform();

//C#

IWebElement element = driver.FindElement(By.Name("source"));
IWebElement target = driver.FindElement(By.Name("target"));


(new Actions(driver)).DragAndDrop(element, target).Perform();

//Python

from selenium.webdriver import ActionChains

element = driver.find_element_by_name("source")
target = driver.find_element_by_name("target")


ActionChains(driver).drag_and_drop(element, target).perform()

Você vai reparar que apesar das sintaxes serem diferentes, como era de se esperar, o funcionamento é exatamente o mesmo. Basicamente existem duas variáveis que recebem os elementos alvo e destino e em sequência são passados como parâmetro para a função Drag And Drop. Note também que para que a execução aconteça é preciso disparar a operação com o comando perform. É ele que vai executar de fato todas as ações.

Exemplo - Testcomplete

Já no Testcomplete é um pouco diferente porque não existe uma função parecida às já citada neste post para simular a operação de Drag And Drop, tornando o desenvolvimento do script um pouco mais complicado. Complicado porque a função trabalha com coordenadas, ou seja, posição (x,y) do elemento alvo com a posição (x,y) do elemento destino.

Isso quer dizer que para cada operação que você for fazer vai precisar saber as posições de cada elementos. O jeito mais fácil é criar um mecanismo que pegue automaticamente esses valores para você.

No exemplo abaixo você verá uma implementação que atende tanto sistemas web quanto sistemas desktop.

//Javascript (Testcomplete)

function drag_and_drop(source, target)

{

  var sourceX = get_x( target )

  var sourceY = get_x( source )

  var targetX  =  get_y( target )

  var targetY  =  get_y( source )

source.Drag(0, 0, sourceX - sourceY, targetX - targetY )

}

function get_x(element)

{

return element.ScreenLeft

}

function get_y(element)

{

return element.ScreenTop

}

Note que o grande segredo está nas duas funções auxiliares get_x() e get_y(). É com base nesses valores retornados por essas funções que o "caminho" que a operação irá percorrer é criado dinamicamente.

source.Drag(0, 0, sourceX - sourceY, targetX - targetY )

Toda a mágica acontece nessa linha que significa que a partir da posição (0,0) do source, o elemento vai ser arrastado até a posição (x,y), no caso, o target.

Com esse código, por exemplo, você conseguirá simular um arquivo na área de trabalho ser arrastado para a lixeira.

Outras alternativas

Nem sempre essas funções vão funcionar corretamente, muito por conta de tecnologias utilizadas no desenvolvimento da funcionalidade de Drag And Drop. O jeito é procurar na internet algumas soluções quando isso acontece.

Listei dois links interessantes que valem a pena dar uma conferida. Cada qual com suas explicações e jeitos de funcionamento. Nesses exemplos, você verá scripts que podem ser adicionados ao Webdriver, permitindo a você novos recursos para simular o Drag And Drop.

Obs.: Para adicionar esses scripts no Webdriver, basta adicionar o seguinte código no seu projeto.

driver.execute_script( arquivo )

Conclusão

Cada caso é um caso e vai ter uma solução bem específica dependendo de como o Drag And Drop foi construído. Se nenhum dos exemplos apresentados nesse post funcionar para o seu problema, deixe nos comentários um exemplo com o link, se possível, que terei prazer em ajudá-los(as). Se gostou, deixe um comentário. Se não gostou também, deixe um comentário. Seu feedback é muito importante.

Até a próxima….

Referências

https://support.smartbear.com/viewarticle/86933/

http://www.seleniumhq.org/docs/03_webdriver.jsp#drag-and-drop

 

 

About Leonardo Amaral

Graduado em Análise e Desenvolvimento de Sistemas (UNATEC) e certificado em fundamentos de testes (CTFL / ISTQB). Mais de 7 anos de experiência com processos e qualidades de testes. Leonardo atua com gerenciamento de testes em fábricas de softwares , consultoria em automação de testes e ferramentas de qualidade de software.