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?:number, y?:number): Promise<void>;

The first step of the drag operation - select the starting point, the input parameter is the offset relative to the position of the control, the default is 0, that is, the starting point is the center of the control without any offset.

• x: (optional) number, The dragging starting point is offset by pixels relative to the horizontal coordinates of the control, negative on the left and positive on the right. The default is 0.
• y: (optional) number, The dragging starting point is offset by pixels relative to the vertical coordinates of the control, and the top is negative and the bottom is positive. The default is 0.
• returns: An asynchronous method that returns no value.

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

The second step of the drag operation——choose the end point, the input parameter is the offset relative to the position of the control, and the default is 0, that is, the starting point is the center of the control without any offset. By default, the dragging process adopts the smooth dragging method, because too fast dragging will cause the application to respond too late; when the end point is reached, the Left Left Button event will be triggered.

• x: (optional) number, The dragging starting point is offset by pixels relative to the horizontal coordinates of the control, negative on the left and positive on the right. The default is 0.
• y: (optional) number, The dragging starting point is offset by pixels relative to the vertical coordinates of the control, and the top is negative and the bottom is positive. The default is 0.
• 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 px.

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)