好用的 Puppeteer 辅助工具 Puppeteer Recorder
Puppeteer
Puppeteer 是一个Node
库,它提供了一个高级API
来控制DevTools
协议上的Chrome
或Chromium
,常用于爬虫、自动化测试等,你在浏览器手动完成的大多数事情都可以使用它来完成。
站内有很多文章介绍Puppeteer
,此处就不再介绍。
但是
但是无论是爬虫还是自动化测试,你要写Puppeteer
脚本,首先你得分析网页,并且讲道理,每个网站还都不一样,这就很尴尬。
Puppeteer Recorder
Puppeteer Recorder 是Chrome
扩展程序,可记录你的浏览器交互并生成Puppeteer
脚本。
下图是以segmentfault
点击排行榜上用户加关注为栗子录制的脚本。看上去是不是很有规律,写入cookie
再改成for
循环,一个自动加关注的脚本就完成了。
注意事项
目前这个项目还比较简单,通过分析几种event
生成代码,这样还是会有比较多的问题。
比如,最后得到selector
和点击前的selector
不一致。selector
是js
脚本动态生成,需要waitFor
去等待等等。
这些问题本身也是开发前分析网页甚至debug
需要遇到的问题,改成自动脚本仍需注意。
以下为部分源码
_parseEvents (events) {
console.debug(`generating code for ${events.length} events`)
let result = ''
for (let event of events) {
const { action, selector, value, href, keyCode } = event
switch (action) {
case 'keydown':
result += this._handleKeyDown(selector, value, keyCode)
break
case 'click':
result += this._handleClick(selector, href)
break
case 'goto*':
result += ` await page.goto('${href}')\n`
break
case 'reload':
result += ` await page.reload()\n`
break
}
}
return result
}
_handleKeyDown (selector, value, keyCode) {
if (keyCode === 9) return ` await page.type('${selector}', '${value}')\n`
return ''
}
参考
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。
leftstick赞 64阅读 45.1k评论 18
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...
乌柏木赞 143阅读 12k评论 10
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 60阅读 6k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 39阅读 6.2k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 39阅读 7.1k评论 6
【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...
Jerry赞 35阅读 2.9k
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...
乌柏木赞 32阅读 6.1k评论 9
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。