puppeteer學習筆記（五）--API問題解決--使用功能強大的「 eval 」函數

時間 2019-11-17

標籤 puppeteer 學習筆記 api 問題解決使用功能強大 eval 函數简体版

原文原文鏈接

官方英文版API入口（若是你英文好的話）：github.com/GoogleChrom….
漢化版API入口（網上有不少版本，有興趣能夠多去搜一些）：yq.aliyun.com/articles/60….

首先看一段中文版API的解釋：

更多我就我解釋了，官方和中文版的API已經很詳細了，接下來我就上一個例子來介紹經常使用的功能：新建eval.html

<!DOCTYPE html>
<html>
<head>
	<title>eval-demo</title>
</head>
<body>
	<input type="text" value="第一次輸入內容" id="input_01">
	<input type="text" value="第二次輸入內容" id="input_02">
	<a href="https://www.baidu.com/" style="padding-left: 50px" id="click">點擊進入百度</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> 在瀏覽器上下文中求值函數
		...args <...Serializable|JSHandle> 傳遞給pageFunction的參數
		returns: <Promise<Serializable>> Promise解析爲pageFunction的返回值
		該方法在頁面內運行document.querySelector，並將其做爲第一個參數傳遞給pageFunction。 若是沒有與selector匹配的元素，則該方法將引起錯誤。
		若是pageFunction返回一個Promise，那麼page.$eval會等待承諾解析並返回它的值。
		Examples:
		</p>
	</div>
</body>
</html>
複製代碼

新建demo.js 文件javascript

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  //goto裏面的網址記得換成本身的
  await page.goto('file:///MAC/Study/27.Puppeteer/case/eval.html');

  // 點擊元素
  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='清空原來的值，輸入新的' );
  // 獲得標籤之間的文本
  const a_text = await page.$eval('#click',a => a.innerText );
  console.log(a_text);
  // 獲得標籤內部的屬性值
  const div_text = await page.$eval('#div_text',div => div.id );//獲得div標籤id的值
  console.log(div_text);
  const a_link = await page.$eval('#click',a => a.href );//獲得a標籤href的值
  console.log(a_link);
  const input_value = await page.$eval('#input_02',input => input.value );//獲得input標籤value的值
  console.log(input_value);
  // 獲得整個HTML標籤的全部內容
  const html = await page.$eval('#input_02',input => input.outerHTML );//獲得input標籤value的值
  console.log(html);

  // 移動div內嵌式滾動條，多種方式
  // 一、能夠同時左右移動和上下 的,第一個參數是控制左右移動的值，第二個參數是控制上下移動的值
  await page.$eval('#div_text',div => div.scrollTo(1000,1000) );
  // 二、只上下移動和只是左右移動
  await page.waitFor(2000);
  await page.$eval('#div_text',div => div.scrollTop=10 );//上下移動
  await page.$eval('#div_text',div => div.scrollLeft=10 );//左右移動

  //移除標籤的屬性
  await page.$eval('#div_text',div => div.removeAttribute('id') );//移除div中id的值
  // 更改標籤中屬性的值
  await page.$eval('#input_02',div => div.setAttribute('value','test') );//更改div中class的值
  // 若是標籤沒有該屬性，就會新增這個屬性
  await page.$eval('#input_02',div => div.setAttribute('class','test') );//更改div中class的值

  // 等待3秒後退出瀏覽器
  await page.waitFor(3000);
  await browser.close();
})();
複製代碼

好啦腳本和html文件已經建立好啦，本身運行看下效果，接下來就開始進行分析啦：

一、點擊元素，這個好像沒什麼用呢，puppeteer自帶的就有tap()和click()函數html

// 點擊元素
  await page.waitFor(3000);
  await page.$eval('#click',a => a.click() );
複製代碼

二、清空輸入框的值、在puppeteer中type()函數是不清空的輸入，有時候想要清空一個文本在輸入，這個時候就派上用場了。java

//清空輸入框的值
  await page.$eval('#input_01',input => input.value='' );
複製代碼

三、清空輸入框而且輸入一個新的值，和第二個語法同樣，只是在value後面加入要輸入的值git

// 清空輸入框的值，而且輸入新的值
  await page.$eval('#input_02',input => input.value='清空原來的值，輸入新的' );
複製代碼

四、UI自動化中斷言須要獲得頁面的文本進行對比，來判斷是否經過，框架裏面好像沒有獲得文本的函數呢github

// 獲得標籤之間的文本
 const a_text = await page.$eval('#click',a => a.innerText );
 console.log(a_text);//打印出文本
複製代碼

五、獲得標籤內部的屬性值，若是想要用的話api

// 獲得標籤內部的屬性值
const div_text = await page.$eval('#div_text',div => div.id );//獲得div標籤id的值
console.log(div_text);
const a_link = await page.$eval('#click',a => a.href );//獲得a標籤href的值
console.log(a_link);
const input_value = await page.$eval('#input_02',input => input.value );//獲得input標籤value的值
console.log(input_value);
複製代碼

六、獲得整個HTML標籤的全部內容瀏覽器

// 獲得整個HTML標籤的全部內容
const html = await page.$eval('#input_02',input => input.outerHTML );//獲得input標籤value的值
console.log(html);
複製代碼

七、移動div內嵌式滾動條，好多的元素必須移動滾動條才能顯示出來，進行操做，這時候就會派上用場了,三種移動方式，最經常使用的是第一種框架

// 移動div內嵌式滾動條，多種方式
// 一、能夠同時左右移動和上下 的,第一個參數是控制左右移動的值，第二個參數是控制上下移動的值
await page.$eval('#div_text',div => div.scrollTo(1000,1000) );
// 二、只上下移動和只是左右移動
await page.waitFor(2000);
await page.$eval('#div_text',div => div.scrollTop=10 );//上下移動
await page.$eval('#div_text',div => div.scrollLeft=10 );//左右移動
複製代碼

八、第7個是div內嵌式滾動條，但有時候滾動條是全頁面的不是某個標籤的，這個時候就不能用上面這個函數了，須要另一個函數evaluate(),從新寫一個百度的腳本，參數和第7個的同樣，本身能夠試着運行下less

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});//設置成小窗口模式
// 一、能夠同時左右移動和上下的,第一個參數是控制左右移動的值，第二個參數是控制上下移動的值
await page.waitFor(2000);
await page.evaluate(() => window.scrollTo(1000,1000) );
//等待3秒後退出瀏覽器
await page.waitFor(2000);
await browser.close();
})();
複製代碼

九、操做標籤的屬性：移除、修改、增長async

//移除標籤的屬性
  await page.$eval('#div_text',div => div.removeAttribute('id') );//移除div中id的值
  // 更改標籤中屬性的值
  await page.$eval('#input_02',div => div.setAttribute('value','test') );//更改div中class的值
  // 若是標籤沒有該屬性，就會新增這個屬性
  await page.$eval('#input_02',div => div.setAttribute('class','test') );//位input標籤新增class的屬性和值
複製代碼