Actions class

vibssingh

How to test ToolTip in Selenium

HOME

In this tutorial, we will discuss the ToolTip and how to automate the ToolTip in Selenium.

What is ToolTip?

A ToolTip is a small, informational popup that appears when a user hovers over an element such as a button, image, or link. It provides additional context or information about the element. Tooltips are often implemented using the title attribute in HTML or through JavaScript and CSS for custom tooltips.

Tool Tips are implemented in different ways–

  • The basic implementation is based on HTML’s “title” attribute. getAttribute(title) gets the value of the tooltip.
  • Another tool tip implementation is using Action Class.

This tutorial explains the steps to automate the Custome ToolTip where no title attribute is present.

Let’s understand how one can automate the process of verifying tooltip in Selenium.

To test tooltips in Selenium, you generally follow these steps:

1. Locate the Element with Tooltip: Identify the element that contains the tooltip.
2. Hover Over the Element: Use Actions class to simulate mouse hover event.
3. Capture the Tooltip Text: Retrieve the text from the tooltip element.
4. Validate the Text: Assert that the tooltip text matches the expected value.

Implementation Steps

Locate the Tooltip Element

Identify the element that contains the tooltip. Here, the element has been found using By.id().

 WebElement elementWithTooltip = driver.findElement(By.id("toolTipButton"));

Hover Over the Element

Identify the element that contains the tooltip using Actions class to hover over the element.

Actions actions = new Actions(driver);
actions.moveToElement(elementWithTooltip).perform();

Retrieve Tooltip Text

Capturing the tooltip text typically found in the title attribute. But in this case, there is no title in page source, so I have created an xpath using contains(text()) to find the tooltip text.

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
WebElement tooltip = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[contains(text(),'You hovered over the Button')]")));

Validate the Text

Comparing the captured text with the expected tooltip text.

  if (expectedTooltipText.equals(actualTooltipText)) {
            System.out.println("Tooltip text is correct!");
        } else {
            System.out.println("Tooltip text is incorrect!");
 }

The complete program is shown below:

package com.example;

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.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.time.Duration;

public class TooltipTest_Demo {

    static WebDriver driver;
    static String expectedTooltipText = "You hovered over the Button";
    static String actualTooltipText;

    public static void main(String[] args) {

        ChromeOptions options = new ChromeOptions();
        driver = new ChromeDriver(options);
        driver.manage().window().maximize();

        driver.get("https://demoqa.com/tool-tips");

        // Locate the element with the tooltip
        WebElement elementWithTooltip = driver.findElement(By.id("toolTipButton"));

        // Perform hover action using Actions class
        Actions actions = new Actions(driver);
        actions.moveToElement(elementWithTooltip).perform();

        // Wait for the tooltip to be visible
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
        WebElement tooltip = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[contains(text(),'You hovered over the Button')]")));

        // Check the tooltip text
        actualTooltipText = tooltip.getText();
        System.out.println("Actual Tooltip Text: " + actualTooltipText);

        if (expectedTooltipText.equals(actualTooltipText)) {
            System.out.println("Tooltip text is correct!");
        } else {
            System.out.println("Tooltip text is incorrect!");
        }

        driver.quit();
    }

}

The output of the above program is

We are using WebDriverWait to wait for the hover text to appear.

Summary

  1. Custom ToolTip can be automated using Action class.
  2. moveToElement(element) of Actions class is used to mouse hover an element.
  3. Build() method of Actions class builds the sequence of user actions into an Action object.
  4. Perform() of Action class executes all the sequence of user actions at once.
vibssingh

Actions Class in Selenium WebDriver

HOME

In this tutorial, we will discuss about Actions class in Selenium – What is Actions class, How to use, when to use and some commonly used methods of Actions class in Selenium.
In Selenium, we have Webdriver Element Commands to handle web page interactions like entering text in a text box using sendkeys(), refresh a page using refresh(), etc. Similarly to interact with dropdown, we use Select class with methods like selectbyindex, selectbyvalue, etc.
Suppose, we want to perform complex interactions or keyboard and mouse related interactions like right click, Drag and Drop an element, etc. We need advance API methods to implement these interactions, so Action class appears in place.

