共计 1666 个字符,预计需要花费 5 分钟才能阅读完成。
页面元素应用.click()没有反馈怎么办?
如果是 React 开发的页面大概率是因为没有设置事件监听器。
先来看看有没有绑定事件监听器:F12 -> CTRL+SHIFT+C 审查元素 -> Event Listeners 选项卡
- 有绑定事件监听器的元素:
- 没有绑定事件监听器的元素:
没有绑定事件监听器的元素的解决办法:
const ele = document.querySelector("#nameZh");
const prop = Object.keys(zh).find(p => p.startsWith('__reactEventHandlers'));
console.log(ele[prop]);
下面最要害的代码是第二行变量 prop 的获取,利用遍历键值,获取 react 元素绑定的办法。
而后触发这些事件。
let mousedown = new Event("mousedown" ,{ "bubbles": true, "cancel" : true, "composed": true});
let keyup = new Event('keyup' ,{ "bubbles": true, "cancel" : true, "composed": true});
var click = new Event('click' ,{ "bubbles": true, "cancel" : true, "composed": true});
let ele = document.querySelector("selector")
ele.dispatchEvent(mousedown)
ele.dispatchEvent(keyup)
ele.dispatchEvent(click)
如何一步步的执行代码,不应用异步操作?
把函数都封装返回成 Promise
例子:```
// 填充指定 input 框
// @param {string} selector
// @param {string} content
const fillInput = (selector, content) => {
return new Promise(resolve => {setTimeout(() => {var mousedown = new Event("mousedown", { "bubbles": true, "cancel": true, "composed": true});
var keyup = new Event('keyup', { "bubbles": true, "cancel": true, "composed": true});
let ele = document.querySelector(selector)
ele.focus();
document.execCommand("inserttext", false, content)
ele.dispatchEvent(mousedown);
ele.dispatchEvent(keyup);
// console.log(selector)
resolve();}, 300);
})
}
调用:fillInput(zhTitSelector, zh_title)
.then(() => fillInput(zhContSelector, zh_content))
.then(() => fillInput(enTitSelector, en_title))
.then(() => fillInput(enContSelector, en_content))
```
扭转了 input 值,然而无奈通过校验,点击保留值会清空
有 2 个 可能 的计划,
-
事件监听按程序执行,例如:
focus 聚焦 -> input 输出内容 -> change 内容扭转 -> blur 勾销聚焦
如果事件监听器有这些,按下面的办法一个个触发,
- 调用 document.execCommand(“inserttext”, false, “username”) API,
这个 api 能够模仿人的操作,然而已从相干的 web 规范中移除,2023 年 2 月 20 日对我我的项目有用
我参考的文章
- 油猴脚本开发指南
- 通过 js 脚本扭转 input 元素的 value 值时无奈触发 change 事件的解决方案
正文完
发表至: javascript
2023-02-20