Como verificar a dica de ferramenta em Selenium webdriver
Krishna Degrau
Dica em Selenium
A Dica em Selenium é um texto que aparece quando o mouse passa sobre um objeto em uma página da web. O objeto pode ser um link, uma imagem, um botão, uma área de texto, etc. O texto da dica de ferramenta geralmente fornece mais informações sobre o objeto sobre o qual o usuário passa o cursor do mouse.
As dicas de ferramentas eram tradicionalmente implementadas como um atributo 'título' para um elemento. O valor deste atributo foi mostrado como uma dica de ferramenta ao passar o mouse. Este é um texto estático que fornece informações do elemento sem estilo.
Agora, existem muitos plug-ins disponíveis para implementação de 'dicas de ferramentas'. Dicas de ferramentas avançadas com estilo, renderização, imagens e links estão sendo implementadas usando JavaPlugins de script/JQuery ou uso de dicas de ferramentas CSS.
- Para acessar ou verificar as dicas de ferramentas estáticas que são implementadas usando o atributo HTML “title”, podemos simplesmente usar o método getAttribute(“title”) do WebElement. O valor retornado deste método (que é o texto da dica) é comparado com um valor esperado para verificação.
- Para outras formas de implementação de dicas de ferramentas, teremos que usar a “API Advanced User Interactions” fornecida pelo Web Driver para criar o efeito de passar o mouse e então recuperar a dica de ferramenta para o elemento.
Um resumo da API de interações avançadas com o usuário
A API Advanced User Interactions fornece a API para ações do usuário, como arrastar e soltar, passar o mouse, seleção múltipla, pressionar e soltar teclas e outras ações usando o teclado ou mouse em uma página da web.
Você pode se referir a isso link para obter mais detalhes sobre a API.
Aqui, vamos ver como usar algumas classes e métodos que precisaríamos para mover um elemento deslizante por um deslocamento.
Passo 1) Para usar a API, os seguintes pacotes/classes precisam ser importados:
Passo 2) Crie um objeto da classe “Ações” e construa a Sequência de ações do usuário. A classe Actions é usada para construir a sequência de ações do usuário como moveToElement(), dragAndDrop() etc. Vários métodos relacionados às ações do usuário são fornecidos pela API.
O objeto driver é fornecido como parâmetro para seu construtor.
Passo 3) Crie um objeto de ação usando o método build() da classe “Actions”. Chame o método perform() para executar todas as ações construídas pelo objeto Actions (construtor aqui).
Vimos como usar alguns dos métodos de ações do usuário fornecidos pela API – clickAndHold(element), moveByOffset(10,0), release(). A API fornece muitos desses métodos.
Consulte o link para mais detalhes.
Como verificar (manipular) a dica de ferramenta em Selenium
Vamos ver a demonstração de acesso e verificação das dicas de ferramentas no cenário simples
- Cenário 1: a dica de ferramenta é implementada usando o atributo “title”
- Cenário 2: a dica de ferramenta é implementada usando um plugin jQuery.
Cenário 1: Atributo HTML 'título'
Para este caso, vamos pegar o site de exemplo – https://demo.guru99.com/test/social-icon.html.
Tentaremos verificar a dica do ícone “github” no canto superior direito da página.
Para fazer isso, primeiro encontraremos o elemento e obteremos seu atributo 'title' e verificaremos com o texto da dica de ferramenta esperado.
Como estamos assumindo que a dica de ferramenta está no atributo “title”, não estamos nem automatizando o efeito de passar o mouse, mas simplesmente recuperando o valor do atributo usando o método “getAttribute()”.
Aqui está o código
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.*;
public class ToolTip {
public static void main(String[] args) {
String baseUrl = "https://demo.guru99.com/test/social-icon.html";
System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get(baseUrl);
String expectedTooltip = "Github";
// Find the Github icon at the top right of the header
WebElement github = driver.findElement(By.xpath(".//*[@class='soc-ico show-round']/a[4]"));
//get the value of the "title" attribute of the github icon
String actualTooltip = github.getAttribute("title");
//Assert the tooltip's value is as expected
System.out.println("Actual Title of Tool Tip"+actualTooltip);
if(actualTooltip.equals(expectedTooltip)) {
System.out.println("Test Case Passed");
}
driver.close();
}
}
Explicação do código
- Encontre o WebElement que representa o ícone “github”.
- Obtenha seu atributo “title” usando o método getAttribute().
- Afirme o valor em relação ao valor esperado da dica de ferramenta.
Cenário 2: plug-in JQuery
Existem vários plug-ins JQuery disponíveis para implementar as dicas de ferramentas, e cada um tem uma forma de implementação ligeiramente diferente.
Alguns plug-ins esperam que o HTML da dica de ferramenta esteja presente o tempo todo próximo ao elemento ao qual a dica de ferramenta é aplicável, enquanto outros criam uma tag “div” dinâmica, que aparece instantaneamente enquanto você passa o mouse sobre o elemento.
Para nossa demonstração, vamos considerar a forma de implementação da dica de ferramenta “jQuery Tools Tooltip”.
Aqui no URL – https://demo.guru99.com/test/tooltip.html você pode ver a demonstração onde, ao passar o mouse sobre “Baixar agora”, obtemos uma dica de ferramenta avançada com uma imagem, fundo de texto explicativo, uma tabela e um link dentro dela que pode ser clicado.
Se você olhar a fonte abaixo, verá que a tag div que representa a dica de ferramenta está sempre presente ao lado da tag do link “Baixar agora”. Porém, o código dentro da tag de script abaixo controla quando ele precisa aparecer.
Vamos tentar verificar apenas o texto do link na dica de ferramenta para nossa demonstração aqui.
Encontraremos primeiro o WebElement correspondente ao “Baixar agora”. Em seguida, usando a API de interações, passaremos para o elemento (passar o mouse). A seguir, encontraremos o WebElement que corresponde ao link dentro da dica de ferramenta exibida e o verificaremos em relação ao texto esperado.
Aqui está o código
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.*;
public class JqueryToolTip {
public static void main(String[] args) {
String baseUrl = "https://demo.guru99.com/test/tooltip.html";
System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
String expectedTooltip = "What's new in 3.2";
driver.get(baseUrl);
WebElement download = driver.findElement(By.xpath(".//*[@id='download_now']"));
Actions builder = new Actions (driver);
builder.clickAndHold().moveToElement(download);
builder.moveToElement(download).build().perform();
WebElement toolTipElement = driver.findElement(By.xpath(".//*[@class='box']/div/a"));
String actualTooltip = toolTipElement.getText();
System.out.println("Actual Title of Tool Tip "+actualTooltip);
if(actualTooltip.equals(expectedTooltip)) {
System.out.println("Test Case Passed");
}
driver.close();
}
}
Explicação do código
- Encontre o WebElement que corresponde ao elemento “baixe agora” que passaremos com o mouse.
- Usando a API de interações, passe o mouse sobre “Baixar agora”.
- Supondo que a dica de ferramenta seja exibida, encontre o WebElement que corresponde ao link dentro da dica de ferramenta, ou seja, a tag “a”.
- Verifique o texto da dica de ferramenta do link recuperado usando getText() em relação a um valor esperado que armazenamos em “expectedToolTip”
Resumo
Neste tutorial, você aprendeu como acessar as dicas de ferramentas usando Selenium Motorista web.
As dicas de ferramentas são implementadas de diferentes maneiras –
- A implementação básica é baseada no atributo “title” do HTML. getAttribute(title) obtém o valor da dica de ferramenta.
- Outras implementações de dicas de ferramentas, como JQuery, dicas de ferramentas CSS exigem API de interações para criar o efeito de passar o mouse
API de interações de usuário avançadas –
- moveToElement(element) da classe Actions é usado para passar o mouse sobre um elemento.
- O método Build() da classe Actions constrói a sequência de ações do usuário em um objeto Action.
- Perform() da classe Action executa toda a sequência de ações do usuário de uma vez.
Para verificar uma dica de ferramenta, primeiro precisamos passar o mouse sobre o elemento, depois encontrar o elemento que corresponde à dica de ferramenta e obter seu texto ou outros valores para verificar em relação aos valores esperados.
