表单自动化填写-JavaScript脚本

一、场景

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

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

二、代码示例

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

/******************************************************************************************************/
/*                                               搜索框                                                */
/******************************************************************************************************/
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()