puppeteer-usage

基于 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 地址即可

自动化测试

以之前接手的公司的一个项目贷款超市为例，模拟用户行为。

测试思考

原则：首先保证页面正常显示 > 干掉所有的运行时的异常 > 干掉前端层面过慢的因素

1. 测试所有的页面，是否能正常显示，以下指标

• 界面是否出现
• 白屏时间
• ui 显示是否正常，评判标准是什么？
• 兼容性测试如何测 ?

2. 功能测试

• 哪些功能是需要通过编写测试用例测试的
• 接口

问题

1. 如何防止测试数据污染业务统计数据

• 可以通过注入参数的形式，在业务统计模块加一层判定即可解决
• 也可以在页面中注入全局变量解决

2. 如何和 ui 稿对比，确保一致性

目前想到的方法：通过截屏，人肉对比，标注； 更科学的方案page-diff

测试实现

1. 以不同机型，先访问页面，并且截屏，确保可用性

截屏为了存储大小，截屏为 jpg，质量为 0.6，全页面截屏。我们这里通过人肉判定对比。

2. 模拟交互行为，确定核心功能可用性

• 首页入口是否可点击，与 1 中的功能其实是相似的

TODO

• 知乎图片爬取
• 增加 LOG
• 集成 Docker
• 暴露接口
• 图片显示界面