Не удается найти скрытый элемент ввода в iFrame на веб-сайте, используя Puppeteer и Node.JS

Question

Я пытаюсь ввести значение во вход (указанный в коде), но кукловод не может найти селектор. Тип ввода скрыт, и он может успешно найти любой другой элемент на странице, кроме полей ввода. Редактировать: я недавно обнаружил, что форма ввода и iFrame тоже.

Я использую кукловод с node.js

Я пытался использовать следующее:

await page.$eval('input[name="checkout[credit_card][vault]"]', el => el.value = '000000');

и

await page.$eval('input[name="number"]', el => el.value = 'Bob');

и оба приводят к ошибке, сообщающей, что элемент / селектор не найден.

Я также пытался использовать page.type();

HTML выглядит так:

<input 
  value="false" 
  size="30" 
  type="hidden" 
  name="checkout[credit_card][vault]" 
  id="checkout_credit_card_vault">

и вот так

<input 
  autocomplete="cc-number" 
  id="number" 
  name="number" 
  type="tel" 
  aria-describedby="error-for-number tooltip-for-number"
  data-current-field="number" 
  class="input-placeholder-color--lvl-22" 
  placeholder="Card number">

Это две разные части кода в HTML, где я пытаюсь ввести значение в форму ввода.

Я полагаю, что они как-то относятся к одному и тому же полю ввода, но я не уверен. Все еще новичок в программировании ...

Answer 1

Чтобы получить доступ к элементу внутри iframe, сначала нужно найти фрейм и получить его фрейм контента через elementHandle.contentFrame.Это вернет объект Frame, который имеет аналогичные функции, как сам page.Вы можете использовать frame.$eval, который работает как функция page.$eval (но внутри кадра).

Пример кода

const iframeHandle = await page.$('iframe#id-of-your-iframe'); // Change the selector
const frame = await iframeHandle.contentFrame();
await frame.$eval(/* ... */);
// ...

Незначительные улучшения

Кроме того, ваш код должен работать.Я бы только рекомендовал использовать лучшие селекторы в вашем коде.Всегда лучше использовать селектор ID , если это возможно, так как идентификатор уникален на странице:

• Заменить input[name="checkout[credit_card][vault]"] на input#checkout_credit_card_vault
• Заменить input[name="number"] на input#number