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可以测试选择器的内容，因此可以为操纵up脚本做好准备。例如：$('#input_2').textContent应该显示您希望单击的按钮的文本，否则您需要更改访问权限，或者需要检查是否有更多具有相同选择器的元素，等等。这可能帮助您找到更合适的选择器。

木偶找不到元素iframe

1 个答案: