Drag and Drop - (Selenium WebDriver)

Drag and drop is a common action that a user performs on a web page. It is used to move an object from one position to another position on a web page. Selenium WebDriver allows you to perform drag and drop operations on web pages with ease.

Syntax

The syntax to perform drag and drop in Selenium WebDriver is as follows:

from selenium.webdriver import ActionChains

# create an object of ActionChains class
action = ActionChains(driver)

# perform drag and drop
source_element = driver.find_element_by_id("source")
target_element = driver.find_element_by_id("target")
action.drag_and_drop(source_element, target_element).perform()

Example

Let's consider an example of performing drag and drop in Selenium WebDriver. Suppose we have two elements with the ids source and target, and we want to perform a drag and drop operation between them.

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

# create an instance of Firefox WebDriver
driver = webdriver.Firefox()

# navigate to the web page with drag and drop elements
driver.get("https://jqueryui.com/droppable/")
driver.switch_to.frame(0)

# create an object of ActionChains class
action = ActionChains(driver)

# perform drag and drop
source_element = driver.find_element_by_id("draggable")
target_element = driver.find_element_by_id("droppable")
action.drag_and_drop(source_element, target_element).perform()

Output

In the above example, the drag and drop operation will be performed on the designated web page element, and the output of the operation will be reflected on the web page.

Explanation

The code example first opens a Firefox browser and navigates to a web page with drag and drop elements. In this example, we use the 'droppable' element from the JQueryUI library. To interact with web elements, Selenium requires the user to switch to the frame containing the elements.

In the next step, we create an object of the ActionChains class, which is a Selenium class used to perform user actions on web elements.

Finally, we perform the drag and drop operation by calling the drag_and_drop method on the action object. We pass the source and target elements as arguments to this method.

Use

Drag and drop is a commonly used user interaction on web pages. It can be used for various scenarios, such as reordering items on a web page or moving items into different containers.

Selenium WebDriver allows you to perform drag and drop operations programmatically, making it an important feature for automated testing.

Important Points

• When performing a drag and drop operation, it is important to ensure that the elements being dragged and dropped are visible on the webpage.
• The source element from which the drag is initiated and the target element on which the drop is made can be identified using the find_element_by_* methods provided by Selenium WebDriver.
• Selenium WebDriver allows you to perform drag and drop operations on both desktop and mobile web pages.

Summary

Selenium WebDriver provides an easy-to-use interface for performing drag and drop operations on web pages. The ActionChains class, when used with the drag_and_drop method, simplifies the process of performing drag and drop operations. Drag and drop operations are commonly used for user interaction on web pages and can be utilized in automated testing scenarios.