《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20- 操作鼠标拖拽 - 上篇（详细教程）

原创

北京-宏哥

发布于 2025-01-26 22:07:51

11500

代码可运行

运行总次数：0

代码可运行

1.简介

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

2.拖拽操作

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

2.1基础知识

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

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

2.拖动和释放操作

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

/**
   * This method drags the source element to the target element. It will first move to the source element, perform a {@code
   * mousedown}, then move to the target element and perform a {@code mouseup}.
   *
   * <p> **Usage**
   * <pre>{@code
   * page.dragAndDrop("#source", '#target');
   * // or specify exact positions relative to the top-left corners of the elements:
   * page.dragAndDrop("#source", '#target', new Page.DragAndDropOptions()
   *   .setSourcePosition(34, 7).setTargetPosition(10, 20));
   * }</pre>
   *
   * @param source A selector to search for an element to drag. If there are multiple elements satisfying the selector, the first will be
   * used.
   * @param target A selector to search for an element to drop onto. If there are multiple elements satisfying the selector, the first will
   * be used.
   * @since v1.13
   */
  default void dragAndDrop(String source, String target) {
    dragAndDrop(source, target, null);
  }
  /**
   * This method drags the source element to the target element. It will first move to the source element, perform a {@code
   * mousedown}, then move to the target element and perform a {@code mouseup}.
   *
   * <p> **Usage**
   * <pre>{@code
   * page.dragAndDrop("#source", '#target');
   * // or specify exact positions relative to the top-left corners of the elements:
   * page.dragAndDrop("#source", '#target', new Page.DragAndDropOptions()
   *   .setSourcePosition(34, 7).setTargetPosition(10, 20));
   * }</pre>
   *
   * @param source A selector to search for an element to drag. If there are multiple elements satisfying the selector, the first will be
   * used.
   * @param target A selector to search for an element to drop onto. If there are multiple elements satisfying the selector, the first will
   * be used.
   * @since v1.13
   */
  void dragAndDrop(String source, String target, DragAndDropOptions options);

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

3.拖拽操作

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

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

语法示例：

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

4.手工拖拽

如果要精确控制拖动操作，请使用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();

敲黑板！！！注意：

如果你的页面依赖于被 dispatch 的事件，你需要至少两次鼠标移动才能在所有浏览器中触发它。要可靠地发出第二次鼠标移动，请重复两次mouse.move（）或Locator.hover（）。操作顺序为：将拖动元素悬停，鼠标向下，将拖放元素悬停，第二次悬停拖放元素，鼠标向上。

3.牛刀小试

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

3.1拖拽操作

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

3.1.1代码设计

3.1.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20-操作鼠标拖拽 -上篇（详细教程）
 *
 * 2025年1月26日
 */
public class Test_DragAndDrop {
    
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
          //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
          Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
          //2.创建context
          BrowserContext context = browser.newContext();
          //创建page
          Page page = context.newPage();
          //3.浏览器访问demo
          page.navigate("https://jqueryui.com/resources/demos/droppable/default.html");
          //4.开始拖拽
          page.locator("#draggable").dragTo(page.locator("#droppable"));
          
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }
}

3.1.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（拖拽过去后，背景颜色发生变化）。如下图所示：

3.2拖动和释放操作

使用page.dragAndDrop(locator, loacator)，实现自动化测试。

3.2.1代码设计

3.2.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20-操作鼠标拖拽 -上篇（详细教程）
 *
 * 2025年1月26日
 */
public class Test_DragAndDrop {
    
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
          //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
          Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
          //2.创建context
          BrowserContext context = browser.newContext();
          //创建page
          Page page = context.newPage();
          //3.浏览器访问demo
          page.navigate("https://jqueryui.com/resources/demos/droppable/default.html");
          //4.开始拖拽
          //page.locator("#draggable").dragTo(page.locator("#droppable"));
          page.dragAndDrop("#draggable", "#droppable");
          
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }
}

3.2.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（拖拽过去后，背景颜色发生变化）。如下图所示：

3.3手工拖拽

想精确控制拖动操作，可以使用较低级别的手工方法，如locator.hover()、mouse.down()、mouse.move()和mouse.up()。来实现自动化测试。

3.3.1代码设计

3.3.2参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20-操作鼠标拖拽 -上篇（详细教程）
 *
 * 2025年1月26日
 */
public class Test_DragAndDrop {
    
    
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
          //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
          Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000));
          //2.创建context
          BrowserContext context = browser.newContext();
          //创建page
          Page page = context.newPage();
          //3.浏览器访问demo
          page.navigate("https://jqueryui.com/resources/demos/droppable/default.html");
          //4.开始拖拽
          //page.locator("#draggable").dragTo(page.locator("#droppable"));
          //page.dragAndDrop("#draggable", "#droppable");
          page.locator("#draggable").hover();
          page.mouse().down();
          page.locator("#droppable").hover();
          page.mouse().up();
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }
}

3.3.3运行代码

1.运行代码，右键Run'Test'，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（拖拽过去后，背景颜色发生变化）。如下图所示：

4.小结

宏哥由于网络的原因，有时可以访问到jquery UI的网页的demo，有时又不可以，在网上找了半天给小伙伴们或者童鞋们又找到一个网址：https://sahitest.com/demo 里边有很多在线免费的demo供大家学习使用。有兴趣的同学可以找到里边的拖拽demo来巩固一下今天学习的知识。其实你会发现是很简单的。经过这么久的分享和介绍宏哥发现Java语言的单引号和双引号在playwright中是有区别的，详细区别宏哥就不做赘述，感兴趣的可以自己自行查询资料，小伙伴或者童鞋们要注意哦！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

教程