playwright-拖拽音量-开发者社区

一、有如下一个音量demo，实现自动拖拽

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

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();" + "}"); } }