一、有如下一个音量demo实现自动拖拽html如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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[typebutton], input[typesubmit], input[typereset] { padding: 6px 16px; cursor: pointer; } input, select, textarea { padding: 5px; width: 280px; } textarea { height: 80px; } /style /head body h21. input 各类输入框全类型/h2 form idtestForm div classbox !-- 普通文本输入 -- label文本输入(text)/label input typetext nameusername placeholder请输入用户名 value默认文字 br label文本输入(text)/label input typetext nameusername placeholder请输入用户名 value默认文字 br !-- 密码框 -- label密码输入(password)/label input typepassword namepwd placeholder请输入密码 br label密码输入(password)/label input typepassword namepwd placeholder请输入密码 br !-- 数字输入 -- label数字输入(number)/label input typenumber nameage min0 max150 value18 br !-- 邮箱 -- label邮箱(email)/label input typeemail nameemail placeholdertestxxx.com br !-- 手机号tel -- label电话(tel)/label input typetel namephone placeholder13800138000 br !-- 网址url -- label网址(url)/label input typeurl namelink placeholderhttps://xxx.com br !-- 搜索框 -- label搜索框(search)/label input typesearch namesearch placeholder关键词搜索 br !-- 日期选择 -- label日期(date)/label input typedate namebirth br !-- 时间选择 -- label时间(time)/label input typetime nametime br !-- 日期时间 -- label日期时间(datetime-local)/label input typedatetime-local namedt br !-- 月份选择 -- label月份(month)/label input typemonth namemonth br !-- 周选择 -- label周(week)/label input typeweek nameweek br !-- 颜色拾取器 -- label颜色(color)/label input typecolor namecolor value#0066ff br !-- 范围滑块 -- label音量滑块(range)/label input typerange namevolume min0 max100 value50 br !-- 文件上传 -- label文件上传(file)/label input typefile namefile multiple br !-- 隐藏域 页面不可见提交携带数据 -- input typehidden namehiddenId valuetest001 /div h22. 单选框 radio/h2 div classbox input typeradio namegender idman value男 checked label forman男/label input typeradio namegender idwoman value女 label forwoman女/label /div h23. 复选框 checkbox/h2 div classbox input typecheckbox namehobby idread value阅读 checked label forread阅读/label input typecheckbox namehobby idgame value游戏 label forgame游戏/label input typecheckbox namehobby idsport value运动 label forsport运动/label /div h24. 下拉选择框 select/h2 div classbox !-- 普通下拉框 -- label城市单选下拉/label select namecity option value请选择城市/option option valuesh上海/option option valuebj北京/option option valuegz广州/option option valuesz深圳/option /select brbr !-- 多选下拉框 multiple -- label爱好多选下拉(按住Ctrl多选)/label select namemulHobby multiple size4 option valuecode编程/option option valuemovie电影/option option valuetravel旅行/option option valuefood美食/option /select brbr !-- 分组下拉 optgroup -- label分组下拉菜单/label select namefruit optgroup label热带水果 option valuemango芒果/option option valuebanana香蕉/option /optgroup optgroup label温带水果 option valueapple苹果/option option valuepear梨/option /optgroup /select /div h25. 多行文本框 textarea/h2 div classbox label留言内容/label textarea namemsg placeholder请输入多行留言...默认预置文本内容/textarea /div h26. 各类按钮 Button / input按钮/h2 div classbox !-- input系列按钮 -- input typebutton value普通按钮 button onclickalert(点击普通input按钮) input typesubmit value提交表单 submit input typereset value重置表单 reset brbr !-- button标签按钮可内嵌html -- button typebutton onclickalert(点击原生button标签)原生button按钮/button button typesubmitbutton提交按钮/button button typeresetbutton重置按钮/button button disabled禁用按钮 disabled/button /div /form h27. 字段集分组 fieldset legend/h2 fieldset stylewidth: 320px; legend个人基础信息分组/legend label昵称/label input typetext namenick /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%④ 第二种 鼠标拖拽工具方法带高亮跟踪示例 新建测试类TestRangeimport 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 就行谢谢大家的支持可以点个赞或转发。谢谢大家~想要工具可以私聊 或者直接赞赏哈~
尧图网络