一、场景
在日常工作、生活中常常会遇到需要填写、提交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()