Skip to content

Latest commit

 

History

History
78 lines (48 loc) · 2.48 KB

README.md

File metadata and controls

78 lines (48 loc) · 2.48 KB

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 显示是否正常,评判标准是什么?
  • 兼容性测试如何测 ?
  1. 功能测试
  • 哪些功能是需要通过编写测试用例测试的
  • 接口

问题

  1. 如何防止测试数据污染业务统计数据
  • 可以通过注入参数的形式,在业务统计模块加一层判定即可解决
  • 也可以在页面中注入全局变量解决
  1. 如何和 ui 稿对比,确保一致性

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

测试实现

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

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

  1. 模拟交互行为,确定核心功能可用性
  • 首页入口是否可点击,与 1 中的功能其实是相似的

TODO

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