一、有如下一个音量demo，实现自动拖拽
html如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全类型HTML表单&iframe综合测试页</title>
<style>
* {
box-sizing: border-box;
margin: 8px;
font-size: 15px;
}
.box {
border: 1px solid #ccc;
padding: 15px;
margin: 10px 0;
border-radius: 6px;
}
iframe {
border: 2px solid #666;
}
button, input[type=button], input[type=submit], input[type=reset] {
padding: 6px 16px;
cursor: pointer;
}
input, select, textarea {
padding: 5px;
width: 280px;
}
textarea {
height: 80px;
}
</style>
</head>
<body>
<h2>1. input 各类输入框全类型</h2>
<form id="testForm">
<div class="box">
<!-- 普通文本输入 -->
<label>文本输入(text)：</label>
<input type="text" name="username" placeholder="请输入用户名" value="默认文字">
<br>
<label>文本输入(text)：</label>
<input type="text" name="username" placeholder="请输入用户名" value="默认文字">
<br>
<!-- 密码框 -->
<label>密码输入(password)：</label>
<input type="password" name="pwd" placeholder="请输入密码">
<br>
<label>密码输入(password)：</label>
<input type="password" name="pwd" placeholder="请输入密码">
<br>
<!-- 数字输入 -->
<label>数字输入(number)：</label>
<input type="number" name="age" min="0" max="150" value="18">
<br>
<!-- 邮箱 -->
<label>邮箱(email)：</label>
<input type="email" name="email" placeholder="test@xxx.com">
<br>
<!-- 手机号tel -->
<label>电话(tel)：</label>
<input type="tel" name="phone" placeholder="13800138000">
<br>
<!-- 网址url -->
<label>网址(url)：</label>
<input type="url" name="link" placeholder="https://xxx.com">
<br>
<!-- 搜索框 -->
<label>搜索框(search)：</label>
<input type="search" name="search" placeholder="关键词搜索">
<br>
<!-- 日期选择 -->
<label>日期(date)：</label>
<input type="date" name="birth">
<br>
<!-- 时间选择 -->
<label>时间(time)：</label>
<input type="time" name="time">
<br>
<!-- 日期+时间 -->
<label>日期时间(datetime-local)：</label>
<input type="datetime-local" name="dt">
<br>
<!-- 月份选择 -->
<label>月份(month)：</label>
<input type="month" name="month">
<br>
<!-- 周选择 -->
<label>周(week)：</label>
<input type="week" name="week">
<br>
<!-- 颜色拾取器 -->
<label>颜色(color)：</label>
<input type="color" name="color" value="#0066ff">
<br>
<!-- 范围滑块 -->
<label>音量滑块(range)：</label>
<input type="range" name="volume" min="0" max="100" value="50">
<br>
<!-- 文件上传 -->
<label>文件上传(file)：</label>
<input type="file" name="file" multiple>
<br>
<!-- 隐藏域 页面不可见，提交携带数据 -->
<input type="hidden" name="hiddenId" value="test001">
</div>
<h2>2. 单选框 radio</h2>
<div class="box">
<input type="radio" name="gender" id="man" value="男" checked>
<label for="man">男</label>
<input type="radio" name="gender" id="woman" value="女">
<label for="woman">女</label>
</div>
<h2>3. 复选框 checkbox</h2>
<div class="box">
<input type="checkbox" name="hobby" id="read" value="阅读" checked>
<label for="read">阅读</label>
<input type="checkbox" name="hobby" id="game" value="游戏">
<label for="game">游戏</label>
<input type="checkbox" name="hobby" id="sport" value="运动">
<label for="sport">运动</label>
</div>
<h2>4. 下拉选择框 select</h2>
<div class="box">
<!-- 普通下拉框 -->
<label>城市单选下拉：</label>
<select name="city">
<option value="">请选择城市</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<br><br>
<!-- 多选下拉框 multiple -->
<label>爱好多选下拉(按住Ctrl多选)：</label>
<select name="mulHobby" multiple size="4">
<option value="code">编程</option>
<option value="movie">电影</option>
<option value="travel">旅行</option>
<option value="food">美食</option>
</select>
<br><br>
<!-- 分组下拉 optgroup -->
<label>分组下拉菜单：</label>
<select name="fruit">
<optgroup label="热带水果">
<option value="mango">芒果</option>
<option value="banana">香蕉</option>
</optgroup>
<optgroup label="温带水果">
<option value="apple">苹果</option>
<option value="pear">梨</option>
</optgroup>
</select>
</div>
<h2>5. 多行文本框 textarea</h2>
<div class="box">
<label>留言内容：</label>
<textarea name="msg" placeholder="请输入多行留言...">默认预置文本内容</textarea>
</div>
<h2>6. 各类按钮 Button / input按钮</h2>
<div class="box">
<!-- input系列按钮 -->
<input type="button" value="普通按钮 button" onclick="alert('点击普通input按钮')">
<input type="submit" value="提交表单 submit">
<input type="reset" value="重置表单 reset">
<br><br>
<!-- button标签按钮，可内嵌html -->
<button type="button" onclick="alert('点击原生button标签')">原生button按钮</button>
<button type="submit">button提交按钮</button>
<button type="reset">button重置按钮</button>
<button disabled>禁用按钮 disabled</button>
</div>
</form>
<h2>7. 字段集分组 fieldset + legend</h2>
<fieldset style="width: 320px;">
<legend>个人基础信息分组</legend>
<label>昵称：</label>
<input type="text" name="nick">
</fieldset>
<script>
// 简单测试JS：表单提交拦截打印表单数据
const form = document.getElementById('testForm');
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(form);
console.log('表单提交数据：');
for (let [key, val] of formData) {
console.log(key, ':', val);
}
alert('已阻止页面跳转，数据打印在控制台');
})
</script>
</body>
</html>二、playwright 拖拽音量
1.有如下步骤
①打开测试页面
②获取 音量控件 定位
③第一种方式，直接fill方法 滑倒 10%
④ 第二种 === 鼠标拖拽工具方法（带高亮跟踪）示例 ===
新建测试类TestRange
java
import com.microsoft.playwright.*;
import com.microsoft.playwright.options.AriaRole;
import com.microsoft.playwright.options.BoundingBox;
import java.nio.file.Path;
import java.nio.file.Paths;
public class TestRange {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
Page page = browser.newPage();
//打开测试页面
page.navigate("file:///E:/playwright/testDemo/全类型HTML表单&iframe综合测试页.html");
//获取 音量控件 定位
Locator slider = page.locator("//*[@id=\"testForm\"]/div[1]/input[16]");
slider.hover();
//第一中，直接fill方法 滑倒 10%
slider.fill("10");
// 第二种 === 鼠标拖拽工具方法（带高亮跟踪）示例 ===
//增加小红点
injectMouseTracker(page);
page.waitForTimeout(1000);
// 拖拽到 80% 位置
mouseDragSlider(page, "//*[@id=\"testForm\"]/div[1]/input[16]", 0.8);
page.waitForTimeout(1000);
//移除小红点
removeMouseTracker(page);
//停2秒
page.waitForTimeout(2000);
browser.close();
}
}
// ============ 鼠标拖拽工具方法（带高亮跟踪） ============
public static void injectMouseTracker(Page page) {
page.evaluate("() => {" +
"const dot = document.createElement('div');" +
"dot.id = '__pw_mouse_tracker__';" +
"dot.style.cssText = 'position:fixed;width:10px;height:10px;" +
"background:red;border-radius:50%;z-index:99999;" +
"pointer-events:none;transform:translate(-50%,-50%)';" +
"document.body.appendChild(dot);" +
"}");
}
public static void mouseMoveTo(Page page, double x, double y) {
page.evaluate("(args) => {" +
"const d = document.getElementById('__pw_mouse_tracker__');" +
"if (d) { d.style.left = args[0] + 'px'; d.style.top = args[1] + 'px'; }" +
"}", new Object[]{x, y});
page.mouse().move(x, y);
}
public static void mouseDrag(Page page, double fromX, double fromY, double toX, double toY, int steps) {
mouseMoveTo(page, fromX, fromY);
page.mouse().down();
for (int i = 1; i <= steps; i++) {
double x = fromX + (toX - fromX) * i / steps;
double y = fromY + (toY - fromY) * i / steps;
mouseMoveTo(page, x, y);
}
page.mouse().up();
}
public static void mouseDragSlider(Page page, String selector, double targetPercent) {
Locator slider = page.locator(selector);
BoundingBox box = slider.boundingBox();
if (box == null) throw new RuntimeException("Element not found or not visible: " + selector);
double fromX = box.x + box.width * 0.5;
double toX = box.x + box.width * targetPercent;
double y = box.y + box.height / 2;
mouseDrag(page, fromX, y, toX, y, 10);
}
public static void removeMouseTracker(Page page) {
page.evaluate("() => {" +
"document.getElementById('__pw_mouse_tracker__')?.remove();" +
"}");
}
}2.结果展示
二、通过葫芦娃ui自动化工具操作
①打开葫芦娃ui自动化工具
②加载对应step.xlsx和data.xlsx
③step.xlsx配置如图：
case sheet输入如下
④创建对应sheet 测试鼠标拖拽音量 如下，方法选择 mouseDragSlider：
⑤切换到工具，点击运行：
⑥执行结果如下：
运行效果和上面一样
完全零代码，直接维护excel 就行，谢谢大家的支持，可以点个赞或转发。谢谢大家~
想要工具可以私聊 或者直接赞赏哈~