Advanced Interactions with WebDriver

As modern web applications evolve, they become increasingly dynamic and interactive. Testing such applications requires sophisticated techniques to simulate complex user behaviors. Selenium WebDriver, a powerful tool for automating browsers, includes a class called Actions that enables testing advanced user interactions.

These include:

• Mouse Movements
• Keyboard Shortcuts
• Drag-And-Drop actions, and more.

Why Advanced Interactions are Necessary

In traditional web automation, simpler tasks like clicking buttons or typing in text fields are straightforward. However, modern applications often require simulating more complex user actions. Advanced interactions in Selenium WebDriver allow testers to handle these complexities, such as:

• Hover over elements to reveal dropdown menus or tooltips.
• Drag-and-drop actions to move elements on the page.
• Performing keyboard shortcuts like Ctrl+C (copy), Ctrl+V (paste).
• Selecting multiple elements using modifier keys like Shift or Ctrl.

The Actions Class in Selenium simplifies these tasks, providing methods to perform complex interactions easily.

Key Features of the Actions Class

The Actions Class belongs to the org.openqa.selenium.interactions package and provides a variety of methods for simulating mouse and keyboard actions. These actions can be chained together to execute multiple operations in sequence.

1. Mouse Operations in Actions Class

1.1 Hover Over Elements (moveToElement)

This method moves the mouse pointer over a specified element on the page.

Actions actions = new Actions(driver);
WebElement menu = driver.findElement(By.id("menu"));
actions.moveToElement(menu).perform();

1.2 Right Click (Context Click)

Perform a right-click (context click) on a specified element.

WebElement element = driver.findElement(By.id("right-click-element"));
actions.contextClick(element).perform();

1.3 Drag and Drop

Move an element from one location to another on the page.

WebElement source = driver.findElement(By.id("source"));
WebElement target = driver.findElement(By.id("target"));
actions.dragAndDrop(source, target).perform();

1.4 Click and Hold

Press and hold a mouse button down on an element (useful for interacting with sliders).

WebElement slider = driver.findElement(By.id("slider"));
actions.clickAndHold(slider).perform();

2. Keyboard Operations in Actions Class

2.1 Send Keys

This method simulates pressing a specific key (or a sequence of keys) on the keyboard.

WebElement inputField = driver.findElement(By.id("input"));
actions.sendKeys(inputField, "Hello World").perform();

2.2 Key Down and Key Up

These methods simulate pressing (keyDown) and releasing (keyUp) modifier keys like Ctrl, Shift, and Alt, which are useful for performing keyboard shortcuts.

actions.keyDown(Keys.CONTROL).sendKeys("a").sendKeys("c").keyUp(Keys.CONTROL).perform();

Practical Examples of Advanced Interactions

1. Hovering Over Elements

Hovering over elements is a common interaction, especially when dealing with dropdown menus or revealing hidden elements on hover.

package adAdvancedInteraction;

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.Test;

import actions.BaseTest;

public class ActionsTest extends BaseTest{
	String URL = "https://bonigarcia.dev/selenium-webdriver-java/mouse-over.html";

    @Test
    public void testMouseHover() {
        driver.get(URL);
        driver.manage().window().maximize();

        Actions actions = new Actions(driver);
        WebElement compassImage = driver.findElement(By.xpath("//img[@src='img/compass.png']"));
        actions.moveToElement(compassImage).perform();

        WebElement caption = driver.findElement(By.xpath("//p[text()='Compass']"));
        assert caption.getText().equals("Compass");
    }
}

Output:

2. Drag and Drop

Drag-and-drop operations are frequently used in applications where users can rearrange elements or upload files.

package adAdvancedInteraction;

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.Test;

import actions.BaseTest;

public class ActionsTest extends BaseTest{
	String URL1 = "https://bonigarcia.dev/selenium-webdriver-java/drag-and-drop.html";

     @Test
    public void testDragAndDrop() {
        driver.get(URL1);
        driver.manage().window().maximize();

        Actions actions = new Actions(driver);
        WebElement source = driver.findElement(By.id("draggable"));
        WebElement target = driver.findElement(By.id("target"));
        actions.dragAndDrop(source, target).perform();

        // Verifying the drop
        assert source.getLocation().equals(target.getLocation());
    }

}

Output:

3. Copy and Paste Using Keyboard Shortcuts

Automating keyboard shortcuts like copy and paste is a common task when dealing with forms and text fields.

 @Test
    public void testCopyAndPaste() {
        driver.get("https://bonigarcia.dev/selenium-webdriver-java/web-form.html");
        driver.manage().window().maximize();
        Actions actions = new Actions(driver);

        WebElement textInput = driver.findElement(By.id("my-text-id"));
        WebElement textArea = driver.findElement(By.name("my-textarea"));

        actions.sendKeys(textInput, "Hello Tester").keyDown(Keys.CONTROL)
                .sendKeys(textInput, "a").sendKeys(textInput, "c")
                .sendKeys(textArea, "v").keyUp(Keys.CONTROL).build().perform();
        
    }

Output:

4. Drawing on Canvas (Click and Hold)

Using clickAndHold() and moveByOffset(), you can simulate drawing shapes or patterns on canvas elements.

@Test
    public void testClickAndHoldWithDelay() throws InterruptedException {
        driver.get("https://bonigarcia.dev/selenium-webdriver-java/draw-in-canvas.html");
        driver.manage().window().maximize();
        Actions actions = new Actions(driver);

        WebElement canvas = driver.findElement(By.id("my-canvas"));
        actions.moveToElement(canvas).clickAndHold();

        int numPoints = 10;
        int radius = 8;

        for (int i = 0; i <= numPoints; i++) {
            double angle = Math.toRadians((double) (360 * i) / numPoints);
            double x = Math.sin(angle) * radius;
            double y = Math.cos(angle) * radius;

            actions.moveByOffset((int) x, (int) y).perform();
            Thread.sleep(500); // Pause for visibility
        }

        actions.release(canvas).build().perform();
    }

Output:

Best Practices for Using the Actions Class

1. Use perform() at the end: Always ensure to call perform() after chaining actions to execute them.
2. Avoid Hardcoding Locators: Use dynamic locators that will work reliably across different test environments.
3. Utilize Explicit Waits: Use WebDriverWait to ensure that elements are visible and interactable before performing actions, avoiding unnecessary delays.
4. Error Handling: Use try-catch blocks to handle potential exceptions, such as stale element references or timeout errors.
5. Minimize Complex Chains: While chaining actions is powerful, keep your chains manageable to maintain test readability and debugging ease.