官方英文版API入口：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
汉化版API入口：https://yq.aliyun.com/articles/607102.
学习笔记入口：https://blog.csdn.net/qupan1993/article/details/85371556.

首先看一段中文版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查询页面pagepageFunction <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 文件

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内嵌式滚动条，多种方式// 1、可以同时左右移动和上下  的,第一个参数是控制左右移动的值，第二个参数是控制上下移动的值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 );//左右移动//移除标签的属性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文件已经创建好啦，自己运行看下效果，接下来就开始进行分析啦：

1、点击元素，这个好像没什么用呢，puppeteer自带的就有tap()和click()函数

  // 点击元素await page.waitFor(3000);await page.$eval('#click',a => a.click() );

2、清空输入框的值、在puppeteer中type()函数是不清空的输入，有时候想要清空文本，这个时候就派上用场了。

  //清空输入框的值await page.$eval('#input_01',input => input.value='' );

3、清空输入框并且输入一个新的值，和第二个语法一样，只是在value后面加入要输入的值

  // 清空输入框的值，并且输入新的值await page.$eval('#input_02',input => input.value='要输入的值' );

4、UI自动化中断言需要得到页面的文本进行对比，来判断是否通过，框架里面好像没有得到文本的函数呢

  // 得到标签之间的文本const a_text = await page.$eval('#click',a => a.innerText );console.log(a_text);//打印出文本

5、得到标签内部的属性值，如果想要用的话

  // 得到标签内部的属性值
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);

6、得到整个HTML标签的所有内容

  // 得到整个HTML标签的所有内容
const html = await page.$eval('#input_02',input => input.outerHTML );//得到input标签value的值
console.log(html);

7、移动div内嵌式滚动条，好多的元素必须移动滚动条才能显示出来，进行操作，这时候就会派上用场了,三种移动方式，最常用的是第一种

  // 移动div内嵌式滚动条，多种方式
// 1、可以同时左右移动和上下  的,第一个参数是控制左右移动的值，第二个参数是控制上下移动的值
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内嵌式滚动条，但有时候滚动条是全页面的不是某个标签的，这个时候就不能用上面这个函数了，需要另外一个函数evaluate(),重新写一个百度的脚本，参数和第7个的一样，自己可以试着运行下

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});//设置成小窗口模式
// 1、可以同时左右移动和上下的,第一个参数是控制左右移动的值，第二个参数是控制上下移动的值
await page.waitFor(2000);
await page.evaluate(() => window.scrollTo(1000,1000) );
//等待3秒后退出浏览器
await page.waitFor(2000);
await browser.close();
})();

9、操作标签的属性：移除、修改、增加

  //移除标签的属性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都可以看到。

Node+puppeteer学习笔记（五）--API问题解决--使用功能强大的“ eval ”函数相关推荐

【Node.js学习笔记五】npm（Node包管理器）命令行选项
Node包管理器(Node Packaged Manager,NPM) Node封装模块(Node Packaged Module,module) 选项说明示例 1 search 在存储 ...
MonoRail学习笔记三：使用方便功能强大的routing功能
我们浏览论坛或博客时经常会看到这样的Url:http://www.cnblogs.com/firstyi/archive/2007/10/17/927967.html (这个是博客园中的一个链接),其 ...
Puppeteer 学习笔记及基本用法
Puppeteer 学习笔记及基本用法 Puppeteer 安装语法基本语法 API 分层结构加载导航页面等待元素.请求.响应自定义等待元素定位用户模拟操作请求拦截获取 WebSoc ...
node入门-学习笔记
文章目录 node入门-学习笔记 node 启动node服务重构express-run node入门-学习笔记 node 为什么后端要用node, 因为它是js js运行时环境主要使用expres ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端一: 全局对象 Node. ...
motan学习笔记五 opentracing学习入门
motan学习笔记一微博轻量级RPC框架Motan motan学习笔记二 motan架构分析 motan学习笔记三 motan Demo 分析 motan学习笔记四 motan Demo 之 ...
node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染文章目录 node.js 学习笔记(二)模板引擎和C/S渲染一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
千锋Node.js学习笔记
千锋Node.js学习笔记文章目录千锋Node.js学习笔记写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...

Node+puppeteer学习笔记（五）--API问题解决--使用功能强大的“ eval ”函数

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

好啦脚本和html文件已经创建好啦，自己运行看下效果，接下来就开始进行分析啦：

现在经常用的是这几个，当然如果想要用其他的可以去了解一下，我这边就不过多介绍了

Node+puppeteer学习笔记（五）--API问题解决--使用功能强大的“ eval ”函数相关推荐

最新文章

热门文章