Playwright实战：拖拽（drag-and-drop）操作详解

之前拖拽，写过一篇Typescript版本的教程，本篇为Python版本。

拖拽也是测试中常见交互手段，本文分享了利用Python实现Playwright实现自动化拖拽，希望可以对你有所帮助。

一、引言

拖拽操作概述

拖拽 ( drag-and-drop )是指用户按住渐进元素，将其移动到目标元素上时重新松开鼠标的操作，应用于文件上传、项目排序、UI配置连线等场景。

在 Web 自动化测试中，想要模拟用户拖拽操作，必须正确解析下列基本步骤：

拖拽操作基本原理

1. 1. 解析 DOM 结构 ：确定渐进元素和目标元素；
2. 2. 突显操作行为 ：鼠标移动到元素上，触发 hover 效果；
3. 3. 渐进拖拽 ：执行 mouse.down 或 dragTo ，移动到目标元素。
4. 4. 松开操作 ：执行 mouse.up ，触发系列 DOM 事件 ( drop , dragend )，依靠 JS 解析处理逻辑。

Playwright 提供了高级 drag_to 方法，也支持低级的 mouse 按键和移动操作，适合不同项目处理需求。

二、Playwright 拖拽实现

方案1：drag_to()高级方法

                                              from playwright.sync_api import sync_playwright

def test_drag_and_drop_dragto():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto()

        source = page.locator("#small-box")
        target = page.locator(".large-box")

        source.drag_to(target)

        assert "Success" in target.inner_text()
        browser.close()

方案2：低级 mouse 操作

                                              from playwright.sync_api import sync_playwright

def test_drag_and_drop_manual():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto()

        page.locator("#small-box").hover()
        page.mouse.down()
        page.locator(".large-box").hover()
        page.mouse.up()

        assert "Success" in page.locator(".large-box").inner_text()
        browser.close()

拖拽多个元素

                                              sources = page.locator(".draggable-item")
target = page.locator("#drop-area")

for i in range(await sources.count()):
    await sources.nth(i).drag_to(target)

环境配置

                                              python -m venv venv
source venv/bin/activate
pip install playwright
playwright install

注： Playwright Python 版本 >= 1.34

三、结论

Q1: 拖拽操作失效？
可能是 DOM 元素未出现，可加 wait_for() 或观察动画进程的状态。

Q2: drag_to 和 mouse.move 有何区别？
drag_to 是高级抽象，有耗时、入焦操作， mouse 是低级执行，适合非标准 HTML5 drag API 的场景。

Q3: 点击后元素不会执行 drag事件？
确认当前页面是否使用 JS 触发 dragstart / drop ，或者是 canvas /自定义 UI 系统，此时需要添加中断点解析原因。

Playwright 在拖拽操作中提供了高级和低级操作方式，能够应对大部分标准化和非标准化拖拽场景。在清晰元素结构和 DOM 事件模型基础上，选择适合的操作方案才能保证自动化的稳定性。