Puppeteer - 处理下拉菜单

更新于 2024/8/16 0:10:00

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

处理下拉菜单的方法

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

select()

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

语法

语法如下 −

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

我们还可以从多选下拉列表中选择多个选项。

语法

语法如下 −

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

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

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

type()

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

语法

语法如下 −

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

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

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

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

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

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

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

//Puppeteer 库
const pt= require('puppeteer')
async function dropDownHandle(){
    //以 headless 模式启动浏览器
    const browser = await pt.launch()
    //浏览器新页面
    const page = await browser.newPage()
    //启动 URL
    await page.goto('https://www.tutorialspoint.com/tutor_connect/index.php')
    //识别下拉菜单然后按值选择一个选项
    const f = await page.$('[name="selType"]')
    await f.select("subject")
    //等待一段时间
    await page.waitForTimeout(4000)
    //获取选定的值
   const v = await (await f.getProperty("value")).jsonValue()
   console.log(v)
}
dropDownHandle()

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