Drag & Drop Controls

Several dragging methods are provided in CukeTest, each of which is suitable for different occasions, so which method should you choose to complete the dragging in which occasion? This document is used to solve this kind of problem, and also specifically introduces the calling methods of each drag and drop API.

Different ways to implement drag and drop

CukeTest provides several different drag and drop methods, which can be divided into: object-oriented method and screen-oriented operation method. The difference between the two is that the former drags a control as a method of the test object; the latter just completes a dragging operation, and only needs the screen coordinates of the starting point and the ending point (with the upper left corner as the origin of the coordinates), without Care about the target being manipulated, which is why this approach is called screen-oriented manipulation. For specific similarities and differences, please refer to the following table:

Timing of drag and drop actions

The whole process of dragging and dropping is disassembled as follows:

move to starting position --> Press the left mouse button (hold) --> move to end position --> release the left mouse button

Implementation of drag and drop controls

The most common situation is to drag a control to a specified location, so the object operation API provided by each control - drag and drop methods are undoubtedly the best way to achieve drag and drop. First look at how these two methods are called:

drag(x?, y?, mouseKey?): Promise<void>

This method marks the start of the drag operation, simulating holding down the mouse button at the target position.

• x: (optional) number, Offset pixels relative to the horizontal center of the control. Default is 0.
• y: (optional) number, Offset pixels relative to the vertical center of the control. Default is 0.
• mouseKey: (optional) number, The mouse button used during dragging, 1 for left button, 2 for right button. Default is left button (1).
• returns: An asynchronous method that returns no value.

drop(x?, y?, options?): Promise<void>

The ending step of the drag operation - move the mouse to the specified position and release it.

• x: (optional) number, Offset pixels relative to the horizontal center of the control. Negative for left, positive for right. Default is 0.
• y: (optional) number, Offset pixels relative to the vertical center of the control. Negative for up, positive for down. Default is 0.
• options: (optional) object, Configuration object for custom drag behavior. Supported options include:
  • duration: number, The duration of mouse movement to the target position, in seconds. Default is 1 second.
  • mouseKey: number, The mouse button used in the drag operation. 1 for left button, 2 for right button. Default is left button (1).
• returns: An asynchronous method that returns no value.

Drag and drop desktop icons

Suppose we want to drag the "Recycle Bin" icon on the desktop, then after adding the control in the model manager, use the following script to complete the drag and drop:

const { WinAuto } = require('leanpro.win');
const model = WinAuto.loadModel(__dirname + "\\model1.tmodel");
(async function () {
    let item = model.getListItem("Recycle Bin");
    await item.drag(); 
    await item.drop(400, 0);
})()

import os
from leanproAuto import RunSettings, Auto
modelWin = Auto.loadModel(os.path.dirname(__file__) + "/recording.tmodel")
item = model.getListItem("回收站")
item.drag()
item.drop(400, 0)

The above script can move the "Recycle Bin" icon on the desktop horizontally to the right by 400 pixels.

If you want to use right-click drag, you can change the last two lines to:

item.drag(0, 0, 2)
item.drop(400, 0, {mouseKey: 2})

item.drag(0, 0, 2)
item.drop(400, 0, {"mouseKey": 2})

Implementation of mouse dragging

In addition to the drag and drop of controls, CukeTest also provides a drag and drop method that simulates the user's mouse operation, which is completed by the Mouse module in leanpro.common. Assuming that the operation of the "recycle bin" icon in the previous section is completed by means of simulated operation, it should be written as follows:

The x and y in the Mouse method in the following script are both the horizontal and vertical coordinates of the desktop coordinate system, so the coordinate values ​​need to be manually passed in.

const { Mouse } = require('leanpro.common');
const { WinAuto } = require('leanpro.win');
const model = WinAuto.loadModel(__dirname + "\\model1.tmodel");
(async function () {
    let item = model.getListItem("Google Chrome");
    let x = await item.x();
    let y = await item.y();

    Mouse.move(x, y);
    Mouse.keyDown(1);
    Mouse.drag(x + 400, y);
    Mouse.keyUp(1);
})();

import os
from leanproAuto import RunSettings, Auto, Mouse
model = Auto.loadModel(os.path.dirname(__file__) + "/model1.tmodel")
item = modelWin.getListItem("Google Chrome")
x = item.x()
y = item.y()

Mouse.move(x, y)
Mouse.keyDown(1)
Mouse.drag(x + 400, y)
Mouse.keyUp(1)