Dica de ferramenta em selênio
Uma dica de ferramenta no 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 no qual o usuário passa o cursor do mouse.
As dicas de ferramentas eram tradicionalmente implementadas como um atributo de '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 plug-ins JavaScript / JQuery ou usando 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 de ferramenta) é comparado com um valor esperado para verificação.
- Para outras formas de implementações de dica de ferramenta, teremos que usar a "API de Interações do Usuário Avançado" fornecida pelo Driver da Web para criar o efeito de foco do mouse e, em seguida, recuperar a dica de ferramenta para o elemento.
Um resumo da API de interações avançadas do usuário:
A API de interações avançadas do usuário fornece a API para ações do usuário como arrastar e soltar, pairar, seleção múltipla, pressionar e soltar tecla e outras ações usando o teclado ou o mouse em uma página da web.
Você pode consultar este link para obter mais detalhes sobre a API.
https://seleniumhq.github.io/selenium/docs/api/java/index.html?org/openqa/selenium/interactions/Actions.html
Aqui, vamos ver como usar algumas classes e métodos de que precisaríamos para mover um elemento deslizante por um deslocamento.
Etapa 1) Para usar a API, os seguintes pacotes / classes precisam ser importados:
Etapa 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 um parâmetro para seu construtor.
Etapa 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 criadas pelo objeto Actions (builder 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 obter texto de dica de ferramenta no Selenium Webdriver
Vamos ver a demonstração de como acessar e verificar as dicas de ferramentas no cenário simples
- Cenário 1: a dica de ferramenta é implementada usando o atributo "título"
- Cenário 2: a dica de ferramenta é implementada usando um plugin jQuery.
Cenário 1: Atributo HTML 'título'
Para este caso, vamos usar o site de exemplo - http://demo.guru99.com/test/social-icon.html.
Tentaremos verificar a dica de ferramenta do ícone "github" no canto superior direito da página.
Para fazer isso, primeiro encontraremos o elemento e obteremos seu atributo 'título' e verificaremos com o texto de dica de ferramenta esperado.
Visto que estamos assumindo que a dica de ferramenta está no atributo "title", não estamos nem mesmo automatizando o efeito de foco do 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 = "http://demo.guru99.com/test/social-icon.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");Driver WebDriver = novo ChromeDriver ();driver.get (baseUrl);StringesperadoTooltip = "Github";// Encontre o ícone do Github no canto superior direito do cabeçalhoWebElement github = driver.findElement (By.xpath (".//*[@ class = 'soc-ico show-round'] / a [4]"));// obtém o valor do atributo "title" do ícone do githubString actualTooltip = github.getAttribute ("título");// Assegure que o valor da dica de ferramenta é o esperadoSystem.out.println ("Título real da dica de ferramenta" + actualTooltip);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Caso de teste aprovado");}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 de dica de ferramenta esperado.
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 ligeiramente diferente de implementação.
Alguns plug-ins esperam que o HTML da dica de ferramenta esteja presente o tempo todo ao lado do elemento para o qual a dica de ferramenta é aplicável, enquanto outros criam uma tag "div" dinâmica, que aparece instantaneamente ao passar o mouse sobre o elemento.
Para nossa demonstração, vamos considerar a forma "jQuery Tools Tooltip" de implementação de dicas.
Aqui no URL - http://demo.guru99.com/test/tooltip.html você pode ver a demonstração onde, ao passar o mouse sobre "Baixe agora", obtemos uma dica de ferramenta avançada com uma imagem, fundo de texto explicativo, uma tabela e um link dentro dele que é clicável.
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". Mas, o código dentro da tag de script abaixo controla quando ele precisa ser pop-up.
Vamos tentar verificar apenas o texto do link na dica de ferramenta para nossa demonstração aqui.
Encontraremos primeiro o WebElement correspondente ao "Baixe agora". Em seguida, usando a API Interactions, passaremos para o elemento (passar o mouse). A seguir, encontraremos o WebElement que corresponde ao link dentro da dica de ferramenta exibida e o compararemos com o 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 = "http://demo.guru99.com/test/tooltip.html";System.setProperty ("webdriver.chrome.driver", "G: \\ chromedriver.exe");Driver WebDriver = novo ChromeDriver ();String expectTooltip = "O que há de novo no 3.2";driver.get (baseUrl);WebElement download = driver.findElement (By.xpath (".//*[@ id = 'download_now']"));Construtor de ações = novas ações (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 ("Título real da dica de ferramenta" + actualTooltip);if (actualTooltip.equals (expectedTooltip)) {System.out.println ("Caso de teste aprovado");}driver.close ();}}
Explicação do código
- Encontre o WebElement que corresponde ao elemento "baixar agora" que passaremos o mouse.
- Usando a API Interactions, passe o mouse em "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 "ForecastToolTip"
Resumo:
Neste tutorial, você aprendeu como acessar as dicas de ferramentas usando o driver da Web Selenium.
- As dicas de ferramentas são implementadas de maneiras diferentes -
- 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 dica de ferramenta, como JQuery, dicas de ferramenta CSS requerem a API Interactions para criar o efeito de passar o mouse
- API de interações avançadas do usuário
- 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 temos que passar o mouse sobre o elemento, em seguida, encontrar o elemento que corresponde à dica de ferramenta e obter seu texto ou outros valores para comparar com os valores esperados.