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，是否可以定位成功。代码如下：

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

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

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

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