表单自动化填写-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()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/60965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

后端分层解耦

引入 在上篇所举的例子中,我们将所有的代码均放在HelloControl方法之中,这样会导致代码的复用性、可读性较差,难以维护。因此我们需 三层架构 在之前的代码中,代码大体可以分为三部分:数据访问、数据逻辑处理、响应数…

97.【C语言】数据结构之栈

目录 栈 1.基本概念 2.提炼要点 3.概念选择题 4.栈的实现 栈初始化函数 入栈函数 出栈函数和栈顶函数 栈顶函数 栈销毁函数 栈 基本概念参见王爽老师的《汇编语言 第四版》第56和57页 节选一部分 1.基本概念 注意:这里提到的数据结构中的栈有别于操作系统的栈,后者是…

初识算法 · 模拟(1)

目录 前言: 替换所有的问号 题目解析 算法原理 算法编写 提莫攻击 题目解析 算法原理 算法编写 外观数列 题目解析 算法原理 算法编写 前言: ​本文的主题是模拟,通过三道题目讲解,一道是提莫攻击,一道是…

Controller Baseband commands速览

目录 一、设备连接与通信控制类(34条) 1.1. 连接参数相关 1.1.1. 连接建立超时设置 1.1.2. 链路监督超时设置 1.1.3. Page操作超时设置 1.1.4. 扩展Page操作超时设置 1.1.5. 安全连接主机支持 1.2. 扫描操作相关 1.2.1. 扫描启用与禁用 1.2.2.…

【数值分析】高斯-赛德尔方法、规范化幂法、原点移位法

【数值分析】高斯-赛德尔方法、规范化幂法、原点移位法 题目 要求 代码实现过程不能调用任何库函数自带的“线性 方程组求解、特征值求解库函数” 利用高斯-赛德尔方法求解上述线性方程组 使用Python编程求解矩阵A与列向量b import numpy as np import sympy as spdef crea…

【CUDA】了解GPU架构

目录 一、初步认识 二、Fermi架构 三、Kepler 架构 3.1 动态并行 3.2 Hyper-Q 一、初步认识 SM(Streaming Multiprocessors)是GPU架构中非常重要的部分,GPU硬件的并行性就是由SM决定的。以Fermi架构为例,其包含以下主要组成…

64位程序调用32位dll解决方案

最近在做64位代码移植,发现很多老代码使用到了第三方的32位dll;而且这些第三方32位dll库已经年代久远,原开发商已不再了;所以急切的需要在64位主程序 中使用老的32位dll;查询很多解决方案 发现目前只有使用com 进程外组件的方法可以解决此问题…

【HOT100第五天】搜索二维矩阵 II,相交链表,反转链表,回文链表

240.搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性: 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 先动手写写最简单方法,二重循环。 class Solution { public:bool searchMa…

模板元函数应用:输出字符串。

看下面三个字符串,s1,s2,s3 : string s1 "逆天邪神";wstring s2 _t("焚星妖莲");_string s3 "焚绝尘"; 在控制台输出字符串,可能的一个方案是: void print_test(const wstring& s) {std::…

pytest | 框架的简单使用

这里写目录标题 单个文件测试方法执行测试套件的子集测试名称的子字符串根据应用的标记进行选择 其他常见的测试命令 pytest框架的使用示例 pytest将运行当前目录及其子目录中test_*.py或 *_test.py 形式的所有 文件 文件内的函数名称可以test* 或者test_* 开头 单个文件测试…

【C++】类和对象-深度剖析默认成员函数-上

> 🍃 本系列为初阶C的内容,如果感兴趣,欢迎订阅🚩 > 🎊个人主页:[小编的个人主页])小编的个人主页 > 🎀 🎉欢迎大家点赞👍收藏⭐文章 > ✌️ 🤞 &#x1…

Web性能优化:从基础到高级

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 Web性能优化:从基础到高级 Web性能优化:从基础到高级 Web性能优化:从基础到高级 引言 基础优…

当 docker-compose.yaml 文件部署时,Dify 线上版本升级过程

如果线上 Dify 是通过 docker-compose.yaml 文件部署的,那么当 Dify 版本升级时该如何操作呢?官方已经给出了 Docker compose 和 Source Code 两种方式。相对而言,前者更简单些,至少不需要安装依赖包和迁移数据库文件。为了更加具…

如何让手机ip变成动态

在数字化浪潮中,手机已成为我们日常生活中不可或缺的一部分。无论是浏览网页、使用社交媒体还是进行在线购物,手机都扮演着举足轻重的角色。然而,在享受网络带来的便利时,我们也需要关注网络安全和隐私保护。静态IP地址可能让手机…

elementPlus + table 树形懒加载,子节点的刷新

文章目录 需求描述技术细节小结 需求描述 一个树形表格的增删查改 技术细节 刚开始想的很好,新增/编辑/删除时不调用接口,而是直接更改数据,如删除时,直接删除对应下标的数据 遇到的问题 实际业务中是否有子级,是不…

vue3 如何调用第三方npm包内部的 pinia 状态管理库方法

抛砖引玉: 如果在开发vue3项目是, 引用了npm第三方包 ,而且这个包内使用了Pinia 状态管理库,那我们如何去调用 npm内部的 Pinia 状态管理库呢? 实际遇到的问题: 今天在制作npm包时遇到的问题,之前Vue2版本的时候状态管理库用的Vuex ,当时调用npm包内的状态管理库很简单,直接引…

Linux笔记---调试工具GDB(gdb)

1. gdb的概念 GDB,全称GNU Debugger,是一个功能强大的开源调试工具,广泛用于Unix和类Unix系统,以及Microsoft Windows和macOS平台。GDB允许开发者在程序执行过程中查看内部运行情况,帮助定位和修复程序中的错误。 gd…

WSL2 ubuntu配置redis

安装redis sudo apt-get update sudo apt-get install redis启动redis-server sudo service redis-server start访问redis sudo redis-cli修改redis配置 su # root用户 vim /etc/redis/redis.conf找到# requirepass foobared,将这行去掉注释, fooba…

FFmpeg源码:avio_read_partial函数分析

AVIOContext结构体和其相关的函数分析: FFmpeg源码:avio_r8、avio_rl16、avio_rl24、avio_rl32、avio_rl64函数分析 FFmpeg源码:read_packet_wrapper、fill_buffer函数分析 FFmpeg源码:avio_read函数分析 FFmpeg源码&#xff…

编译器gcc/g++

gcc 只用来编译C g 编译C/C 1.预处理(进行宏替换/去注释/条件编译/头文件展开等) 先创建 code.c 文件 -E --> 从现在开始,进行程序的翻译,一旦预处理做完,就停下来 -o --> 表明 -o 后面的文件名称 code…