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 => frame.url().includes(targetFrameUrl));
    //在定位的iframe頁面內操作
    const phone = await frame.waitForSelector('#phoneIpt');
    phone.type('123456');
    await page.waitFor(3000);
    await browser.close();
}
anjuke();