Evento Mouse Click y Teclado (Keyboard): Action Class en Selenium Webdriver

En este tutorial, aprenderemos a manejar eventos de teclado y mouse en Selenium Webdriver para acciones un poco más complejas que un simple clic en un elemento, así que esto es muy útil porque en ocasiones donde nuestra aplicación web es bastante dinámica, tiene efectos que necesitamos validar o efectos que hacen parte del paso a paso de un flujo de prueba.

Manejo de eventos de teclado (Keyboard) y mouse

El manejo de eventos especiales de teclado y mouse se realiza mediante la API de Interacciones de usuario avanzadas. Contiene las acciones y las clases de acción que se necesitan para ejecutar estos eventos. Los siguientes son los eventos de teclado y mouse más utilizados que proporciona la clase Actions.

MetodoDescripción
clickAndHold()Clics (sin soltar) en la ubicación actual del mouse.
contextClick()Realiza un clic contextual en la ubicación actual del mouse. (Acción del mouse con el botón derecho)
doubleClick()Realiza un doble clic en la ubicación actual del mouse.
dragAndDrop(source, target)Hace clic y mantiene presionado en la ubicación del elemento source (fuente), se mueve a la ubicación del elemento target (objetivo) y luego suelta el mouse.
dragAndDropBy(source, x-offset, y-offset)Realiza un clic y mantén presionado en la ubicación del elemento fuente, se mueve por un desplazamiento determinado y luego suelta el mouse.
keyDown(modifier_key)Realiza una pulsación de tecla modificadora. No suelta la tecla modificadora; las interacciones posteriores pueden suponer que se mantiene presionada.
Parametros: (Keys.ALT, Keys.SHIFT, o Keys.CONTROL)
keyUp(modifier _key)Realiza la liberación de la tecla. (Soltar la tecla)
Parametros: (Keys.ALT, Keys.SHIFT, o Keys.CONTROL)
moveByOffset(x-offset, y-offset)Mueve el mouse desde su posición actual o (0,0) hasta el desplazamiento dado.
Parametros:
x-offset – desplazamiento horizontal. Un valor negativo significa mover el mouse hacia la izquierda.
y-offset – desplazamiento vertical. Un valor negativo significa mover el mouse hacia abajo.
moveToElement(toElement)Mueve el mouse a la mitad del elemento.
Parametro: toElement – elemento al que desea moverse.
release()Libera el clic izquierdo del mouse en las últimas coordenadas conocidas del mouse.
sendKeys(onElement, charsequence)Envía una secuencia de teclas al elemento especificado en el navegador.
Parametros:
onElement – elemento que recibirá las pulsaciones de teclas, generalmente un campo de texto

charsequence – cualquier valor de cadena que represente la secuencia de pulsaciones de teclas que se enviarán.

Usando la clase Actions de Selenium

Por ejemplo, usaremos el método moveToElement() para pasar el mouse sobre un elemento de la pagina php travels. Vea el ejemplo a continuación.

Move to element – Action Class Selenium

El elemento de la izquierda se muestra con un color verde cuando NO está el puntero encima de este elemento, por lo tanto, al pasar el puntero por el elemento, éste hace el efecto «hover» y cambia a color naranja.

Paso 1. Importe la clase Actions.

import org.openqa.selenium.interactions.Actions;

Paso 2. Instanciar un objeto de la clase Actions.

Actions actions = new Actions(driver);

Paso 3. Instanciar una acción usando el objeto Actions del paso 2.

actions.moveToElement(btnCheckPricing)
                .build()
                .perform();

Lo más importante:

  • El método build() es el método utilizado para que todas las acciones enumeradas se compilen en un solo paso.
  • Utilice el método perform() para ejecutar las acciones codificadas en el objeto Actions.

A continuación se muestra el código completo de WebDriver que se empleo para mover el mouse sobre el botón «Check pricing» y así activar su efecto hover (Cambio de color).

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class ExampleActionClass {

    public static void main(String [] args){
        System.setProperty("webdriver.chrome.driver","src/main/resources/chromedriver");
        WebDriver driver = new ChromeDriver();
        Actions actions = new Actions(driver);
        String urlBase = "https://phptravels.com/demo/";
        driver.get(urlBase);

        WebElement btnCheckPricing = driver
                .findElement(By.xpath("(//a[@href='https://phptravels.com/order/'])[2]"));

        actions.moveToElement(btnCheckPricing)
                .build()
                .perform();

        driver.close();
    }
}

Al ejecutar el código anterior veremos claramente como se cambia el color de fondo del botón «Check Pricing» de naranja a verde al pasar el puntero del mouse por el botón haciendo uso de la clase Actions de selenium webdriver

Construyendo una serie de acciones múltiples

Puede crear una serie de acciones utilizando la clase Actions. Solo recuerde cerrar la serie con el método build() y luego perform() para ejecutarlas. Considere el código de muestra a continuación.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class TestActionClass {

    public static void main(String [] args){
        System.setProperty("webdriver.chrome.driver","src/main/resources/chromedriver");
        WebDriver driver = new ChromeDriver();
        Actions actions = new Actions(driver);
        String urlBase = "https://phptravels.com/demo/";
        driver.get(urlBase);
        WebElement btnFeatures = driver.findElement(By.xpath("//button[@aria-describedby='Popover1']"));
        WebElement btnWebAppFeatures = driver.findElement(By.xpath("//button[@aria-describedby='Popover2']"));
        WebElement btnCarsModule = driver.findElement(By.xpath("(//a[text()='Cars Module'])[1]"));

        actions.moveToElement(btnFeatures)
                .moveToElement(btnWebAppFeatures)
                .moveToElement(btnCarsModule)
                .pause(4000)
                .click()
                .build()
                .perform();

        driver.close();
    }
}

Con el código anterior logramos navegar por los menú desplegables, hacemos una pausa en el ultimo item para que observemos el funcionamiento realizado en el menú desplegable y luego damos clic en el item «Cars Module».
La siguiente imagen ilustra las acciones realizadas por selenium webdriver usando la clase Actions.

Resumen

Compartir artículo

Leave Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.