一、獲取元素信息
在頁面內執行 document.querySelector。
在頁面內執行 document.querySelectorAll。
解析指定的XPath表達式。
在頁面內執行 Array.from(document.querySelectorAll(selector))，然后把匹配到的元素數組作為第一個參數傳給 pageFunction。
//計算div的個數
const divsCounts = await page.$$eval('div', divs => divs.length);
在頁面內執行 document.querySelector，然后把匹配到的元素作為第一個參數傳給pageFunction。
//示例
const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const html = await page.$eval('.main-container', e => e.outerHTML);
執行腳本
//示例
const bodyHandle = await page.$('body');
const html = await page.evaluate(body => body.innerHTML, bodyHandle);
await bodyHandle.dispose();
此方法和 page.evaluate 的唯一區別是此方法返回的是頁內類型(JSHandle)
const aHandle = await page.evaluateHandle(() => document.body);
const resultHandle = await page.evaluateHandle(body => body.innerHTML, aHandle);
console.log(await resultHandle.jsonValue());
await resultHandle.dispose();
在所屬頁面的任意 script 執行之前被調用。常用於修改頁面js環境
// preload.js // 重寫 `languages` 屬性，使其用一個新的get方法 Object.defineProperty(navigator, "languages", { get: function() { return ["en-US", "en", "bn"]; } });
// 假設 preload.js 和當前的代碼在同一個目錄 const preloadFile = fs.readFileSync('./preload.js', 'utf8'); await page.evaluateOnNewDocument(preloadFile);
//示例 const handle = await page.evaluateHandle(() => ({window, document})); const properties = await handle.getProperties(); const windowHandle = properties.get('window'); const documentHandle = properties.get('document'); await handle.dispose();
二、模擬用戶操作
1.Page類
找到一個匹配 selector 選擇器的元素，如果需要會把此元素滾動到可視，然后通過 page.mouse 點擊它。
要注意如果 click() 觸發了一個跳轉，會有一個獨立的 page.waitForNavigation() Promise對象需要等待。 正確的等待點擊后的跳轉是這樣的：
const [response] = await Promise.all([
page.waitForNavigation(waitOptions),
page.click(selector, clickOptions),
]);
找到一個匹配selector的元素，並且把焦點給它
找到一個匹配的元素，如果需要會把此元素滾動到可視，然后通過 page.mouse 來hover到元素的中間。
當提供的下拉選擇器完成選中后，觸發change和input事件
page.select('select#colors', 'blue'); // 單選擇器
page.select('select#colors', 'red', 'green', 'blue'); // 多選擇器
每個字符輸入后都會觸發 keydown, keypress/input 和 keyup 事件
要點擊特殊按鍵，比如 Control 或 ArrowDown，用 keyboard.press
page.type('#mytextarea', 'Hello'); // 立即輸入
page.type('#mytextarea', 'World', {delay: 100}); // 輸入變慢，像一個用戶
2.Mouse類
每個 page 對象都有它自己的 Mouse 對象，使用見 page.mouse。
// 使用 ‘page.mouse’ 追蹤 100x100 的矩形。
await page.mouse.move(0, 0);
await page.mouse.down();
await page.mouse.move(0, 100);
await page.mouse.move(100, 100);
await page.mouse.move(100, 0);
await page.mouse.move(0, 0);
await page.mouse.up();
3.Keyboard類
按下 Shift 來選擇一些字符串並且刪除的例子:
await page.keyboard.type('Hello World!');
await page.keyboard.press('ArrowLeft');
await page.keyboard.down('Shift');
for (let i = 0; i < ' World'.length; i++)
await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');
await page.keyboard.press('Backspace');
// 結果字符串最終為 'Hello!'
按下 A 的例子:
await page.keyboard.down('Shift');
await page.keyboard.press('KeyA');
await page.keyboard.up('Shift');
三、選擇器語法
1.Document.querySelector()
格式:element = parentNode.querySelector(selectors);
2.Document.querySelectorAll()
格式：elementList = parentNode.querySelectorAll(selectors);
獲取文檔中所有<p>元素的NodeList。
獲取文檔中類名為 "myclass" 的元素的NodeList。
var matches = document.querySelectorAll("p");
var el = document.querySelector(".myclass");
獲取文檔中所有class包含"note"或"alert"的<div>元素的列表，：
var matches = document.querySelectorAll("div.note, div.alert");
獲取ID為"test"的容器內，其直接父元素是一個class為"highlighted"的div的所有<p>元素的列表。
var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p");
獲取class為"select"的容器內，其祖先元素是一個class為"outer"的下的所有class為“inner"的元素列表。(這里即使outer不在select內，inner也會被找到)
var select = document.querySelector('.select'); var inner = select.querySelectorAll('.outer .inner');
獲取文檔中屬性名為"data-src"的iframe元素列表：
var matches = document.querySelectorAll("iframe[data-src]");
獲取列表后，再找匹配項
var highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach(function(userItem)
{ deleteUser(userItem);
});
四、使用示例
1.獲取所有鏈接的href、title信息
await page.goto('https://segmentfault.com/news/frontend')
var SfFeArticleList = await page.evaluate(() => {
var list = [...document.querySelectorAll('.news__list .news__item-title a')]
return list.map(el => {
return {
href: el.href.trim(),
title: el.innerText
}
})
})
2.獲取屬性為某個值的元素
var login = await page.$('.login') await login.click() var loginPhoneOrEmail = await page.$('[name=loginPhoneOrEmail]') await loginPhoneOrEmail.click() await page.type('123456789@163.com', {delay: 20}) var password = await page.$('[placeholder=請輸入密碼]') await password.click() await page.type('123456', {delay: 20}) var authLogin = await page.$('.panel .btn') await authLogin.click()
3.獲取符合條件的元素，再過濾，並點擊
await page.evaluate(() => { let li = [...document.querySelectorAll('.category-list-box .category-list .item')] li.forEach(el => { if (el.innerText == '前端') el.click() }) }) var submitBtn = await page.$('.submit-btn') await submitBtn.click()
4.找到元素
const result = await page.evaluate(() => { let $ = window.$; let nodeItems = $('.list-wp a'); let links = []; /* 獲取對應的元素節點 */ if(nodeItems.length >= 1) { nodeItems.each((index, item) => { let elem = $(item); let movieId = elem.find('div').data('id'); let title = elem.find('.title').text(); let rate = Number(elem.find('.rate').text()); let poster = elem.find('img').attr('src').replace('s_ratio_poster','l_ratio_poster'); links.push({ movieId, title, rate, poster, }) }) } return links; });