Puppeteer 简明教程

Handling Edit Boxes & Checkboxes

让我们来了解 Puppeteer 如何处理编辑框。

Let us understand how Puppeteer can handle edit boxes.

Handling Edit Boxes

Puppeteer 能够处理编辑框。编辑框具有 HTML 标签 input，其 type 属性的值设置为文本。

Puppeteer is capable of handling edit boxes. An edit box has an HTML tag as input and its type attribute is set to the value as text.

下面列出了一些使用编辑框的方法：

Some methods to work with edit boxes are listed below −

type()

此方法用于将文本输入到编辑框和文本区域，而不会替换已存在的内容。

This method is used to input text into an edit box and text area without replacing the already present content.

Syntax

Syntax

type() 的语法如下：

The syntax for type() is as follows −

const n = await page.$("#txt")
await n.type("Puppeteer")

我们可以在编辑框中输入文本并进行一些延迟。这可以通过添加参数 {delay:time interval} 来完成。时间间隔以毫秒表示。

We can enter text in an edit box with some delay. This is done by adding the parameter {delay:time interval}. The time interval is expressed in the milliseconds.

Syntax

Syntax

语法如下：

The syntax for the same is as follows −

await page.type("[class='loc']", "Tutorialspoint", {delay:700})

要删除在编辑框中输入的文本，我们必须对该字段执行三次单击事件（使用参数 clickCount），然后按退格键。这类似于在编辑框中选择所有值，然后按退格键。

To delete a text entered in an edit box, we have to perform the click event three times on the field(with the parameter clickCount) and then press backspace. It is similar to selecting all values in an edit box and then pressing backspace.

Syntax

Syntax

语法如下所示：−

The syntax is given below −

const n = await page.$("#txt")
await n.type("Puppeteer")
await n.click({clickCount: 3});
await page.keyboard.press('Backspace')

若要获得在编辑框中输入的值，我们必须使用 getProperty 方法并将值作为参数传递到该字段。

To get value entered in an edit box, we have to use the getProperty method and pass value as a parameter to this field.

const v = await (await n.getProperty("value")).jsonValue()
console.log(v)

在以下图像中，让我们输入文本 Puppeteer，然后将其清除。

In the below image, let us input the text Puppeteer and then clear it.

text puppeteer

首先，按照 Puppeteer 基本测试章节中的步骤 1 到 2，如下所示：

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which is 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 enterText(){
   //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")
   //clear text entered
   await f.click({clickCount: 3})
   //wait for sometime
   await page.waitForTimeout(4000)
   await page.keyboard.press('Backspace')
   //browser close
   await browser.close()
}
enterText()

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

Handling Checkboxes

在使用 Puppeteer 自动化测试时，我们可以在 UI 中处理复选框。HTML 代码中的复选框用标签名称 input 和类型 checkbox 标识。

We can handle checkboxes in the UI while automating a test using Puppeteer. The checkboxes are identified in the html code with the tagname as input and type as checkbox.

handling checkboxes

以下是一些用于处理复选框的方法：

Some methods to work with checkboxes are given below −

click()

用于勾选和取消勾选复选框。此方法是 ElementHandle 类的一部分。

It is used to check and uncheck a checkbox. This method is a part of the ElementHandle class.

Syntax

Syntax

click() 的语法如下所示：

The syntax of click() is as follows −

const n = await page.$("#txt")
n.click()

若要验证是否勾选了一个复选框，我们必须使用 getProperty 方法并将值作为参数传递到该字段。它返回一个布尔值（勾选则为真，否则为假）。

To verify if a checkbox is checked, we have to use the getProperty method and pass value as a parameter to this field. It returns a Boolean value(true if checked, false if not).

const v = await (await n.getProperty("checked")).jsonValue()
console.log(v)

首先，按照人偶基本测试章节执行步骤 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 checkBoxHandle(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/checkboxes')
   //identify element then click
   const n = await page.$("input[type='checkbox']")
   n.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //verify if checkbox is checked
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

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
base

在成功执行命令后，将在控制台中打印布尔值 true。这是getProperty("checked") 返回的值，当选中复选框时，它返回 true。

After the command has been executed successfully, the boolean value true is printed in the console. This is returned by the getProperty("checked") which returns true as the checkbox is selected.