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

Question

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

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

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

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

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

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

提前致谢。

Answer 1

您可以使用 page.$$() or page.evaluate() 在搜索元素之前循环浏览表单。

Answer 2

最简单的方法是先通过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.$，您可以在另一个元素中查询一个元素。

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

How to access second input element if page has two identical forms?

javascript

puppeteer