网页重复操作脚本

上周帮朋友处理一个后台系统，需要把 300 多条订单逐条点开、重复复制单号、操作粘贴到表格里。脚本他手动干了半小时，网页眼睛都快对眼了。重复我打开控制台敲了十几行代码，操作三分钟跑完。脚本他愣住：“你刚才干了啥？网页”——这就是网页重复操作脚本最直接的用处：把浏览器里那些机械点击、填表、重复翻页的操作活儿，交给几行 JavaScript。脚本

别被“脚本”俩字吓到。网页你不需要装 Python、重复不用学 Selenium，操作浏览器自带的环境就能搞定。按 F12 打开开发者工具，切到 Console 面板，直接写代码。比如你想自动点击页面上所有“展开”按钮，一行就够：

这行代码干了什么？querySelectorAll 把所有带 .expand-btn 类的按钮抓出来，forEach 挨个调用 click()。没有循环嵌套，没有异步等待，纯粹到像在记事本里敲字。我第一次用这招是批量下载公司内网的技术文档——每个文档链接都藏在一个“更多”按钮后面，手动点开再右键另存，五十个文件能磨掉一上午。脚本跑完只用了七秒，我盯着屏幕有点恍惚。

但真实网页不会这么乖。按钮可能动态加载，点击后要等半秒才出内容，或者需要先滚动到可视区域。这时候得加一点“等待”逻辑。不是那种 setTimeout 硬等三秒的笨办法——太慢，而且网络一卡就崩。更好的方式是轮询检查某个元素是否出现：

这段代码我在电商后台抓价格时反复用。页面有个“加载更多”按钮，点完要等两秒才刷出新商品。用 waitFor('.product-item:last-child') 就能精准卡住时机，既不浪费等待，也不会点空。有个细节：await 只能在 async 函数或模块顶层用。如果你直接在 Console 里写，记得包一层 (async () => { ... })()，否则会报语法错误。我第一次踩这坑时对着红色报错看了半天，还以为浏览器坏了。

另一个高频场景是表单填充。比如测试环境要反复提交假数据，手动输几十遍邮箱、手机号、地址。写个脚本随机生成再塞进去：

注意，直接改 value 有时不会触发 React/Vue 的绑定。页面看着填了，提交却报空。这时候得手动派发 input 事件：el.dispatchEvent(new Event('input', { bubbles: true }))。这行代码救过我一次——当时给一个 Vue 后台批量导入用户，死活提示“邮箱不能为空”，明明输入框里文字都亮着。加上事件派发后，表单终于认了。

脚本写多了会形成肌肉记忆。看到分页列表就想 while 循环点下一页，看到勾选框就想 querySelectorAll('input[type=checkbox]').forEach(c => c.checked = true)。但得留个心眼：有些网站会检测自动化操作，比如监听 click 事件的 isTrusted 属性。脚本触发的点击 isTrusted 是 false，可能被拦截。绕过方法不是没有，但那就进入灰色地带了。我的原则很简单：只操作自己有权访问的页面，不碰验证码、不绕频率限制。脚本是省力的，不是用来钻空子的。

最后说个真实翻车案例。有次我写了个脚本自动翻页抓评论，跑了两百页后浏览器崩了——内存爆了。因为每次翻页都往数组里塞数据，没做清理。后来改成每五十页输出一次到控制台，手动复制走，再清空数组。脚本不是越自动越好，有时候半自动更稳。就像电钻能打孔，但你不会拿它当锤子用。

如果你现在就想试，打开任意一个列表页，在 Console 里敲：document.querySelectorAll('a').forEach(a => console.log(a.href))。看到满屏链接刷出来那一刻，你就明白这玩意儿为什么让人上瘾了。