官方英文版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.
1、切换单层iframe框架
先给出具体代码:一个登录163邮箱的例子
看一下效果图
代码如下:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless:false});
const page = await browser.newPage();
await page.goto('https://mail.163.com/');
await page.setViewport({
width:1000,height:800});
//切换iframe框代码
await page.waitFor('#switchAccountLogin');
await page.click('#switchAccountLogin');//默认是扫二维码的,点击密码登录,调出输入框
await page.waitFor('[id*="x-URS-iframe"]');//等待我的iframe出现
const frame = ( await page.frames() )[4];//通过索引得到我的iframe
await frame.waitFor('.j-inputtext.dlemail');//等待用户名输入框出现
await frame.type('.j-inputtext.dlemail','12345');//输入账户
await frame.waitFor('.dlpwd');//等待密码框出现
await frame.type('.dlpwd','12345');//输入密码
//等待3秒后退出浏览器
await page.waitFor(3000);
await browser.close();
})();
当时学习这个可真是苦恼我了,查了好多资料,看了好多教程都没有解决切换的问题,都只是说使用page.frames()得到所有的frame框返回一个列表来使用,但是并没有什么例子,看的我云里来雾里去的,幸好我有UI自动化的功底,有一些思路,于是自己摸索出来了,话不多说、上分析吧:
1.首先在第11行我加了一个智能等待,等待包含输入账户和密码的iframe框加载出来,有时候网络加载慢这个iframe框还没出来,但是其它的iframe已经加载出来了,而page.frames()语句照样会执行,这样就会找不到我要的iframe了,所以加一下等待
2. 第12行代码我用的是索引的方法直接得到我的iframe,因为没有name的属性不能找到,如果有name的属性可以这样写,如果没有name,返回ID,
原理
const frame = await page.frames().find(f => f.name() === 'name');
另外如果使用索引的时候可以这样查看列表有多少个值:
const frame = await page.frames();//得到所有的frame框
console.log(frames.length);//查看得到的frame列表数量
3.第13行我加了一个智能等待,等输入框出现,这个我不知道为什么?如果我不加的话就会报错,找不到输入框,如果加上的话就没问题,如果谁知道怎么回事可以给我说下。
4.后面的都一样了就是正常的等待和输入就好啦。
2、切换多层iframe框架
这个多层的iframe真的很少了,至少我都是见到的单层的,现在已经很少会有多层了,不过少归少并不代表没有,于是自己写了几个html为大家讲解一下吧!
先看下效果图:
首先新建三个HTML文件和脚本文件,放到一个路径下,输入以下内容:
input.html
<!DOCTYPE html>
<html>
<head>
<title>input</title>
</head>
<body>
<input type="text" id="input_01">
</body>
</html>
frame.html
<!DOCTYPE html>
<html>
<head>
<title>frame