傀儡师 - 同步

Puppeteer Page 类包含实现同步的方法。这些方法用于等待页面上的操作/元素。它等待满足条件（真值）。例如，我们经常等待文本出现在页面上。

同步方式

Puppeteer 中的同步方法如下：

等待

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

句法

语法如下 -

await page.waitFor(4000)

等待选择器

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

句法

语法如下 -

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

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

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

  • Hidden - Puppeteer 应等待，直到元素定位器从页面隐藏。默认值为 false。

  • 超时- 元素的最大等待时间（以毫秒为单位）。默认值为 30000。如果超时设置为零，则会被丢弃。

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

page.setDefaultTimeout(6000)

例如，

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

等待Xpath

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

句法

语法如下 -

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

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

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

  • Hidden - Puppeteer 应等待，直到元素定位器从页面隐藏。默认值为 false。

  • 超时- 元素的最大等待时间（以毫秒为单位）。默认值为 30000。如果超时设置为零，则会被丢弃。

可以使用以下方法修改默认等待时间 -

page.setDefaultTimeout(6000)

例如，

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

等待函数

此方法用于等待所提供的函数返回真值。

句法

语法如下 -

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

waitForFunction 有以下参数 -

pagefunction是要执行的函数。例如，

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

该函数将等待，直到 id 元素的值等于文本。

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

pagefunction args 是传递给 pagefunction 函数的参数。

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

页面功能

按 Enter 后，将打开一个包含搜索结果和文本的新窗口 - 大约 39 个结果。

59 个结果.jpg

首先，请按照《Puppeteer 基本测试》一章中的步骤 1 至 2 进行操作，如下所示 -

步骤 1 - 在创建 node_modules 文件夹的目录中创建一个新文件（Puppeteer 和 Puppeteer 核心的安装位置）。

Puppeteer 安装的详细信息将在 Puppeteer 安装章节中讨论。

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

节点模块

步骤 2 - 输入文件名，例如 testcase1.js。

测试用例1.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://www.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
控制台1