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

Información sobre herramientas en selenio

A Información sobre herramientas en selenio Es un texto que aparece cuando el mouse se coloca sobre un objeto en una página web. El objeto puede ser un enlace, una imagen, un botón, un área de texto, etc. El texto de información sobre herramientas a menudo brinda más información sobre el objeto sobre el cual el usuario pasa el cursor del mouse.

La información sobre herramientas se implementaba tradicionalmente como un atributo de "título" de un elemento. El valor de este atributo se mostró como información sobre herramientas al pasar el mouse. Este es un texto estático que brinda información del elemento sin estilo.

Ahora, hay muchos complementos disponibles para la implementación de "consejos sobre herramientas". Se están implementando información sobre herramientas avanzada con estilo, renderizado, imágenes y enlaces mediante complementos de JavaScript/JQuery o información sobre herramientas CSS.

  • Para acceder o verificar la información sobre herramientas estática que se implementa utilizando el atributo "título" HTML, simplemente podemos usar el método getAttribute ("título") de WebElement. El valor devuelto por este método (que es el texto de información sobre herramientas) se compara con un valor esperado para su verificación.
  • Para otras formas de implementaciones de información sobre herramientas, tendremos que utilizar la "API de interacciones de usuario avanzadas" proporcionada por el controlador web para crear el efecto de desplazamiento del mouse y luego recuperar la información sobre herramientas para el elemento.

Un resumen de la API de interacciones avanzadas de usuario

La API de interacciones avanzadas de usuario proporciona la API para acciones del usuario como arrastrar y soltar, desplazarse por el cursor, selección múltiple, presionar y soltar teclas y otras acciones usando el teclado o el mouse en una página web.

Puedes referir esto liga para más details en la API.

Aquí, veamos cómo usar un par de clases y métodos que necesitaríamos para mover un elemento deslizante en un desplazamiento.

Paso 1) Para utilizar la API, siga los siguientes pasoswing Es necesario importar paquetes/clases:

API de interacciones de usuario avanzadas

Paso 2) Cree un objeto de clase "Acciones" y cree la Secuencia de acciones del usuario. La clase de acciones se utiliza para construir la secuencia de acciones del usuario como moveToElement(), dragAndDrop(), etc. La API proporciona varios métodos relacionados con las acciones del usuario.

El objeto controlador se proporciona como parámetro para su constructor.

API de interacciones de usuario avanzadas

Paso 3) Cree un objeto de acción utilizando el método build() de la clase "Acciones". Llame al método perform() para ejecutar todas las acciones creadas por el objeto Acciones (constructor aquí).

API de interacciones de usuario avanzadas

Hemos visto cómo utilizar algunos de los métodos de acciones de usuario proporcionados por la API: clickAndHold(element), moveByOffset(10,0), release(). La API proporciona muchos de estos métodos.

Para obtener más detalles sobre cómo diseñar y realizar los esfuerzos de seguimiento y evaluación, referirse al liga para más información.

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

Veamos la demostración de cómo acceder y verificar la información sobre herramientas en el escenario simple.

  • 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 jQuery.

Escenario 1: atributo HTML "título"

Para este caso, tomemos el sitio de ejemplo: https://demo.guru99.com/test/social-icon.html.

Intentaremos verificar la información sobre herramientas del ícono "github" en la parte superior derecha de la página.

Atributo HTML 'título'

Para hacerlo, primero encontraremos el elemento y obtendremos su atributo 'título' y lo verificaremos con el texto de información sobre herramientas esperado.

Dado que asumimos que la información sobre herramientas está en el atributo "título", ni siquiera estamos automatizando el efecto de desplazamiento del mouse, sino que simplemente recuperamos el valor del atributo usando el método "getAttribute()".

Atributo HTML 'título'

Aqui esta el codigo

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

Explicación del código

  1. Busque el WebElement que representa el icono "github".
  2. Obtenga su atributo "título" usando el método getAttribute().
  3. Afirme el valor frente al valor esperado de información sobre herramientas.

Escenario 2: complemento JQuery

Hay muchos complementos de JQuery disponibles para implementar la información sobre herramientas, y cada uno tiene una forma de implementación ligeramente diferente.

Algunos complementos esperan que el HTML de información sobre herramientas esté presente todo el tiempo junto al elemento al que se aplica la información sobre herramientas, mientras que otros crean una etiqueta dinámica "div", que aparece sobre la marcha al pasar el cursor sobre el elemento.

Para nuestra demostración, consideremos la forma de implementación de información sobre herramientas "jQuery Tools Tooltip".

Aquí en la URL – https://demo.guru99.com/test/tooltip.html Puede ver la demostración donde, al pasar el mouse sobre "Descargar ahora", obtenemos información sobre herramientas avanzada con una imagen, un fondo de llamada, una tabla y un enlace dentro en el que se puede hacer clic.

Complemento JQuery

Si observa la fuente a continuación, puede ver que la etiqueta div que representa la información sobre herramientas siempre está presente junto a la etiqueta del enlace "Descargar ahora". Pero el código dentro de la etiqueta de secuencia de comandos a continuación controla cuándo es necesario que aparezca una ventana emergente.

Complemento JQuery

Intentemos verificar aquí solo el texto del enlace en la información sobre herramientas para nuestra demostración.

Primero encontraremos el WebElement correspondiente al “Descargar ahora”. Luego, usando la API de Interacciones, nos desplazaremos al elemento (al pasar el mouse por encima). A continuación, encontraremos el WebElement que corresponde al enlace dentro de la información sobre herramientas mostrada y lo verificaremos con el texto esperado.

Complemento JQuery

Aqui esta el codigo

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

Explicación del código

  1. Busque el WebElement que corresponde al elemento "descargar ahora" sobre el que pasaremos el mouse.
  2. Usando la API de Interacciones, coloque el mouse sobre "Descargar ahora".
  3. Suponiendo que se muestra la información sobre herramientas, busque el elemento Web que corresponde al enlace dentro de la información sobre herramientas, es decir, la etiqueta "a".
  4. Verifique el texto de información sobre herramientas del enlace recuperado usando getText() con un valor esperado que hemos almacenado en "expectedToolTip"

Resumen

En este tutorial, ha aprendido cómo acceder a la información sobre herramientas utilizando el controlador web Selenium.

La información sobre herramientas se implementa de diferentes maneras:

  • La implementación básica se basa en el atributo "título" de HTML. getAttribute(title) obtiene el valor de la información sobre herramientas.
  • Otras implementaciones de información sobre herramientas como JQuery y CSS requieren API de interacciones para crear el efecto de desplazamiento del mouse.

API de interacciones de usuario avanzadas–

  • moveToElement(elemento) de la clase Acciones se utiliza para pasar el mouse sobre un elemento.
  • El método Build() de la clase Acciones construye la secuencia de acciones del usuario en un objeto Acción.
  • Perform() de la clase Action ejecuta toda la secuencia de acciones del usuario a la vez.

Para verificar una información sobre herramientas, primero debemos pasar el mouse sobre el elemento, luego buscar el elemento que corresponde a la información sobre herramientas y obtener su texto u otros valores para verificar con los valores esperados.