需求：类似 LastPass 这种可以自动填充用户名密码，点击提交
难点：很多现代化的页面前端做了表单校验，直接赋值 input 的 value 不能通过表单校验
关键在于没能触发人家框架的 event listener
查资料咯，发现了这个解答 https://stackoverflow.com/a/35807417 就是触发 input 、keyup 、change 事件，但实际测试仍然不行，甚至我把在开发人员工具能看到的 event listner 全触发了一边都没用 sad function fireChangeEvents(element){ var changeEvent = null; for(var i of ["keypress","focus", "input", "keydown", "keyup", "change", "blur", "click", "invalid", "mouseover", "popstate", "reset", "scroll", "selectionchange", "submit", "transitionend"]){ changeEvent = document.createEvent ("HTMLEvents"); changeEvent.initEvent (i, true, true); element.dispatchEvent (changeEvent); } } fireChangeEvents(document.querySelectorAll("input")[0])
然后接着找，发现一个能模拟用户交互的 npm 包： https://github.com/testing-library/user-event
然后折腾了一下 browserify 打包成浏览器可以用的 js 文件，实际测试可行： userEvent.type(document.querySelectorAll("input")[0], USERNAME); userEvent.type(document.querySelectorAll("input")[1], PASSWORD);
问题是解决了，但觉得为了一个触发 event 引入一个 500KB 的 js 文件有点蠢（ uglify 之后也有 300KB ），问问大佬们有没有更好的方案，不需要引入这么重的 js 库的