场景一:任意位置移动
/**
* 拖动元素
* 相关资料:
* https://blog.csdn.net/m0_52009348/article/details/119816872
* https://blog.csdn.net/qiaotl/article/details/125040179
* https://blog.csdn.net/Revivedsun/article/details/82121123
* @param sourceSelectorOrElementHandle 源 选择器字符串 或 ElementHandle对象
* @param targetSelectorOrElementHandle 目标 选择器字符串 或 ElementHandle对象
*/
static async dragElement(sourceSelectorOrElementHandle, targetSelectorOrElementHandle) {
let page = await this.getCurPage();
let sourceElementHandle = VarHelper.isString(sourceSelectorOrElementHandle) ?
await this.getElement(sourceSelectorOrElementHandle) : sourceSelectorOrElementHandle;
let targetElementHandle = VarHelper.isString(targetSelectorOrElementHandle) ?
await this.getElement(targetSelectorOrElementHandle) : targetSelectorOrElementHandle;
// dragElement方法接受两个参数,被拖动元素的elementHandle和目标位置元素的elementHandle
const sourceRect = await page.evaluate((elementHandle) => {
const {top, left, bottom, right} = elementHandle.getBoundingClientRect();
return {top, left, bottom, right};
}, sourceElementHandle);
// 调用elementHandle.getBoundingClientRect()获取页面元素坐标信息
const targetRect = await page.evaluate((elementHandle) => {
const {top, left, bottom, right} = elementHandle.getBoundingClientRect();
return {top, left, bottom, right};
}, targetElementHandle);
// 计算得到初始位置
await page.mouse.move((sourceRect.left + sourceRect.right) / 2, (sourceRect.top + sourceRect.bottom) / 2);
// 模拟点击鼠标左键,且处于不释放状态
await page.mouse.down();
await DateTimeHelper.sleep(500);
// 计算得到目标位置
await page.mouse.move((targetRect.left + targetRect.right) / 2, (targetRect.top + targetRect.bottom) / 2, {
'steps' : 100
});
await DateTimeHelper.sleep(1000);
// 释放鼠标左键
await page.mouse.up();
}
或
/**
* 拖动元素
* dragElement方法接受两个参数,被拖动元素的elementHandle和目标位置元素的elementHandle
* 相关资料:
* https://blog.csdn.net/m0_52009348/article/details/119816872
* https://blog.csdn.net/qiaotl/article/details/125040179
* https://blog.csdn.net/Revivedsun/article/details/82121123
* @param sourceSelectorOrElementHandle 源 选择器字符串 或 ElementHandle对象
* @param targetSelectorOrElementHandle 目标 选择器字符串 或 ElementHandle对象
*/
static async dragElement(sourceSelectorOrElementHandle, targetSelectorOrElementHandle) {
let page = await this.getCurPage();
let sourceElementHandle = VarHelper.isString(sourceSelectorOrElementHandle) ?
await this.getElement(sourceSelectorOrElementHandle) : sourceSelectorOrElementHandle;
let targetElementHandle = VarHelper.isString(targetSelectorOrElementHandle) ?
await this.getElement(targetSelectorOrElementHandle) : targetSelectorOrElementHandle;
// 获取页面元素坐标信息
// 格式如:{ x: 733.5, y: 325, width: 40, height: 38 }
const sourceRect = await sourceElementHandle.boundingBox();
// 获取页面元素坐标信息
// 格式如:{ x: 733.5, y: 325, width: 40, height: 38 }
const targetRect = await targetElementHandle.boundingBox();
// 计算得到初始位置
await page.mouse.move(sourceRect.x + sourceRect.width / 2, sourceRect.y + sourceRect.height / 2);
// 模拟点击鼠标左键,且处于不释放状态
await page.mouse.down();
await DateTimeHelper.sleep(500);
// 计算得到目标位置
await page.mouse.move(targetRect.x + targetRect.width / 2, targetRect.y + targetRect.height / 2, {
'steps' : 100
});
await DateTimeHelper.sleep(1000);
// 释放鼠标左键
await page.mouse.up();
}
场景二:水平位置移动
/**
* 水平拖动元素
* 相关资料:
* https://blog.csdn.net/m0_52009348/article/details/119816872
* https://blog.csdn.net/qiaotl/article/details/125040179
* https://blog.csdn.net/Revivedsun/article/details/82121123
* @param selectorOrElementHandle 源 选择器字符串 或 ElementHandle对象
* @param xMoveLength 水平移动的长度(单位:px)
*/
static async dragXelement(selectorOrElementHandle, xMoveLength) {
let page = await this.getCurPage();
let sourceElementHandle = VarHelper.isString(selectorOrElementHandle) ?
await this.getElement(selectorOrElementHandle) : selectorOrElementHandle;
// dragElement方法接受两个参数,被拖动元素的elementHandle和目标位置元素的elementHandle
const sourceRect = await page.evaluate((elementHandle) => {
const {top, left, bottom, right} = elementHandle.getBoundingClientRect();
return {top, left, bottom, right};
}, sourceElementHandle);
console.log(sourceRect);
let boxInfo = await sourceElementHandle.boundingBox();
console.log(boxInfo);
// 计算得到初始位置
await page.mouse.move((sourceRect.left + sourceRect.right) / 2, (sourceRect.top + sourceRect.bottom) / 2);
// 模拟点击鼠标左键,且处于不释放状态
await page.mouse.down();
await DateTimeHelper.sleep(500);
// 计算得到目标位置
await page.mouse.move(sourceRect.right + xMoveLength, (sourceRect.top + sourceRect.bottom) / 2, {
'steps' : 100
});
await DateTimeHelper.sleep(1000);
// 释放鼠标左键
await page.mouse.up();
}
或:
/**
* 水平拖动元素
* 相关资料:
* https://blog.csdn.net/m0_52009348/article/details/119816872
* https://blog.csdn.net/qiaotl/article/details/125040179
* https://blog.csdn.net/Revivedsun/article/details/82121123
* @param selectorOrElementHandle 源 选择器字符串 或 ElementHandle对象
* @param xMoveLength 水平移动的长度(单位:px)
*/
static async dragXelement(selectorOrElementHandle, xMoveLength) {
let page = await this.getCurPage();
let sourceElementHandle = VarHelper.isString(selectorOrElementHandle) ?
await this.getElement(selectorOrElementHandle) : selectorOrElementHandle;
// 获取页面元素坐标信息
// 格式如:{ x: 733.5, y: 325, width: 40, height: 38 }
const sourceRect = await sourceElementHandle.boundingBox();
// 计算得到初始位置
await page.mouse.move(sourceRect.x + sourceRect.width / 2, sourceRect.y + sourceRect.height / 2);
// 模拟点击鼠标左键,且处于不释放状态
await page.mouse.down();
await DateTimeHelper.sleep(500);
// 计算得到目标位置
await page.mouse.move(sourceRect.x + sourceRect.width + xMoveLength, sourceRect.y + sourceRect.height / 2, {
'steps' : 100
});
await DateTimeHelper.sleep(1000);
// 释放鼠标左键
await page.mouse.up();
}