- 官方英文版API入口（如果你英文好的話）：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
- 漢化版API入口（網(wǎng)上有很多版本，有興趣可以多去搜一些）：https://yq.aliyun.com/articles/607102.
首先看一段中文版API的解釋：
在這里插入圖片描述
更多我就我解釋了，官方和中文版的API已經(jīng)很詳細(xì)了，
接下來我就上一個例子來介紹常用的功能：
新建eval.html
<!DOCTYPE html>
<html>
<head>
<title>eval-demo</title>
</head>
<body>
<input type="text" value="第一次輸入內(nèi)容" id="input_01">
<input type="text" value="第二次輸入內(nèi)容" id="input_02">
<a style="padding-left: 50px" id="click">點(diǎn)擊進(jìn)入百度</a>
<hr>
<div id="div_text" style="height: 200px;width: 150px;overflow: auto;" >
<p>
page.$eval(selector, pageFunction[, ...args])
selector <string> 一個selector查詢頁面page
pageFunction <function> 在瀏覽器上下文中求值函數(shù)
...args <...Serializable|JSHandle> 傳遞給pageFunction的參數(shù)
returns: <Promise<Serializable>> Promise解析為pageFunction的返回值
該方法在頁面內(nèi)運(yùn)行document.querySelector，并將其作為第一個參數(shù)傳遞給pageFunction。 如果沒有與selector匹配的元素，則該方法將引發(fā)錯誤。
如果pageFunction返回一個Promise，那么page.$eval會等待承諾解析并返回它的值。
Examples:
</p>
</div>
</body>
</html>
新建demo.js 文件
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();
//goto里面的網(wǎng)址記得換成自己的
await page.goto('file:///MAC/Study/27.Puppeteer/case/eval.html');
// 點(diǎn)擊元素
await page.waitFor(3000);
await page.$eval('#click',a => a.click() );
await page.waitFor(2000);
await page.goBack();
//清空輸入框的值
await page.$eval('#input_01',input => input.value='' );
// 清空輸入框的值，并且輸入新的值
await page.$eval('#input_02',input => input.value='清空原來的值，輸入新的' );
// 得到標(biāo)簽之間的文本
const a_text = await page.$eval('#click',a => a.innerText );
console.log(a_text);
// 得到標(biāo)簽內(nèi)部的屬性值
const div_text = await page.$eval('#div_text',div => div.id );//得到div標(biāo)簽id的值
console.log(div_text);
const a_link = await page.$eval('#click',a => a.href );//得到a標(biāo)簽href的值
console.log(a_link);
const input_value = await page.$eval('#input_02',input => input.value );//得到input標(biāo)簽value的值
console.log(input_value);
// 得到整個HTML標(biāo)簽的所有內(nèi)容
const html = await page.$eval('#input_02',input => input.outerHTML );//得到input標(biāo)簽value的值
console.log(html);
// 移動div內(nèi)嵌式滾動條，多種方式
// 1、可以同時左右移動和上下 的,第一個參數(shù)是控制左右移動的值，第二個參數(shù)是控制上下移動的值
await page.$eval('#div_text',div => div.scrollTo(1000,1000) );
// 2、只上下移動和只是左右移動
await page.waitFor(2000);
await page.$eval('#div_text',div => div.scrollTop=10 );//上下移動
await page.$eval('#div_text',div => div.scrollLeft=10 );//左右移動
//移除標(biāo)簽的屬性
await page.$eval('#div_text',div => div.removeAttribute('id') );//移除div中id的值
// 更改標(biāo)簽中屬性的值
await page.$eval('#input_02',div => div.setAttribute('value','test') );//更改div中class的值
// 如果標(biāo)簽沒有該屬性，就會新增這個屬性
await page.$eval('#input_02',div => div.setAttribute('class','test') );//更改div中class的值
// 等待3秒后退出瀏覽器
await page.waitFor(3000);
await browser.close();
})();
好啦腳本和html文件已經(jīng)創(chuàng)建好啦，自己運(yùn)行看下效果，接下來就開始進(jìn)行分析啦：
1、點(diǎn)擊元素，這個好像沒什么用呢，puppeteer自帶的就有tap()和click()函數(shù)
// 點(diǎn)擊元素
await page.waitFor(3000);
await page.$eval('#click',a => a.click() );
2、清空輸入框的值、在puppeteer中type()函數(shù)是不清空的輸入，有時候想要清空一個文本在輸入，這個時候就派上用場了。
//清空輸入框的值
await page.$eval('#input_01',input => input.value='' );
3、清空輸入框并且 輸入一個新的值，和第二個語法一樣，只是在value后面加入要輸入的值
// 清空輸入框的值，并且輸入新的值
await page.$eval('#input_02',input => input.value='清空原來的值，輸入新的' );
4、UI自動化中斷言需要得到頁面的文本進(jìn)行對比，來判斷是否通過，框架里面好像沒有得到文本的函數(shù)呢
// 得到標(biāo)簽之間的文本
const a_text = await page.$eval('#click',a => a.innerText );
console.log(a_text);//打印出文本
5、得到標(biāo)簽內(nèi)部的屬性值，如果想要用的話
// 得到標(biāo)簽內(nèi)部的屬性值
const div_text = await page.$eval('#div_text',div => div.id );//得到div標(biāo)簽id的值
console.log(div_text);
const a_link = await page.$eval('#click',a => a.href );//得到a標(biāo)簽href的值
console.log(a_link);
const input_value = await page.$eval('#input_02',input => input.value );//得到input標(biāo)簽value的值
console.log(input_value);
6、得到整個HTML標(biāo)簽的所有內(nèi)容
// 得到整個HTML標(biāo)簽的所有內(nèi)容
const html = await page.$eval('#input_02',input => input.outerHTML );//得到input標(biāo)簽value的值
console.log(html);
7、移動div內(nèi)嵌式滾動條，好多的元素必須移動滾動條才能顯示出來，進(jìn)行操作，這時候就會派上用場了,三種移動方式，最常用的是第一種
// 移動div內(nèi)嵌式滾動條，多種方式
// 1、可以同時左右移動和上下 的,第一個參數(shù)是控制左右移動的值，第二個參數(shù)是控制上下移動的值
await page.$eval('#div_text',div => div.scrollTo(1000,1000) );
// 2、只上下移動和只是左右移動
await page.waitFor(2000);
await page.$eval('#div_text',div => div.scrollTop=10 );//上下移動
await page.$eval('#div_text',div => div.scrollLeft=10 );//左右移動
8、第7個是div內(nèi)嵌式滾動條，但有時候滾動條是全頁面的不是某個標(biāo)簽的，這個時候就不能用上面這個函數(shù)了，需要另外一個函數(shù)evaluate(),重新寫一個百度的腳本，參數(shù)和第7個的一樣，自己可以試著運(yùn)行下
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();
await page.goto('https://www.baidu.com/');
await page.setViewport({height:400,width:500});//設(shè)置成小窗口模式
// 1、可以同時左右移動和上下的,第一個參數(shù)是控制左右移動的值，第二個參數(shù)是控制上下移動的值
await page.waitFor(2000);
await page.evaluate(() => window.scrollTo(1000,1000) );
//等待3秒后退出瀏覽器
await page.waitFor(2000);
await browser.close();
})();
9、操作標(biāo)簽的屬性：移除、修改、增加
//移除標(biāo)簽的屬性
await page.$eval('#div_text',div => div.removeAttribute('id') );//移除div中id的值
// 更改標(biāo)簽中屬性的值
await page.$eval('#input_02',div => div.setAttribute('value','test') );//更改div中class的值
// 如果標(biāo)簽沒有該屬性，就會新增這個屬性
await page.$eval('#input_02',div => div.setAttribute('class','test') );//位input標(biāo)簽新增class的屬性和值
現(xiàn)在經(jīng)常用的是這幾個，當(dāng)然如果想要用其他的可以去了解一下，我這邊就不過多介紹了
地址：打開谷歌的F12開發(fā)者模式，進(jìn)入console控制臺進(jìn)行查看有更多的操作，所有的API都可以看到。
image
