Another useful feature of AutoIt is its ability to manipulate the mouse directly. It makes it possible to grab a window or browser box and move it about or to grab a window handle and move that to re-size it.

But before you can move something you have to find out where your target is on the screen. You need information about where the browser window is on the screen as well as about the object in the browser you are going to move.

In this example (http://www.methods.co.nz/popup/popup_demo.html#) we have a panel draggable from any point inside it. We’ll look at Internet Explorer in this post and cover Firefox in another.

Ultimately we need a point within the panel to grab and use for the move (1). We need the upper left coordinates of the panel (2) and the browser (3) in relation to the origin (4) of the screen itself so we can always locate the element against a stable base point.

Watir gives access to the title of the browser window so we can use AutoIt to get the top left corner of the window (3):


Drag and Drop Part I, Figure 1

The trick is in getting the panel coordinates in relation to the screen. The browser keeps track of the elements within it in relationship to its ‘client’ window. In the screen shot below the upper left corner of that client window is at (1). We get those coordinates (6) and (4) using Watir to query the HTML document object model (DOM). The id of the division containing the panel is ‘popup_2’.


Drag and Drop Part I, Figure 2

Now we need to account for the borders of the OS window (2) and (3) which vary between operating system versions, and the menu and toolbar heights (3) which vary by browser and browser profile configuration.

The window borders are consistent in a single operating system version (and skin configuration, e.g. XP versus Classic Windows) so we can measure them and code a look up table by operating system and version. In this example the OS is XP and the window borders are top: 30px; left, right, and bottom: 4px.

The x screen coordinate of the panel is:

Now comes the pesky part: the top offset of the browser client window from the top of the OS window’s client area (3).

Until we find a reliable programmatic way to determine (3), we measure it (using the AutoIt Window Info tool) for the OS and browser configurations we are targeting and add at along with (2).

In Internet Explorer getBoundingClientRect.top gives us (4).

We want to grab a point inside the panel to drag and the easiest is the center.

First get the width and height of the panel:

Then the center:

Now we have the starting point for the mouse. We add deltas 100, 100 (to make it easy) and can now call the AutoIt command ( ‘primary’ means the left button by default, the right when the buttons have been swapped.).

And the mouse will move to the center of the panel, grab it with a down click, drag it to the new coordinates and drop it with an up click.

Enhanced by Zemanta