Puppeteer - 同步

Puppeteer Page 类包含实现同步的方法。这些方法用于等待页面上的操作/元素。它等待条件得到满足(真值)。例如,我们经常等待一段文字出现在页面上。

同步方法

Puppeteer 中的同步方法如下 −

waitFor

此方法用于在解析 Promise 之前等待特定的时间。

语法

语法如下 −

await page.waitFor(4000)

waitForSelector

此方法用于等待元素在网页上可见或消失。

语法

语法如下 −

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

waitForSelector 接受两个参数。第一个参数是元素的选择器值。第二个参数是选项数组。选项列在下面 −

  • Visible − Puppeteer 应等待元素定位器在页面上可见。默认值为 false。

  • Hidden − Puppeteer 应等待元素定位器从页面上隐藏。默认值为 false。

  • Timeout − 元素的最大等待时间(以毫秒为单位)。默认值为 30000。如果超时设置为零,则丢弃该值。

可以使用下面给出的方法修改默认等待时间 −

page.setDefaultTimeout(6000)

例如,

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

waitForXpath

此方法用于等待 xpath 标识的元素在网页上可见或消失。

语法

语法如下 −

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

waitForXpath 接受两个参数。第一个参数是元素的 xpath 选择器值。第二个参数是选项数组。选项列在下面 −

  • Visible − Puppeteer 应等待元素定位器在页面上可见。默认值为 false。

  • Hidden − Puppeteer 应等待元素定位器从页面上隐藏。默认值为 false。

  • Timeout − 元素的最大等待时间(以毫秒为单位)。默认值为 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。

该选项是等待参数的数组。它们是 - 轮询(页面函数执行的间隔,以毫秒为单位)和超时(Puppeteer 等待页面函数返回真值的最大时间)。

页面函数参数是传递给页面函数的参数。

在下图中,让我们输入文本 - Puppeteer,然后按 Enter。

Page Function

按 Enter 键后,将打开一个新窗口,其中包含带有文本的搜索结果 - 大约 39 个结果。

59 Results.jpg

首先,按照 Puppeteer 基本测试章节中的步骤 1 到 2 进行操作,如下所示 −

步骤 1 − 在创建 node_modules 文件夹的目录(安装 Puppeteer 和 Puppeteer 核心的位置)内创建一个新文件。

有关 Puppeteer 安装的详细信息,请参阅 Puppeteer 安装一章。

右键单击创建 node_modules 文件夹的文件夹,然后单击新建文件按钮。

Node Modules

步骤 2 − 输入文件名,例如 testcase1.js。

Testcase1.JS

步骤 3 −在创建的 testcase1.js 文件中添加以下代码。

//Puppeteer 库
const pt= require('puppeteer')
async function waitImplementation(){
    //以 headless 模式启动浏览器
    const browser = await pt.launch()
    //浏览器新页面
    const page = await browser.newPage()
    //启动 URL
    await page.goto('https://www.tutorialspoint.com/index.htm')
    //识别编辑框
    const f = await page.$("#gsc-i-id1")
    //输入文本
    f.type("Puppeteer")
    //等待一段时间
    await page.waitForTimeout(4000)
    //按 Enter
    await page.keyboard.press('Enter')
    //等待元素 xpath
    await page.waitForXPath("//div[@class='gsc-result-info']")
    //识别元素
    const t = await page.$(".gsc-result-info")
    //获取文本
    const text = await (await t.getProperty('textContent')).jsonValue()
    console.log("Text is: " + text)
}
waitImplementation()

步骤 4 − 使用下面给出的命令执行代码 −

node <filename>

因此,在我们的示例中,我们将运行以下命令 −

node testcase1.js
Console 1