What is the Actions class in Selenium?

The user-facing API for emulating complex user gestures. Use this class rather than using the Keyboard or Mouse directly.                       
Implements the builder pattern: Builds a Composite Action containing all actions specified by the method calls.

Difference between Action and Actions class in Selenium

Actions is a class that based on a builder design pattern.  This is a user-facing API for emulating complex user gestures.

Whereas Action is an Interface that represents a single user-interaction action. It contains one of the most widely used methods perform().

To use Action or Actions class, we need to import below mentioned packages:-

import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.interactions.Action;

How to get an instance of Actions class?

We can create an instance of Actions class simply, by passing current webDriver instance. Now, using the action instance, we can call any of the methods provided in Actions class.

WebDriver driver = new ChromeDriver();
Actions builder = new Actions(driver);

How to see all the supported methods by Actions class?

In order to see all the supported methods by Actions class, press control + space after, Action object (builder)

There is a large number of methods available in Actions class. The below screenshot represents some of those methods

Methods in Actions class of Selenium

There are many methods in this class, which can categorized into four main categories:

Keyboard Actions
Mouse Events
Pen Actions
Scroll wheel Actions

Different Methods for performing Keyboard Events:

1) keyDown(java.lang.CharSequence key) – Performs a modifier key press 

2) keyUp(java.lang.CharSequence key) – Performs a modifier key release

3) sendKeys(java.lang.CharSequence… keys) – Sends keys to the active element.

Different Methods for performing Mouse Events:

1) click() – Clicks at the current mouse location.

2) clickAndHold() – Clicks (without releasing) in the middle of the given element.

3) contextClick() – Performs a context-click at middle of the given element.

4) doubleClick() – Performs a double-click at the current mouse location.

5) back Click – There is no convenience method for this, it is just pressing and releasing mouse button 3.

6) forward Click –  pressing and releasing mouse button 4.

7) dragAndDrop(WebElement source, WebElement target) – A convenience method that performs click-and-hold at the location of the source element, moves to the location of the target element, then releases the mouse.

8) dragAndDropBy(WebElement source, int xOffset, int yOffset) – A convenience method that performs click-and-hold at the location of the source element, moves by a given offset, then releases the mouse.

9) moveByOffset(int xOffset, int yOffset) – Moves the mouse from its current position or (0,0) by the given offset.

10) MoveToElement(WebElement target) – Moves the mouse to the middle of the element.

Different Methods for performing Pen Events:

A Pen is a type of pointer input that has most of the same behavior as a mouse, but can also have event properties unique to a stylus. Additionally, while a mouse has 5 buttons, a pen has 3 equivalent button states:

  1. Using Pen
  2. Adding Pointer Event Attributes

Different Methods for performing Scroll Wheel Events:

1.Scroll to element – the actions class does not automatically scroll the target element into view, so this method will need to be used if elements are not already inside the viewport.

2. Scroll by given amount – Pass in an delta x and a delta y value for how much to scroll in the right and down directions. Negative values represent left and up, respectively.

3. Scroll from an element by a given amount – This scenario is effectively a combination of the above two methods.

4. Scroll from an element with an offset – This scenario is used when you need to scroll only a portion of the screen, and it is outside the viewport. Or is inside the viewport and the portion of the screen that must be scrolled is a known offset away from a specific element.

5. Scroll from a offset of origin (element) by given amount – The final scenario is used when you need to scroll only a portion of the screen, and it is already inside the viewport.

We are done! Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!!

vibssingh

Drag and Drop action in Selenium WebDriver

HOME

In the previous tutorial, we discussed what is Actions class in Selenium WebDriver. In this tutorial, we will discuss the Drag and Drop method of Selenium WebDriver.

What is Drag and Drop Action?

