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.com/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

打印页面