（Chrome DevTools）querySelector即使页面上明显存在元素，也返回null

Question

我正在尝试使用CasperJS抓取一个网站，但casper.waitForSelector()函数总是超时，这意味着它永远不会找到我需要的给定元素。

然后我在Google Chrome中执行了以下步骤：

1. 打开网页和Chrome DevTools控制台。
2. 等待元素在我眼睛的页面上可见。
3. 输入控制台：document.querySelector(".dropdown-menu")。
4. Chrome提供null（元素不存在）。

但是，当我切换到Elements（DevTools），然后在Inspect Element Mode（或其中一个子元素）中单击所需元素时，Chrome将使用相同的document.querySelector(".dropdown-menu")命令返回控制台中的元素。

我怀疑该页面包含无效的HTML代码（未关闭的标签）。

当我点击Inspect Element Mode中的元素时，Chrome会修复HTML DOM，这意味着JavaScript现在会按预期返回元素。

如果这是真的，我可以在CasperJS中做些什么来触发相同的DOM修复事件吗？

如果不是这样，它可能是什么？

Answer 1

根据你的comment，因为元素在iframe中，你可以使用casper.withFrame()访问元素：

casper.withFrame('frame_1', function () {
  var dropdown_menu = this.getElementInfo('.dropdown-menu');

  this.echo(dropdown_menu.html);
});

或者，您可以使用以下功能之一切换当前主框架范围：

• casper.switchToFrame()
• casper.switchToMainFrame()
• casper.switchToParentFrame()

或者，您甚至可以通过page访问现有的PhantomJS WebPage实例，并调用其中一个基础PhantomJS方法进行帧导航：

• casper.page.switchToChildFrame()
• casper.page.switchToFocusedFrame()
• casper.page.switchToFrame()
• casper.page.switchToMainFrame()
• casper.page.switchToParentFrame()