Как получить доступ ко второму элементу ввода, если страница имеет две идентичные формы?

Question

Я пытаюсь автоматизировать процесс заполнения формы с помощью кукловода. На одной странице есть две формы, которые очень похожи, даже их родительские классы одинаковы.

Я успешно заполнил первую форму. Но я не знаю, как заполнить вторую форму, которая имеет точно такие же поля ввода, как имя пользователя и все.

Как я могу различить эти две формы и получить доступ именно к тем полям ввода, которые мне нужны.

Для справки, я делюсь некоторыми из своих кодов здесь.

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.$, вы можете запросить элемент внутри другого элемента.

Answer 2

Вы можете использовать page.$$() или page.evaluate() для циклического перебора форм перед поиском элементов.