Puppeteer - 處理框架

html 程式碼中的框架由 frames/iframe 標籤表示。Puppeteer 可以透過從主頁面切換到框架來處理框架。要使用框架內的元素，首先我們必須藉助定位器識別框架。contentFrame 方法用於訪問框架內的元素。

語法

處理框架的語法如下：

const f = await page.$("frame[name='frame-bottom']")
const m = await f.contentFrame()

讓我們看看框架內元素的 html 程式碼，並獲取其中的文字 - BOTTOM。

上圖中高亮的標籤名為 frame，其 name 屬性的值為 frame-bottom。

首先，按照 Puppeteer 基本測試章節中的步驟 1 到步驟 2 操作，步驟如下：

步驟 1 - 在建立 node_modules 資料夾的目錄（Puppeteer 和 Puppeteer core 已安裝的位置）中建立一個新檔案。

Puppeteer 安裝的詳細資訊在 Puppeteer 安裝章節中討論。

右鍵單擊建立 node_modules 資料夾的資料夾，然後單擊“新建檔案”按鈕。

步驟 2 - 輸入檔名，例如 testcase1.js。

步驟 3 - 將以下程式碼新增到建立的 testcase1.js 檔案中。

//Puppeteer library
const pt= require('puppeteer')
async function frameHandle(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/nested_frames')
   //identify frame
   const f = await page.$("frame[name='frame-bottom']")
   //move to frame
   const x = await f.contentFrame();
   //identify element inside frame
   const n = await x.$("body")
   //get text
   const v = await (await n.getProperty("textContent")).jsonValue()
   console.log(v)
}
frameHandle()

步驟 4 - 使用以下命令執行程式碼：

node <filename>

因此，在我們的示例中，我們將執行以下命令：

node testcase1.js

命令成功執行後，框架中的文字 - BOTTOM 將列印到控制檯。