基于 puppeteer 的一些实例应用,本教程仅用来做技术交流使用,请勿用于商业行为。
如果您也用puppeteer
做一些有趣的事儿,欢迎交流。
针对百度图片搜索的爬虫,此类页面特点:
- 滚动加载,加载图片
- 请求接口,接口会变
- 页面结构会变
为什么使用puppeteer
?
因为 api 简洁,对于其他的,前端更易上手。 使用 puppeteer 的好处,可以无视 dom 变化,无视接口变化。因为 puppeteer,可以操作浏览器滚动加载等行为,同时可以监听请求,拿到 header 信息等。具体代码可以查看
可执行下列命令运行实例:
git clone https://github.com/ijs/puppeteer-usage.git
cd puppeteer-usage
yarn install
node src/samples/scrawler/pic.baidu.com.js 卡通
如果需要爬取其他类似页面(如 google, weibo, flickr, huaban)等,请自行修改代码中的 url 地址即可
以之前接手的公司的一个项目贷款超市为例,模拟用户行为。
原则:首先保证页面正常显示 > 干掉所有的运行时的异常 > 干掉前端层面过慢的因素
- 测试所有的页面,是否能正常显示,以下指标
- 界面是否出现
- 白屏时间
- ui 显示是否正常,评判标准是什么?
- 兼容性测试如何测 ?
- 功能测试
- 哪些功能是需要通过编写测试用例测试的
- 接口
- 如何防止测试数据污染业务统计数据
- 可以通过注入参数的形式,在业务统计模块加一层判定即可解决
- 也可以在页面中注入全局变量解决
- 如何和 ui 稿对比,确保一致性
目前想到的方法:通过截屏,人肉对比,标注; 更科学的方案page-diff
- 以不同机型,先访问页面,并且截屏,确保可用性
截屏为了存储大小,截屏为 jpg,质量为 0.6,全页面截屏。我们这里通过人肉判定对比。
- 模拟交互行为,确定核心功能可用性
- 首页入口是否可点击,与 1 中的功能其实是相似的
- 知乎图片爬取
- 增加 LOG
- 集成 Docker
- 暴露接口
- 图片显示界面