Automating drag-and-drop functionality can be challenging, but with the right tools, it becomes manageable. Watir provides the browser automation capabilities, while AutoIt enhances this by directly manipulating the mouse and interacting with browser windows. Together, these tools make it possible to automate complex actions like resizing windows or moving draggable elements.
Before you can perform a drag-and-drop action, you need to locate the target element on the screen. This involves understanding the element’s coordinates within the browser window, the browser’s position relative to the screen, and offsets introduced by the operating system and browser configuration.
Step 1: Identify Key Coordinates
To successfully automate a drag-and-drop operation, you need the following:
- A point within the draggable element to grab.
- The top-left coordinates of the draggable element within the browser.
- The top-left coordinates of the browser window relative to the screen.
- Any offsets introduced by the operating system or browser interface.
Step 2: Get the Browser Window Coordinates
Watir provides access to the browser’s title, which AutoIt can use to find the top-left corner of the browser window. Here’s how you retrieve those coordinates:
@ai = WIN32OLE.new('AutoItX3.Control')
browser = Watir::Browser.new
title = browser.title
browser_x = @ai.WinGetPosX(title)
browser_y = @ai.WinGetPosY(title)
Step 3: Get the Draggable Element’s Coordinates
Once the browser coordinates are known, use Watir to interact with the HTML DOM and locate the draggable element. For example, if the element has an ID of popup_2, you can retrieve its coordinates like this:
panel = browser.div(:id, 'popup_2')
panel_client_x = panel.ole_object.getBoundingClientRect.left.to_i
panel_client_y = panel.ole_object.getBoundingClientRect.top.to_i
These coordinates are relative to the browser’s client window.
Step 4: Account for OS and Browser Offsets
Operating system versions and browser configurations introduce additional offsets, such as:
- Window borders (top, left, right, and bottom).
- Menu and toolbar heights in the browser interface.
For example, in Windows XP with Internet Explorer:
- Top border: 30px
- Left/right/bottom borders: 4px
- Toolbar height: 118px
Include these offsets in your calculations to find the draggable element’s screen position:
panel_screen_x = browser_x + panel_client_x + 4
panel_screen_y = browser_y + panel_client_y + 30 + 118
Step 5: Find the Element’s Center
To ensure a smooth drag-and-drop operation, it’s best to grab the element from its center. Calculate the center point using the element’s width and height:
panel_width = panel.ole_object.getBoundingClientRect.right.to_i - panel_client_x
panel_height = panel.ole_object.getBoundingClientRect.bottom.to_i - panel_client_y
panel_screen_center_x = panel_screen_x + panel_width / 2
panel_screen_center_y = panel_screen_y + panel_height / 2
Step 6: Perform the Drag-and-Drop Action
Now that you have the coordinates, use AutoIt’s MouseClickDrag to perform the action. For instance, if you want to drag the panel 100 pixels to the right and 100 pixels down:
@ai.MouseClickDrag("primary",
panel_screen_center_x, panel_screen_center_y,
panel_screen_center_x + 100, panel_screen_center_y + 100)
This command moves the mouse to the panel’s center, clicks to grab it, drags it to the new position, and releases it.
Final Thoughts
By combining Watir and AutoIt, you can reliably automate drag-and-drop functionality. Understanding how to calculate precise coordinates and account for offsets ensures accuracy across various environments. This guide provides the foundational steps for handling drag-and-drop operations in Internet Explorer.
In Part II, we’ll explore similar techniques for Firefox. Let us know if you have questions or tips about automating drag-and-drop functionality!
