Puppeteer 简明教程

Puppeteer - Synchronization

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

Puppeteer Page class contains methods to achieve synchronization. These methods are used to wait for an action/element on the page. It waits for criteria to be met (a true value). For example, we often wait for a text to appear on the page.

Synchronization methods

以下列出 Puppeteer 中的同步方法−

The synchronization methods in Puppeteer are listed below −

waitFor

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

This method is used to wait for a specific amount of time before resolving a Promise.

Syntax

Syntax

其语法如下：

The syntax is as follows −

await page.waitFor(4000)

waitForSelector

此方法用于等待元素出现在网页上或从网页上消失。

This method is used to wait for an element to be visible or disappear from the webpage.

Syntax

Syntax

其语法如下：

The syntax is as follows −

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

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

The waitForSelector accepts two parameters. The first parameter is the selector value of an element. The second parameter is the array of options. The options are listed below −

  1. Visible − Puppeteer shall wait till an element locator is visible on the page. The default value is false.

  2. Hidden − Puppeteer shall wait till an element locator is hidden from the page. The default value is false.

  3. Timeout − The maximum wait time for an element in milliseconds. The default value is 30000. If the timeout is set to zero, this is discarded.

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

The default wait time can be modified by using the method given below −

page.setDefaultTimeout(6000)

例如，

For example,

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

waitForXpath

此方法用于等待由 xpath 识别的元素/元素出现在网页上或从网页上消失。

This method is used to wait for element/elements identified by xpath to be visible or disappear from the webpage.

Syntax

Syntax

其语法如下：

The syntax is as follows −

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

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

The waitForXpath accepts two parameters. The first parameter is the xpath selector value of an element. The second parameter is the array of options. The options are listed below −

  1. Visible − Puppeteer shall wait till an element locator is visible on the page. The default value is false.

  2. Hidden − Puppeteer shall wait till an element locator is hidden from the page. The default value is false.

  3. Timeout − The maximum wait time for an element in milliseconds. The default value is 30000. If the timeout is set to zero, this is discarded.

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

The default wait time can be modified using the below method −

page.setDefaultTimeout(6000)

例如，

For example,

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

waitForFunction

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

This method is used to wait till the provided function returns a true value.

Syntax

Syntax

其语法如下：

The syntax is as follows −

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

waitForFunction 具有以下参数 −

The waitForFunction has the following parameters −

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

The pagefunction is the function to be executed. For example,

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

此函数将一直等待，直到含 ID 元素的值等于文本。

This function shall wait till the value of the element with id is equal to text.

该选项是等待参数的数组。它们包括 - polling（pagefunction 应在多少毫秒内执行一次）和 timeout（Puppeteer 应等待 pagefunction 返回 true 值的最长时间）。

The option is an array of waiting parameters. They are - polling (the interval at which the pagefunction should be executed in milliseconds) and timeout (The maximum time the Puppeteer shall wait for the pagefunction to return true value).

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

The pagefunction args are the arguments passed to the pagefunction function.

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

In the below image, let us input text - Puppeteer and then press Enter.

pagefunction

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

After pressing Enter, a new window having the search results with text - About 39 results should open up.

59 results

首先，按照人偶基本测试章节执行步骤 1 至 2，如下所示 -

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows −

Step 1 - 在创建 node_modules 文件夹的目录中创建一个新文件（人偶和人偶核已安装的位置）。

Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).

人偶安装的详情在人偶安装篇章中进行了讨论。

The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.

右击创建 node_modules 文件夹的文件夹，然后点击新建文件按钮。

Right-click on the folder where the node_modules folder is created, then click on the New file button.

node modules

Step 2 - 输入文件名，如 testcase1.js。

Step 2 − Enter a filename, say testcase1.js.

testcase1 js

Step 3 - 将以下代码添加到新创建的 testcase1.js 文件中。

Step 3 − Add the below code within the testcase1.js file created.

//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()

Step 4 - 使用以下命令执行代码 -

Step 4 − Execute the code with the command given below −

node <filename>

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

So in our example, we shall run the following command −

node testcase1.js
console1