PHP笔记网

场景一：任意位置移动

    /**
     * 拖动元素
     * 相关资料：
     *     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();
    }