表单自动化填写-JavaScript脚本

一、场景

在日常工作、生活中常常会遇到需要填写、提交web表单的场景,往往涉及到了大量机械、重复的工作。作为程序员,我们崇尚消除重复、实现流程自动化、合理偷懒。

通过浏览器的控制台运行JavaScript脚本,可以简单的实现对web表单的填写和提交。

二、代码示例

结合应用场景,在ai的帮助下写了一些示例,核心是元素对象的获取、回调事件的触发。

javascript 复制代码
/******************************************************************************************************/
/*                                               搜索框                                                */
/******************************************************************************************************/
var element_input = document.getElementsByClassName("my-input")[0]
// 修改搜索框的值
element_input.value = "item";
// 设置输入框的 input 事件
var event = new InputEvent('input', {
    'bubbles': true,		// 表示事件对象是否冒泡
    'cancelable': true,	// 表示事件是否可以被取消,即能否用Event.preventDefault()取消这个事件。
});
// 触发 dom 对象的 input 事件
element_input.dispatchEvent(event);
/******************************************************************************************************/
/*                                                单选框                                               */
/******************************************************************************************************/
var allRadioGroups = document.querySelectorAll('.my-radio-group');
var childGroup = allRadioGroups[2];
var childRadioLabel = childGroup.querySelector('.my-radio');
// 移除其他单选框的选中状态
var allRadioLabels = document.querySelectorAll('.my-radio');
allRadioLabels.forEach(function (label) {
    label.classList.remove('my-radio-checked');
});
// 添加选中类到目标单选框
childRadioLabel.classList.add('my-radio-checked');
// 创建并触发 click 事件
var clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
});
// 触发 click 事件以调用绑定的回调函数
childRadioLabel.dispatchEvent(clickEvent);
/******************************************************************************************************/
/*                                              单选框                                                 */
/******************************************************************************************************/
var allRadioGroups = document.querySelectorAll('.my-radio-group');
// 获取目标radio组
var childGroup = allRadioGroups[9];
// 在该组中查找单选框的label元素
var childRadioLabel = childGroup.querySelector('.my-radio');
// 移除其他单选框的选中状态
var allRadioLabels = document.querySelectorAll('.my-radio');
allRadioLabels.forEach(function (label) {
    label.classList.remove('my-radio-checked');
});
// 添加选中类到目标单选框
childRadioLabel.classList.add('my-radio-checked');
// 创建并触发 click 事件
var clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
});
// 触发 click 事件以调用绑定的回调函数
childRadioLabel.dispatchEvent(clickEvent);
/******************************************************************************************************/
/*                                                  多选框                                             */
/******************************************************************************************************/
var checkboxes = document.querySelectorAll('.my-checkbox-input');
var changeEvent = new Event('change', {
    bubbles: true,
    cancelable: true
});
checkboxes[0].checked = true
checkboxes[1].checked = true
checkboxes[0].dispatchEvent(changeEvent);
// 多个选中中间不加延时可能会有异常
await delay(1000)
checkboxes[1].dispatchEvent(changeEvent);
/******************************************************************************************************/
/*                                                  下拉框                                             */
/******************************************************************************************************/
var dropdownItems = document.querySelectorAll('.my-dropdown-menu-item');
// 遍历下拉项找到目标项
dropdownItems.forEach(function (item) {
    var label = item.querySelector('.my-option-label-wrapper span');
    if (label && label.textContent.trim() === '需要的内容') {
        // 模拟点击操作
        item.click();
    }
});
/******************************************************************************************************/
/*                                                   按钮                                             */
/******************************************************************************************************/
document.getElementsByClassName("my-btn-primary")[0].click()
相关推荐
Rhys..20 分钟前
python自动化中(包括UI自动化和API自动化)env的作用和使用
python·ui·自动化
成成成成成成果38 分钟前
Selenium八大元素定位实战指南
功能测试·自动化
将车2441 小时前
自动化测试脚本环境搭建
python·测试工具·自动化
大锦终2 小时前
【Linux】udp网络程序
linux·运维·服务器·网络
wanhengidc3 小时前
巨椰云手机引领未来
运维·服务器·网络·游戏·智能手机
wanhengidc3 小时前
云手机的真实体验感怎么样
运维·服务器·安全·游戏·智能手机
脏脏a3 小时前
【Linux】Linux工具漫谈:yum 与 vim,高效操作的 “左膀右臂”
linux·运维·服务器
悟能不能悟4 小时前
dcpatchscan.exe这是什么
运维·服务器
wanhengidc4 小时前
云手机 流畅运行
运维·服务器·安全·游戏·智能手机
云飞云共享云桌面4 小时前
广东某模具制造工厂用一台云服务器供8个研发设计同时用
linux·运维·服务器·网络·自动化·制造