This is an action performed with a mouse when a user moves (drags) a web element and then places (drops) it into an alternate area.

Below are the methods the Actions class provides for Drag-Drop action:
1. dragAndDrop(WebElementsource, WebElement target)
2. dragAndDropBy(WebElementsource, int xOffset, int yOffset)

1. dragAndDrop(WebElementsource, WebElement target)

A convenience method performs click-and-hold at the location of the source element, moves to the location of the target element, and then releases the mouse.

As you can see, the dragAndDrop(WebElement source, WebElement target) method has two arguments to pass. One is a source web element and another is a target web element.  This source web element is any web element that needs to drag. Target web element is any web element on which a dragged object needs to be placed or dropped.
Now, when we have got the actions class object and the element as well, just invoke perform the ()method for the drag & drop:

 actions.dragAndDrop(source,target).perform();

Let us see this with the help of an example.

import java.time.Duration;
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.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Actions;

public class dragAndDrop_Demo {
	
	protected static WebDriver driver;

	public static void main(String[] args) {
	  
       // Create a new instance of the Chrome driver
		ChromeOptions options = new ChromeOptions();
	    options.setImplicitWaitTimeout(Duration.ofSeconds(10));
	    options.addArguments("start-maximized");
	    driver = new ChromeDriver(options);

        // Launch the URL
	    driver.get("https://www.selenium.dev/selenium/web/mouse_interaction.html");

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

        System.out.println("Text appeared :" + driver.findElement(By.id("drop-status")).getText());
        driver.close();
	
    }   
}

Image before performing Drag and Drop operation

Image after performing Drag and Drop operation

Drag and Drop using clickAndHold, moveToElement and release Method


1. Hold the source
2. Move the element
3. Release the element

The different methods of Action class we will be using here for Drag and Drop in Selenium:
• clickAndHold(WebElement element) – Clicks a web element at the middle(without releasing).
• moveToElement(WebElement element) – Moves the mouse pointer to the middle of the web element without clicking.
• release(WebElement element) – Releases the left click (which is in the pressed state).
• build() – Generates a composite action

Let us understand the use of these methods in a Selenium program

import java.time.Duration;
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.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Actions;

public class clickAndHold_Demo {
	
	protected static WebDriver driver;

	public static void main(String[] args) {

		 // Create a new instance of the Chrome driver
		ChromeOptions options = new ChromeOptions();
	    options.setImplicitWaitTimeout(Duration.ofSeconds(10));
	    options.addArguments("start-maximized");
	    driver = new ChromeDriver(options);

        // Launch the URL
	    driver.get("https://www.selenium.dev/selenium/web/mouse_interaction.html");

	    WebElement clickable = driver.findElement(By.id("clickable"));
        new Actions(driver)
                .clickAndHold(clickable)
                .perform();
        
        System.out.println("Text appeared :" + driver.findElement(By.id("click-status")).getText());

	}

}

The output of the above program is

Drag and Drop using dragAndDropBy and offset method 

A convenience method that performs click-and-hold at the location of the source element, moves by a given offset, and then releases the mouse.
• Using the dragAndDropBy Method, we drop WebElement on a particular WebPage offset location.

Below is a Selenium program that shows the use of the dragAndDropBy method.

import java.time.Duration;
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.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Actions;

public class dragAndDropBy_Demo {

	private static WebDriver driver;
	
	public static void main(String[] args) {

		 // Create a new instance of the Chrome driver
		ChromeOptions options = new ChromeOptions();
	    options.setImplicitWaitTimeout(Duration.ofSeconds(30));
	    options.addArguments("start-maximized");
	    driver = new ChromeDriver(options);

        // Launch the URL
	    driver.get("https://www.selenium.dev/selenium/web/mouse_interaction.html");

	    WebElement draggable = driver.findElement(By.id("draggable"));
     
        new Actions(driver)
        .dragAndDropBy(draggable, 180,10)
        .perform();

        driver.close();
	}

}

The output of the above program is

Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!! Cheers!!