javascript - 如果页面有两个相同的表单，如何访问第二个输入元素？

Question

我正在尝试使用 puppeteer 自动化表单填写过程。在一个页面上，有两个非常相似的窗体，甚至它们的父类都是相同的。

我成功填写了第一份表格。但是我不知道如何填写第二个表单，它具有完全相同的输入字段，如用户名和全部。

如何区分这两种形式并准确访问我想要的输入字段。

为了您的引用，我在这里分享了我的一些代码。

await page.click('input[name="fullName"]');
await page.keyboard.type("Nitin");

像上面一样，我成功填写了第一个有用户名字段的表格。现在有第二种形式也有相同的用户名字段。现在我该如何填写那个？

提前致谢。

Answer 1

最简单的方法是先通过page.$$ 获取两种形式的元素句柄。然后使用另一个查询来查询其子元素。

示例

const forms = await page.$$('form'); // array contains the form element handles

const elementInForm1 = await forms[0].$('input[name="fullName"]');
await elementInForm1.click();
// ...

const elementInForm2 = await forms[1].$('input[name="fullName"]');
await elementInForm2.click();
// ...

变量 forms 包含页面内的所有 form 元素。通过使用 elementHandle.$然后您可以在另一个元素中查询一个元素。