drag_and_drop_by_offset method – Action Chains in Selenium Python

The drag_and_drop_by_offset() method in Selenium's Action Chains allows you to drag an element to a new position using pixel coordinates. This method is particularly useful for interacting with sliders, draggable widgets, and custom UI elements.

What is drag_and_drop_by_offset?

The drag_and_drop_by_offset() method drags an element from its current position to a new location specified by x and y offset values. The method takes three parameters: the element to drag, x-offset (horizontal pixels), and y-offset (vertical pixels).

Syntax

drag_and_drop_by_offset(source, xoffset, yoffset)

Parameters

• source ? The element to drag
• xoffset ? Horizontal distance in pixels (positive = right, negative = left)
• yoffset ? Vertical distance in pixels (positive = down, negative = up)

How Offset Positioning Works

Offset values are relative to the element's current position. If an element is at position (x1, y1) and you apply offsets (dx, dy), the final position becomes (x1+dx, y1+dy).

Example: Moving a Slider

This example demonstrates dragging a slider handle using offset positioning on the jQuery UI demo page ?

from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By
import time

# Create a new Chrome browser instance
driver = webdriver.Chrome()

try:
    # Navigate to the jQuery UI website
    driver.get("https://jqueryui.com/slider/")
    
    # Switch to the iframe containing the slider element
    driver.switch_to.frame(driver.find_element(By.CSS_SELECTOR, ".demo-frame"))
    
    # Find the slider handle element
    slider = driver.find_element(By.CSS_SELECTOR, "#slider .ui-slider-handle")
    
    # Create an instance of ActionChains
    action_chains = ActionChains(driver)
    
    # Move slider to the right by 100 pixels
    action_chains.drag_and_drop_by_offset(slider, 100, 0).perform()
    time.sleep(2)
    
    # Move slider back to the left by 50 pixels
    action_chains.drag_and_drop_by_offset(slider, -50, 0).perform()
    time.sleep(2)
    
finally:
    # Close the browser window
    driver.quit()

Key Points

• Always call perform() to execute the action chain
• Positive x-offset moves right, negative moves left
• Positive y-offset moves down, negative moves up
• Switch to appropriate iframe if the element is inside one
• Use time.sleep() to observe movements during testing

Common Use Cases

Conclusion

The drag_and_drop_by_offset() method provides precise control for dragging elements using pixel coordinates. It's essential for testing interactive UI components like sliders, drawing tools, and draggable widgets in web applications.