页面元素应用.click()没有反馈怎么办？

如果是React开发的页面大概率是因为没有设置事件监听器。

先来看看有没有绑定事件监听器：
F12 -> CTRL+SHIFT+C 审查元素 -> Event Listeners选项卡

  1. 有绑定事件监听器的元素：
  2. 没有绑定事件监听器的元素：

没有绑定事件监听器的元素的解决办法：

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个可能的计划，

  1. 事件监听按程序执行，例如：

    focus聚焦 -> input输出内容 -> change内容扭转 -> blur勾销聚焦

    如果事件监听器有这些，按下面的办法一个个触发，

  2. 调用document.execCommand("inserttext", false, "username") API,
    这个api能够模仿人的操作，然而已从相干的 web 规范中移除，2023年2月20日对我我的项目有用

我参考的文章

  • 油猴脚本开发指南
  • 通过js脚本扭转input元素的value值时无奈触发change事件的解决方案