（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代码无效（未关闭的标签）。

当我在“检查元素模式”中单击该元素时，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()