puppeteer 完整教程 常用api

目标

将 常用api 与相关完整api链接推荐

链接推荐

1.puppeteer api

中文 https://zhaoqize.github.io/puppeteer-api-zh_CN/
内部开发api https://chromedevtools.github.io/devtools-protocol/tot/Page

2.puppeteer 开源项目地址

https://github.com/GoogleChrome/puppeteer

3. xpath语法教程

https://www.runoob.com/xpath/xpath-functions.html

4. css语法

https://www.runoob.com/cssref/css-selectors.html

5. puppeteer教程相关代码

https://gitee.com/hugo110/puppeteer-demo

个人常用api 与猿友常用api

ps: https://zhaoqize.github.io/puppeteer-api-zh_CN/ 介绍的很全面，所以我就是提示一下常用的方法和大概解释+个人经验了

1.Browser

方法名称	方法说明	个人经验
browser.newPage()	创建一个 Page 实例
browser.close()	关闭浏览器	注意catch住异常关闭，避免浏览器进程没有关闭掉，耗费系统资源
browser.pages()	获取所有打开的 Page 实例	打开多个tab页处理时切换page特别有用

2.page 常用

方法名称	方法说明	个人经验
puppeteer.launch	启动浏览器	调试时推荐slowMo，headless，devtools 这三个参数
page.goto(url)	打开指定网站	注意使用它的waitUntil参数，默认是load，有时会超时
page.screenshot	把当前页面截图	不但可以截图也可以截取元素的图片奥
Page.$(selector)	获取单个元素，底层是调用的是 document.querySelector()
Page.$$(selector)	获取一组元素，底层调用的是 document.querySelectorAll()	注意返回的参数经过Array.form了，可能有些参数不能够使用
Page.$eval()	此方法在页面内执行 document.querySelector，然后把匹配到的元素作为第一个参数传给 pageFunction	是在在浏览器实例上下文中要执行的方法
page.$$eval(selector, pageFunction[, …args])	此方法在页面内执行 Array.from(document.querySelectorAll(selector))，然后把匹配到的元素数组作为第一个参数传给 pageFunction
page.click()	点击一个元素
Page.emulate	修改模拟器(客户端)运行配置，模拟设备，参数设备对象，比如 iPhone, Mac, Android 等

3.page waitFor 系列 API

很重要，所以拿出来单独列一下

方法名称	方法说明	个人经验
page.waitFor	下面四个个的综合 API，不写就类似于java的Thread.sleep
page.waitForFunction(pageFunction[, options[, …args]])	等待 pageFunction 执行完成之后
page.waitForNavigation(options)	等待页面基本元素加载完之后，比如同步的 HTML, CSS, JS 等代码
page.waitForSelector(selector[, options])	css语法，等待某个选择器的元素加载之后，这个元素可以是异步加载的
page.waitForXPath(xpath[, options])	xpath语法，等待某个选择器的元素加载之后，这个元素可以是异步加载的

3.page 进阶

方法名称	方法说明	个人经验
page.evaluate(pageFunction, …args)	返回一个可序列化的普通对象，pageFunction 表示要在页面执行的函数， args 表示传入给 pageFunction 的参数， 下面的 pageFunction 和 args 表示同样的意思。	注意是在浏览器页面执行
Page.evaluateHandle(pageFunction, …args)	在 Page 上下文执行一个 pageFunction, 返回 JSHandle 实体	Page 上下文执行
page.evaluateOnNewDocument(pageFunction, …args),	在文档页面载入前调用 pageFunction, 如果页面中有 iframe 或者 frame, 则函数调用 的上下文环境将变成子页面的，即iframe 或者 frame, 由于是在页面加载前调用，这个函数一般是用来初始化 javascript 环境的，比如重置或者 初始化一些全局变量
Page.exposeFunction	此方法添加一个命名为 name 的方法到页面的 window 对象 当调用 name 方法时，在 node.js 中执行 puppeteerFunction，并且返回 Promise 对象，解析后返回 puppeteerFunction 的返回值	使用时会变成全局的，也可以引用你的类库

参考博客

1.Puppeteer 入门教程
http://www.r9it.com/20171106/puppeteer.html
2.puppeteer学习笔记（五）–API问题解决–使用功能强大的“ eval ”函数
https://www.jianshu.com/p/aa2159356fbd
3.puppeteer自动化测试系列之二—puppeteer常用方法
https://www.cnblogs.com/paris-test/p/9707852.html
4.puppeteer自动化测试系列之三—端对端测试中常用的 Puppeteer 操作
https://www.cnblogs.com/paris-test/p/9711423.html
5.puppeteer自动化测试系列之 五—常见问题
https://www.cnblogs.com/paris-test/p/9713782.html