Puppeteer笔记（六）：Puppeteer切换frame操作

Puppeteer系列

1、Puppeteer笔记（一）：Puppeteer简介

2、Puppeteer笔记（二）：Puppeteer安装及实例Demo

3、Puppeteer笔记（三）：Puppeteer获取元素及元素属性 

4、Puppeteer笔记（四）：Puppeteer模拟键盘 

5、Puppeteer笔记（五）：Puppeteer文件上传

6、Puppeteer笔记（六）：Puppeteer切换frame操作 

7、Puppeteer笔记（七）：Puppeteer切换浏览器TAB页 

8、Puppeteer笔记（八）：Puppeteer执行自定义Javascript方法 

一、puppeteer切换iframe操作

1、page.frames() 　　加载到页面中的所有iframe标签

2、frame.url() 　　 返回frame框架的url

 二、上手实例Demo

　　功能测试：打开安居客，可看到登录页是一个iframe嵌入的页面，如何定位进行登录。

　　先以我们平常的思维来看，打开一个页面就直接定位，尝试一下不在iframe，是否可以定位成功。代码如下：

 1 const puppeteer = require('puppeteer');
 2 //puppeteer切换iframe进行安居客登录操作
 3 async function anjuke() {
 4     //创建一个Browser浏览器实例，并设置相关参数
 5     const browser = await puppeteer.launch({
 6         headless: false,
 7         defaultViewport: null,
 8         args: ['--start-maximized'],
 9         ignoreDefaultArgs: ['--enable-automation']
10     });
11     //创建一个Page实例
12     const page = await browser.newPage();
13     /*打开安居客首页
14     waitUntil:代表什么时候才认为导航加载成功
15     networkidle0: 在 500ms 内没有网络连接时就算成功(全部的request结束),才认为导航结束
16     networkidle2: 500ms 内有不超过 2 个网络连接时就算成功(还有两个以下的request),就认为导航完成。
17     */
18     await page.goto('https://login.anjuke.com/login/form', {
19         waitUntil: 'networkidle2'
20     });
21     //不在具体iframe中，直接定位元素
22     const phone = await page.$('#phoneIpt');
23     phone.type('123456');
24     await page.waitFor(3000);
25     await browser.close();
26 }
27 anjuke();

 　　运行以上代码，我们可以发现，终端有报错。可看出不能直接操作iframe中的元素。

 　　那我们来看看如何切换frame进行页面元素的相关操作。代码如下：

 1 const puppeteer = require('puppeteer');
 2 //puppeteer切换iframe进行安居客登录操作
 3 async function anjuke() {
 4     //创建一个Browser浏览器实例，并设置相关参数
 5     const browser = await puppeteer.launch({
 6         headless: false,
 7         defaultViewport: null,
 8         args: ['--start-maximized'],
 9         ignoreDefaultArgs: ['--enable-automation']
10     });
11     //创建一个Page实例
12     const page = await browser.newPage();
13     /*打开安居客首页
14     waitUntil:代表什么时候才认为导航加载成功
15     networkidle0: 在 500ms 内没有网络连接时就算成功(全部的request结束),才认为导航结束
16     networkidle2: 500ms 内有不超过 2 个网络连接时就算成功(还有两个以下的request),就认为导航完成。
17     */
18     await page.goto('https://login.anjuke.com/login/form', {
19         waitUntil: 'networkidle2'
20     });
21     //找到页面所有的iframe并打印出iframe链接，frame.url()获取frame的url
22     await page.frames().map(frame => {
23         console.log(frame.url())
24     });
25     const targetFrameUrl = 'https://login.anjuke.com/login/iframeform';
26     //找到要定位的iframe页面
27     const frame = await page.frames().find(frame => url().includes(targetFrameUrl));
28     //在定位的iframe页面内操作
29     const phone = await frame.waitForSelector('#phoneIpt');
30     phone.type('123456');
31     await page.waitFor(3000);
32     await browser.close();
33 }
34 anjuke();