Puppeteer 找不到元素 iframe

Question

表单嵌入在iframe中。我正在尝试使用木偶师填写表格。我可以选择表单中的大多数字段，但无法选择提交按钮。

await page.waitForSelector("iframe");
const iframeElement = await page.$('iframe'); 
const frame = await iframeElement.contentFrame();
await frame.waitForSelector('#input_4'); //picks up the appropriate element
await frame.waitForSelector('button#input_2.form-submit-button.submit-button.jf-form-buttons.jsTest-submitField');//does not pick up the element

我已经附加了一个指向 DOM 屏幕截图的链接，显示了按钮相对于 iframe 的位置。

谁能帮忙？非常感谢。

DOM

Answer 1

您似乎错误地使用了选择器。

❌错误用法：

不要包含标签名称、id 和所有 CSS 类之间没有任何分隔符，特别是如果它们都描述同一个元素，则不要同时使用它们。

await frame.waitForSelector(button#input_2.form-submit-button.submit-button.jf-form-buttons.jsTest-submitField);

(或者你可以用逗号分隔它们，比如：#input_2, .form-submit-button, .submit-button, .jf-form-buttons, .jsTest-submitField。但很少有人需要走这条路。

✅正确用法：

你对id很好，它在内部标识frame你正在寻找的元素。

await frame.waitForSelector('#input_2');

---

你知道吗？如果您右键单击Chrome DevTools"元素"选项卡中的元素并选择"复制"：您可以复制元素的确切选择器或xpath。之后，您可以切换到"控制台"选项卡，并使用Chrome api，您可以测试选择器的内容，以便为木偶剧脚本准备它。例如：$('#input_2').textContent应该显示您希望单击的按钮的文本，否则您需要更改访问权限，或者您需要检查是否有更多具有相同选择器的 elment 等。这可能有助于您找到更合适的选择器。