表单自动化填写-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()
相关推荐
GeekAGI28 分钟前
ansible-playbook -e 传递变量
运维
chenzfp39 分钟前
【运维】鲲鹏麒麟V10 操作系统aarch64自制OpenSSH 9.8p1 rpm包 ssh漏洞修复
运维·ssh
6190083361 小时前
linux 安装jdk
java·linux·运维
可涵不会debug1 小时前
UU远程深度测评:重构远程控制体验的“无套路”标杆
运维·服务器
峰顶听歌的鲸鱼1 小时前
1.云计算与服务器基础
运维·服务器·笔记·云计算·学习方法
IDOlaoluo1 小时前
dotnet-sdk-5.0.400-linux-x64.tar.gz 安装教程(Linux 手动安装 .NET 5.0.400 SDK 步骤)
运维·服务器
2501_915918411 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview
FreeBuf_2 小时前
微软数字防御报告:AI成为新型威胁,自动化漏洞利用技术颠覆传统
人工智能·microsoft·自动化
扶尔魔ocy2 小时前
【DIY】RS232串口监听头制作
运维·rs232
迎風吹頭髮2 小时前
Linux服务器编程实践60-双向管道:socketpair函数的实现与应用场景
linux·运维·服务器