傀儡廻找不到元素 iframe

Question

一个表单嵌入在iframe中。我正试图使用puppeteer来填写表格，我可以选择表格中的大部分字段，但无法选择提交按钮。我可以选择表单中的大部分字段，但不能选择提交按钮。

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测试选择器的内容，从而为您的puppeteer脚本做好准备。例如：: $('#input_2').textContent 应该显示你想点击的按钮的文本，否则你需要改变访问权限，或者你需要检查是否有更多的精灵使用相同的选择器等等。这也许能帮助你找到更合适的选择器。