1.简介
在现代Web应用程序开发与测试领域,鼠标交互模拟是自动化测试不可或缺的核心组成部分。作为用户与网页内容交互的主要方式之一,鼠标操作涵盖了点击、双击、拖拽、悬停、滚动等多种行为模式。这些交互行为往往直接关联着应用程序的核心功能逻辑,因此能否准确模拟这些操作将直接影响自动化测试的可靠性和覆盖率。
Playwright作为新一代的浏览器自动化测试框架,提供了强大而全面的鼠标操作API。与传统的Selenium等工具相比,Playwright的鼠标事件模拟更加贴近真实用户行为,支持精细化的操作控制,包括移动轨迹模拟、操作延迟设置、多点触控支持等高级特性。本文将系统性地介绍Playwright框架中mouse模块的各种功能和使用方法,帮助测试开发人员构建更加健壮可靠的自动化测试脚本。
鼠标为我们使用电脑提供了很多方便,我们看到的东西就可以将鼠标移动过去进行点击就可以打开或者访问内容,当页面内容过长时,我们也可以使用鼠标滚轮来实现对整个页面内容的查看,其实playwright也有鼠标操作的方法。上一篇文章中已经讲解过鼠标的部分操作了,今天宏哥在这里将剩下的其他操作进行一个详细地介绍和讲解。
2.鼠标操作语法
鼠标操作介绍官方API的文档地址:Mouse | Playwright Java
Mouse鼠标操作是基于page对象去调用。常用的鼠标操作有单击,双击,滚轮,按住,移动,释放。
2.1官方示例
1.使用` page.mouse` 画 一个100x100的正方形。语法如下:
// Using ‘page.mouse’ to trace a 100x100 square.
page.mouse().move(0, 0);
page.mouse().down();
page.mouse().move(0, 100);
page.mouse().move(100, 100);
page.mouse().move(100, 0);
page.mouse().move(0, 0);
page.mouse().up();
2.鼠标运行轨迹,如下图所示:
3.组合拳
mouse.move()、mouse.down()、mouse.up()三个一般都是组合出现在代码里的一套组合拳。
3.1down模拟鼠标按下
down模拟鼠标按下,主要是通过调度一个mousedown事件。语法如下:
/**
* Dispatches a {@code mousedown} event.
*
* @since v1.8
*/
default void down() {
down(null);
}
/**
* Dispatches a {@code mousedown} event.
*
* @since v1.8
*/
void down(DownOptions options);
3.1.1参数详解
「参数」
| 参数 | 类型 | 释义 |
|---|---|---|
| setButton | enum { LEFT, RIGHT, MIDDLE } | 左中右可选 |
| setClickCount | int | 默认值为1,含义参考:UIEvent: detail property - Web APIs | MDN |
3.1.2使用方法
Mouse.down();
Mouse.down(options);
3.2.move模拟鼠标移动
move模拟鼠标移动,主要是通过调度一个mousemove事件。语法如下:
/**
* Dispatches a {@code mousemove} event.
*
* @since v1.8
*/
default void move(double x, double y) {
move(x, y, null);
}
/**
* Dispatches a {@code mousemove} event.
*
* @since v1.8
*/
void move(double x, double y, MoveOptions options);
3.2.1参数详解
「参数」
| 参数 | 类型 | 释义 |
|---|---|---|
| x | double | x坐标 |
| y | double | y坐标 |
| setSteps |
3.2.2使用方法
Mouse.move(x, y);
Mouse.move(x, y, options);
3.3up模拟鼠标释放
up模拟鼠标释放,主要是通过调度一个mouseup事件。语法如下:
/**
* Dispatches a {@code mouseup} event.
*
* @since v1.8
*/
default void up() {
up(null);
}
/**
* Dispatches a {@code mouseup} event.
*
* @since v1.8
*/
void up(UpOptions options);
3.3.1参数详解
「参数」
| 参数 | 类型 | 释义 |
|---|---|---|
| setButton | enum { LEFT, RIGHT, MIDDLE } | 左中右可选 |
| setClickCount | int | 默认值为1,含义参考:UIEvent: detail property - Web APIs | MDN |
3.3.2使用方法
Mouse.up();
Mouse.up(options);
4.wheel模拟鼠标滚动
wheel模拟鼠标滚动,是通过调度一个wheel事件。(滚轮事件如果不处理可能会导致滚动,该方法不会等待滚动结束才返回。)语法如下:
/**
* Dispatches a {@code wheel} event.
*
* <p> <strong>NOTE:</strong> Wheel events may cause scrolling if they are not handled, and this method does not wait for the scrolling to finish
* before returning.
*
* @param deltaX Pixels to scroll horizontally.
* @param deltaY Pixels to scroll vertically.
* @since v1.15
*/
void wheel(double deltaX, double deltaY);
4.1参数详解
「参数」
| 参数 | 类型 | 释义 |
|---|---|---|
| deltaX | double | 要水平滚动的像素 |
| deltaY | double | 要垂直滚动的像素 |
4.2使用方法
Mouse.wheel(deltaX, deltaY);
5.牛刀小试
5.1测试网址
宏哥在网上查找资料,专门找了一个监听鼠标操作的网站:cps-check.com/cn/mouse-bu…
- 未按鼠标时,不会显示其他颜色
- 长按鼠标左键时,页面会显示红色的左键
- 按下鼠标左键松开时,页面会显示粉红色的左键
5.2代码设计
5.3参考代码
package com.bjhg.playwright;
import com.microsoft.playwright.*;
import com.microsoft.playwright.options.MouseButton;
/**
* @author 北京-宏哥
*
* @公众号:北京宏哥(微信搜索,关注宏哥,提前解锁更多测试干货)
*
* 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-43-鼠标操作-下篇 (详细教程)
*
* 2026年03月25日
*/
public class Test_Mouse {
public static void main(String[] args) {
// TODO Auto-generated method stub
try (Playwright playwright = Playwright.create()) {
//1.使用chromium浏览器,# 浏览器配置,设置以GUI模式启动Chrome浏览器(要查看浏览器UI,在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
//2.创建context
BrowserContext context = browser.newContext();
//创建page
Page page = context.newPage();
page.screenshot();
//3.浏览器访问demo
page.navigate("http://cps-check.com/cn/mouse-buttons-test");
Thread.sleep(3000);
//4.将鼠标移到测试框内
page.mouse().move(650,300);
//5.按下左键并释放
page.mouse().down();
page.mouse().up();
Thread.sleep(3000);
//6.按下右键并释放Mouse.UpOptions
page.mouse().down(new Mouse.DownOptions().setButton(MouseButton.RIGHT));
page.mouse().up(new Mouse.UpOptions().setButton(MouseButton.RIGHT));
Thread.sleep(3000);
//7. wheel模拟鼠标滚动
page.mouse().wheel(10, 20);
Thread.sleep(3000);
System.out.println("Test Pass");
//8.关闭page
page.close();
//9.关闭browser
browser.close();
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
5.4运行代码
1.运行代码,右键Run As->Java Application,就可以看到控制台输出,如下图所示:
2.运行代码后电脑端的浏览器的动作(鼠标事件检查网站,先按左键【按下变红释放变浅】,后按右键【按下变红释放变浅】,最后滚动滑轮【按下变红释放变浅】)。如下图所示:
6.小结
6.1实践演示遇到的问题
在实战演示的过程中,宏哥为了省事,在按下右键后,然后释放的时候,就没有加右键的参数,结果释放不成功,加上参数才释放右键成功,从这里看出,释放的操作默认释放的是左键这里就刚好验证了官方文档的说明:Defaults to left。开始宏哥觉得是先按左键后按右键的缘故,因此将代码顺序对调后,还是一样。
6.1.1代码设计
6.1.2参考代码
package com.bjhg.playwright;
import com.microsoft.playwright.*;
import com.microsoft.playwright.options.MouseButton;
/**
* @author 北京-宏哥
*
* @公众号:北京宏哥(微信搜索,关注宏哥,提前解锁更多测试干货)
*
* 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-43-鼠标操作-下篇 (详细教程)
*
* 2026年03月25日
*/
public class Test_Mouse {
public static void main(String[] args) {
// TODO Auto-generated method stub
try (Playwright playwright = Playwright.create()) {
//1.使用chromium浏览器,# 浏览器配置,设置以GUI模式启动Chrome浏览器(要查看浏览器UI,在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
//2.创建context
BrowserContext context = browser.newContext();
//创建page
Page page = context.newPage();
page.screenshot();
//3.浏览器访问demo
page.navigate("http://cps-check.com/cn/mouse-buttons-test");
Thread.sleep(3000);
//4.将鼠标移到测试框内
page.mouse().move(650,300);
//6.按下右键并释放Mouse.UpOptions
page.mouse().down(new Mouse.DownOptions().setButton(MouseButton.RIGHT));
page.mouse().up();
Thread.sleep(3000);
//5.按下左键并释放
page.mouse().down();
page.mouse().up();
Thread.sleep(3000);
//7. wheel模拟鼠标滚动
page.mouse().wheel(10, 20);
Thread.sleep(3000);
System.out.println("Test Pass");
//8.关闭page
page.close();
//9.关闭browser
browser.close();
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
6.1.3运行代码
1.运行代码,右键Run As->Java Application,就可以看到控制台输出,如下图所示:
2.运行代码后电脑端的浏览器的动作(鼠标事件检查网站,先按右键【按下变红没有释放变浅仍然是红色】,再按下左键【按下变红释放变浅】,最后滚动滑轮【按下变红释放变浅】)。如下图所示:
到此,鼠标的一些常用的操作基本上都已经讲解和分享完成,当然了可能还有其他操作,这个等我遇到的时候,再具体问题具体分析。好了,今天时间也不早了,宏哥就讲解和分享到这里,感谢您耐心的阅读,希望对您有所帮助。