表单自动化填写-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()
相关推荐
深度学习040711 分钟前
【Linux服务器】-安装ftp与sftp服务
linux·运维·服务器
小白爱电脑2 小时前
什么是2.5G交换机?
运维·网络·5g·千兆宽带
?ccc?2 小时前
容器技术技术入门与 Docker 环境部署
运维·docker·容器
时时刻刻看着自己的心2 小时前
docker启动报错
运维·docker·容器
我科绝伦(Huanhuan Zhou)3 小时前
华为泰山服务器重启后出现 XFS 文件系统磁盘“不识别”(无法挂载或访问),但挂载点目录仍在且无数据
运维·服务器·华为
匆匆那年9673 小时前
Docker容器中安装MongoDB,导入数据
运维·docker·容器
望获linux3 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
万米商云4 小时前
企业物资集采平台解决方案:跨地域、多仓库、百部门——大型企业如何用一套系统管好百万级物资?
大数据·运维·人工智能
挑战者6668884 小时前
CentOS 系统高效部署 Dify 全攻略
linux·运维·centos
网硕互联的小客服6 小时前
服务器经常出现蓝屏是什么原因导致的?如何排查和修复?
运维·服务器·stm32·单片机·网络安全