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的属性和值
复制代码

如今常常用的是这几个，固然若是想要用其余的能够去了解一下，我这边就不过多介绍了

地址：打开谷歌的F12开发者模式，进入console控制台进行查看有更多的操做，全部的API均可以看到。