《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇

1.简介

本文主要介绍两个在测试过程中可能会用到的功能：在selenium中宏哥介绍了Actions类中的拖拽操作和Actions类中的划取字段操作。例如：需要在一堆log字符中随机划取一段文字，然后右键选择摘取功能。playwright同样可以实现元素的拖拽和释放的操作。

2.拖拽操作

鼠标拖拽操作，顾名思义就是：就是鼠标按住将一个元素拖拽到另一个元素上。拖拽是指将某个元素从一个位置拖动到另一个位置。为了模拟这种操作，Playwright 提供了 DragToAsync 方法，它可以帮助我们轻松地完成拖拽功能。

2.1基础知识

1.按住元素从页面的一个位置拖动到另外一个位置，有2种方式可以实现：

• locator.drag_to(target: locator) 先定位元素，调用drag_to方法到目标元素
• page.drag_and_drop(source: str, target: str) page对象直接调用

2.拖动和释放操作

page.drag_and_drop可以实现通过page对象调用drag_and_drop ,部分源码如下：

    def drag_and_drop(
        self,
        source: str,
        target: str,
        *,
        source_position: typing.Optional[Position] = None,
        target_position: typing.Optional[Position] = None,
        force: typing.Optional[bool] = None,
        no_wait_after: typing.Optional[bool] = None,
        timeout: typing.Optional[float] = None,
        strict: typing.Optional[bool] = None,
        trial: typing.Optional[bool] = None
    ) -> None:
        """Page.drag_and_drop

        This method drags the source element to the target element. It will first move to the source element, perform a
        `mousedown`, then move to the target element and perform a `mouseup`.

        **Usage**

        ```py
        await page.drag_and_drop(\"#source\", \"#target\")
        # or specify exact positions relative to the top-left corners of the elements:
        await page.drag_and_drop(
          \"#source\",
          \"#target\",
          source_position={\"x\": 34, \"y\": 7},
          target_position={\"x\": 10, \"y\": 20}
        )
        ```

        ```py
        page.drag_and_drop(\"#source\", \"#target\")
        # or specify exact positions relative to the top-left corners of the elements:
        page.drag_and_drop(
          \"#source\",
          \"#target\",
          source_position={\"x\": 34, \"y\": 7},
          target_position={\"x\": 10, \"y\": 20}
        )
        ```

注：source 和 target 是字符串格式，也就是传selector 选择器的方法

3.拖拽操作

locator.drag_to()可以实现拖放操作，该操作将：

• 将鼠标悬停在要拖动的元素上
• 按鼠标左键
• 将鼠标移动到将接收放置的元素
• 松开鼠标左键

语法示例：

page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))

手工拖拽：

• locator.hover()、mouse.down()、mouse.move()、mouse.up()

语法示例：

page.locator("#item-to-be-dragged").hover()
page.mouse.down()
page.locator("#item-to-drop-at").hover()
page.mouse.up()

3.牛刀小试

学习过Playwright的拖拽基础知识后，我们趁热打铁将其实践一下，以为我们更好的理解和记忆。宏哥这里JqueryUI网站的一个拖拽demo实战一下。

3.1拖拽操作

使用locator.drag_to()执行拖放操作，实现自动化测试。

3.1.1代码设计

3.1.2参考代码

# coding=utf-8

标签：playwright,Python,18,drop,拖拽,locator,drag,Playwright,page	

From： https://www.cnblogs.com/du-hong/p/17559838.html