Como verificar a dica de ferramenta em Selenium

Dica em Selenium

A Dica em Selenium É um pequeno texto que aparece quando o cursor do mouse passa sobre um objeto em uma página da web. O objeto pode ser um link, uma imagem, um botão ou uma área de texto. O texto da dica de ferramenta geralmente fornece mais informações sobre o elemento sob o cursor.

Tradicionalmente, as dicas de ferramentas eram implementadas como um atributo "título" em um elemento. O valor desse atributo era exibido como uma dica de ferramenta ao passar o mouse sobre o elemento. Trata-se de um texto estático que fornece informações sobre o elemento, sem qualquer formatação.

Atualmente, muitos plugins estão disponíveis para a implementação de dicas de ferramentas. Dicas de ferramentas avançadas com estilos, renderização, imagens e links são criadas usando... JavaPlugins de script ou jQuery, ou com dicas de ferramentas usando apenas CSS.

• Para acessar ou verificar dicas de ferramentas estáticas implementadas por meio do atributo "title" do HTML, use o getAttribute("title") Método aplicado ao WebElement. O valor retornado (o texto da dica de ferramenta) é comparado com um valor esperado para verificação.
• Para outras implementações de dicas de ferramentas, use a "API de Interações Avançadas do Usuário" fornecida pelo WebDriver para criar o efeito de passar o mouse sobre o elemento e, em seguida, recuperar a dica de ferramenta correspondente.

Um resumo da API de interações avançadas com o usuário

A API de Interações Avançadas do Usuário expõe ações do usuário como arrastar e soltar, passar o cursor sobre um elemento, seleção múltipla, pressionar e soltar teclas e outras ações de teclado ou mouse em uma página da web.

Você pode se referir a isso referência oficial da classe Actions para obter mais detalhes sobre a API.

Antes de pularping Em termos de cenários, vamos analisar as classes e os métodos necessários para mover um elemento deslizante por um determinado deslocamento.

Passo 1) Para usar a API, importe os seguintes pacotes e classes:

Passo 2) Crie um objeto da classe “Actions” e construa a sequência de ações do usuário. A classe Actions constrói ações encadeadas, como moveToElement() e dragAndDrop(). O objeto de controle é passado como parâmetro para o seu construtor.

Passo 3) Crie um objeto Action usando o método build() da classe “Actions”. Chame o método perform() para executar todas as ações enfileiradas no construtor.

Já vimos como usar alguns dos métodos de ação do usuário fornecidos pela API: clickAndHold(element), moveByOffset(10, 0) e release(). A API expõe muitos outros.

Implementação de dicas de ferramentas vs. Selenium Abordagem de verificação

Como verificar (manipular) a dica de ferramenta em Selenium

Vamos analisar como acessar e verificar dicas de ferramentas em dois cenários comuns:

• 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 "título" em HTML

Neste caso, utilizamos o site de exemplo. https://demo.guru99.com/test/social-icon.html e verifique a dica de ferramenta do ícone “github” no canto superior direito da página.

Primeiro localizamos o elemento, depois lemos seu atributo "título" e o comparamos com o texto esperado da dica de ferramenta.

Como a dica de ferramenta está no atributo "título", nem sequer automatizamos o evento de passar o mouse sobre ela; simplesmente recuperamos o valor do atributo com 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]"));

        // Read the "title" attribute value of the Github icon
        String actualTooltip = github.getAttribute("title");

        // Assert that the tooltip value matches the expected one
        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:

1. Encontre o WebElement que representa o ícone “github”.
2. Leia o atributo “title” com o método getAttribute().
3. Compare o valor com o texto da dica de ferramenta esperado.

Selenium 4 dica: Prefere getDomAttribute("title") para o atributo HTML literal, e deixe Selenium O gerenciador resolve o problema do driver em vez de codificá-lo diretamente no código. chromedriver.exe.

Cenário 2: Plugin jQuery

Muitos plugins jQuery implementam dicas de ferramentas, e cada um renderiza de forma ligeiramente diferente.

Alguns plugins mantêm o código HTML da dica de ferramenta sempre ao lado do elemento que aciona o gatilho, enquanto outros criam uma tag "div" dinamicamente quando o cursor entra no gatilho.

Para esta demonstração, usaremos o estilo “jQuery Tools Tooltip”.

Abra https://demo.guru99.com/test/tooltip.htmlAo passar o cursor sobre "Baixar agora", uma dica de ferramenta avançada é exibida com uma imagem, um fundo de destaque, uma pequena tabela e um link clicável.

Se você inspecionar o código-fonte, verá que a div que representa a dica de ferramenta já está posicionada ao lado do link "Baixar agora". A tag de script abaixo controla quando ela aparece.

Agora vamos verificar o texto do link exibido na dica de ferramenta.

Primeiro, localize o WebElement correspondente a “Baixar agora”. Use a API de Interações para navegar até o elemento (ao passar o mouse sobre ele). Em seguida, encontre o WebElement que corresponde ao link dentro da dica de ferramenta exibida e verifique se o texto está de acordo com o valor esperado.

Aqui está o código:

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);

        // Hover over the "Download now" link to reveal the tooltip
        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();
    }
}

Code Explicação:

1. Localize o elemento da Web correspondente ao elemento “Baixar agora” sobre o qual você passará o cursor do mouse.
2. Use a API de Interações para posicionar o cursor sobre “Baixar agora”.
3. Assim que a dica de ferramenta estiver visível, localize o elemento da Web que representa o link dentro da dica de ferramenta (a tag “a”).
4. Leia o texto da dica de ferramenta com getText() e compare-o com o valor esperado armazenado em expectedTooltip.

Perguntas Frequentes