Question

我试图在（在代码中指定的）输入中输入一个值，但是操纵up的人找不到选择器。输入类型被隐藏，它可以成功找到页面上除输入字段之外的所有其他元素。编辑：我最近发现输入表单也在和iFrame中。

我尝试使用以下内容：

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 selector，因为ID在页面上是唯一的：

将input[name="checkout[credit_card][vault]"]替换为input#checkout_credit_card_vault
将input[name="number"]替换为input#number

使用Puppeteer和Node.JS在网站上的iFrame中找不到隐藏的输入元素

1 个答案: