Puppeteer - 同步

Puppeteer 的 Page 類包含用於實現同步的方法。這些方法用於等待頁面上的操作/元素。它等待滿足條件（真值）。例如，我們經常等待頁面上出現文字。

同步方法

Puppeteer 中的同步方法如下所示：

waitFor

此方法用於等待特定時間段，然後再解析 Promise。

語法

語法如下：

await page.waitFor(4000)

waitForSelector

此方法用於等待元素在網頁上可見或消失。

語法

語法如下：

page.waitForSelector(
   selector,
   {options : value}
)

waitForSelector 接受兩個引數。第一個引數是元素的選擇器值。第二個引數是選項陣列。選項如下所示：

可見 - Puppeteer 將等待直到元素定位器在頁面上可見。預設值為 false。
隱藏 - Puppeteer 將等待直到元素定位器從頁面上隱藏。預設值為 false。
超時 - 元素的最大等待時間（毫秒）。預設值為 30000。如果超時設定為零，則將其丟棄。

可以使用以下方法修改預設等待時間：

page.setDefaultTimeout(6000)

例如：

let l = await page.waitForSelector( "#ltxt", { visible: true } )

waitForXpath

此方法用於等待由 xpath 標識的元素/元素在網頁上可見或消失。

語法

語法如下：

page.waitXpath(
   Xpath value,
   {options : value}
)

waitForXpath 接受兩個引數。第一個引數是元素的 xpath 選擇器值。第二個引數是選項陣列。選項如下所示：

可見 - Puppeteer 將等待直到元素定位器在頁面上可見。預設值為 false。
隱藏 - Puppeteer 將等待直到元素定位器從頁面上隱藏。預設值為 false。
超時 - 元素的最大等待時間（毫秒）。預設值為 30000。如果超時設定為零，則將其丟棄。

可以使用以下方法修改預設等待時間：

page.setDefaultTimeout(6000)

例如：

let x= await page.waitForXPath( "//*[@name='search']", { visible: true } )

waitForFunction

此方法用於等待提供的函式返回真值。

語法

語法如下：

page.waitForFunction(
   pagefunction,
   {options : value},
   pagefunction args
)

waitForFunction 具有以下引數：

pagefunction 是要執行的函式。例如：

page.waitForFunction("document.getElementById('txt').value === 'text'", {})

此函式將等待直到 id 為的元素的值等於 text。

option 是等待引數的陣列。它們是 - polling（以毫秒為單位執行 pagefunction 的間隔）和 timeout（Puppeteer 將等待 pagefunction 返回真值的最大時間）。

pagefunction args 是傳遞給 pagefunction 函式的引數。

在下圖中，讓我們輸入文字 - Puppeteer，然後按 Enter。

按 Enter 後，將開啟一個新視窗，其中包含帶有文字 - 大約 39 個結果的搜尋結果。

首先，請按照 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 waitImplementation(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.tw/index.htm')
   //identify edit box
   const f = await page.$("#gsc-i-id1")
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //press Enter
   await page.keyboard.press('Enter')
   //wait for an element xpath
   await page.waitForXPath("//div[@class='gsc-result-info']")
   //identify element
   const t = await page.$(".gsc-result-info")
   //obtain text
   const text = await (await t.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
waitImplementation()

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

node <filename>

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

node testcase1.js

列印頁面