场景一：任意位置移动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | /** * 拖动元素 * 相关资料： * 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();} |
或
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /** * 拖动元素 * 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();} |
场景二：水平位置移动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /** * 水平拖动元素 * 相关资料： * 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();} |
或：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /** * 水平拖动元素 * 相关资料： * 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(); } |