Cómo verificar la información sobre herramientas en Selenium

Información sobre herramientas en Selenium

A Información sobre herramientas en Selenium Es un texto breve que aparece al pasar el cursor sobre un objeto en una página web. El objeto puede ser un enlace, una imagen, un botón o un área de texto. El texto emergente suele proporcionar más información sobre el elemento sobre el que se encuentra el cursor.

Las sugerencias emergentes se implementaban tradicionalmente como un atributo "title" en un elemento. El valor de este atributo se mostraba como una sugerencia emergente al pasar el ratón por encima. Se trataba de un texto estático que proporcionaba información sobre el elemento sin ningún estilo.

Hoy en día, hay muchos complementos disponibles para la implementación de información sobre herramientas. Se crean información sobre herramientas avanzada con estilos, renderizado, imágenes y enlaces utilizando JavaComplementos de script o jQuery, o con información sobre herramientas solo con CSS.

• Para acceder o verificar las sugerencias de herramientas estáticas implementadas a través del atributo HTML “title”, utilice el getAttribute("title") Método en el elemento web. El valor devuelto (el texto de la información sobre herramientas) se compara con un valor esperado para su verificación.
• Para otras implementaciones de información sobre herramientas, utilice la "API de interacciones avanzadas con el usuario" proporcionada por WebDriver para crear el efecto de desplazamiento del ratón y, a continuación, recuperar la información sobre herramientas del elemento.

Un resumen de la API de interacciones avanzadas de usuario

La API de interacciones avanzadas del usuario expone acciones del usuario como arrastrar y soltar, pasar el cursor por encima, seleccionar varios elementos, pulsar y soltar teclas, y otras acciones de teclado o ratón en una página web.

Puedes referirte a esto Referencia oficial de la clase Actions para obtener más detalles sobre la API.

Antes de saltarping Analicemos los escenarios y veamos las clases y los métodos que necesitamos para mover un elemento deslizante con un desplazamiento.

Paso 1) Para utilizar la API, importe los siguientes paquetes y clases:

Paso 2) Crea un objeto de la clase "Acciones" y construye la secuencia de acciones del usuario. La clase Acciones crea acciones encadenadas como moveToElement() y dragAndDrop(). El objeto controlador se pasa como parámetro a su constructor.

Paso 3) Crea un objeto Action usando el método build() de la clase “Actions”. Llama al método perform() para ejecutar cada acción en cola en el constructor.

Hemos visto cómo usar algunos de los métodos de acción de usuario que proporciona la API: clickAndHold(element), moveByOffset(10, 0) y release(). La API ofrece muchos más.

Implementación de información sobre herramientas vs. Selenium Enfoque de verificación

Cómo verificar (manejar) la información sobre herramientas en Selenium

Analicemos cómo acceder y verificar las sugerencias emergentes con dos escenarios comunes:

• Escenario 1: La información sobre herramientas se implementa utilizando el atributo "título".
• Escenario 2: La información sobre herramientas se implementa mediante un complemento de jQuery.

Escenario 1: Atributo HTML “title”

Para este caso, utilizamos el sitio de ejemplo https://demo.guru99.com/test/social-icon.html y verifique la información emergente del icono de “github” en la parte superior derecha de la página.

Primero localizamos el elemento, luego leemos su atributo "título" y lo comparamos con el texto de la información sobre herramientas esperado.

Dado que la información sobre herramientas se encuentra en el atributo "title", ni siquiera automatizamos el evento de pasar el ratón por encima; simplemente recuperamos el valor del atributo con el método getAttribute().

Aquí está el 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();
    }
}

Explicación del código:

1. Busque el WebElement que representa el icono "github".
2. Lee su atributo “título” con el método getAttribute().
3. Comprometer el valor con el texto de información sobre herramientas esperado.

Selenium 4 consejo: Utilice getDomAttribute("title") para el atributo HTML literal, y dejar Selenium El administrador resuelve el controlador en lugar de codificarlo manualmente. chromedriver.exe.

Escenario 2: Complemento jQuery

Muchos complementos de jQuery implementan información sobre herramientas, y cada uno se muestra de forma ligeramente diferente.

Algunos complementos mantienen el marcado de la información sobre herramientas junto al elemento activador en todo momento, mientras que otros crean una etiqueta "div" dinámicamente cuando el cursor entra en el elemento activador.

Para esta demostración, utilizamos el estilo "jQuery Tools Tooltip".

Abra https://demo.guru99.com/test/tooltip.htmlAl pasar el cursor sobre "Descargar ahora", se muestra una información emergente avanzada con una imagen, un fondo destacado, una pequeña tabla y un enlace en el que se puede hacer clic.

Si examinas el código fuente, verás que el div que representa la información emergente ya está ubicado junto al enlace "Descargar ahora". La etiqueta de script que aparece a continuación controla cuándo se muestra.

Ahora verificamos el texto del enlace que se muestra dentro de la información emergente.

Primero, localiza el elemento web "Descargar ahora". Usa la API de interacciones para moverte al elemento (pasar el ratón por encima). A continuación, encuentra el elemento web que se corresponde con el enlace dentro de la información sobre herramientas que se muestra y verifica que su texto coincida con el valor esperado.

Aquí está el 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 Explicación:

1. Localiza el elemento web que se corresponde con el elemento "Descargar ahora" sobre el que pasarás el ratón.
2. Utilice la API de interacciones para colocar el cursor sobre "Descargar ahora".
3. Una vez que la información sobre herramientas sea visible, localice el elemento web que representa el enlace dentro de la información sobre herramientas (la etiqueta "a").
4. Lea el texto de la información sobre herramientas con getText() y compararlo con el valor esperado almacenado en expectedTooltip.

Preguntas Frecuentes