Puppeteer 简明教程

Puppeteer - Handling Drop-downs

在使用 Puppeteer 自动化测试时，我们可以在 UI 中处理下拉菜单。静态下拉菜单在 html 代码中用标签名 select 标识，其选项用标签名 option 标识。

We can handle drop downs in the UI while automating a test using Puppeteer. The static drop downs are identified in the html code with the tagname as select and its options have the tagname as option.

Methods to Handle Dropdown

处理静态下拉菜单的一些方法 −

Some methods to work with static dropdowns −

select()

此方法用于从下拉菜单中选择一个选项。要选择的选项的值作为参数传递给此方法。

This method is used to select an option from the dropdown. The value of the option to be selected is passed as a parameter to this method.

Syntax

其语法如下：

The syntax is as follows −

const page = await browser.newPage()
   const f = await page.$('[name="selType"]')
await f.select("subject")

我们还可从多选下拉菜单中选择多个选项。

We can also select multiple options from a multi-select dropdown.

Syntax

其语法如下：

The syntax is as follows −

await f.select("subject", "name")

要从下拉菜单中获取选择值，我们必须使用 getProperty 方法并将值作为参数传递给此字段。

To obtain select value from the dropdown, 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)

type()

此方法用于从下拉菜单中选择一个选项。要选择的选项的值作为参数传递给此方法。

This method is used to select an option from the dropdown. The value of the option to be selected is passed as a parameter to this method.

Syntax

其语法如下：

The syntax is as follows −

const page = await browser.newPage()
   const f = await page.$('[name="selType"]')
await f.type("subject")

首先，按照人偶基本测试章节执行步骤 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.

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

Step 2 − Enter a filename, say 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 dropDownHandle(){
   //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/tutor_connect/index.php')
   //identify dropdown then select an option by value
   const f = await page.$('[name="selType"]')
   await f.select("subject")
   //wait for sometime
   await page.waitForTimeout(4000)
   //get value selected
   const v = await (await f.getProperty("value")).jsonValue()
   console.log(v)
}
dropDownHandle()

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.j

在成功执行命令后，将在控制台中打印从下拉列表中选择的选项的值 - 主题。

After the command has been executed successfully, the value of the option selected in the dropdown - subject is printed in the console.