未能找到元素匹配选择器答案

【问题标题】：Failed to find element matching selector未能找到元素匹配选择器
【发布时间】：2019-12-28 00:51:47
【问题描述】：

我正在尝试使用 puppeteer 输入输入字段，但我收到以下错误。

Error: failed to find element matching selector "#cardCvc-input"

我的代码是：

await page.$eval('#cardCvc-input', e => e.value = "000")

DOM中的节点如下：

<input _ngcontent-ng-cli-universal-c1="" autocomplete="off" cccvc="" class="form-control ng-pristine ng-
invalid ng-touched" id="cardCvc-input" maxlength="4" minlength="3" name="cardCvc" pattern="[0-9]{4}|[0-
9]{3}" required="" type="tel">

希望有人可以帮助告诉我我做错了什么。请注意，当我检查页面源时，我实际上并没有看到 DOM。这是一堆javascript代码。跟这个有关系吗？

还注意到有iframe父节点。

【问题讨论】：

你在等待选择器出现在eval之前吗？
是的，我是。请参阅我对以下答案的评论。
它在 iframe 中吗？
我怎么知道？
我不认为它的 iframe。它看起来像一堆动态生成 HTML DOM 的 javascript 代码

标签： selector puppeteer

【解决方案1】：

由于元素在 iframe 中，您需要先选择 iframe，然后再选择元素：

await page.waitForSelector('iframe'); //make sure you use the correct selector for the iframe
const iframeElement = await page.$('iframe'); //make sure you use the correct selector for the iframe
const frame = await iframeElement.contentFrame();
await frame.waitForSelector('#cardCvc-input');
await frame.$eval('#cardCvc-input', e => e.value = "000");

【讨论】：

【解决方案2】：

您可以在调用evaluate 之前添加waitForSelector。因此，您将等待该 DOM 元素由 javascript 代码创建。

await page.waitForSelector('#cardCvc-input');
await page.$eval('#cardCvc-input', e => e.value = "000")

【讨论】：

那行不通。无论我等待多长时间，DOM 元素都不会显示在页面源上。我只能从开发者工具中追踪这个 DOM 元素。