(Chrome DevTools) 即使元素明显存在于页面上，querySelector 返回 null

Question

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

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

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

但是，当我切换到元素 (DevTools)，然后在检查元素模式（或其子元素之一）中单击所需的元素时，Chrome 会使用相同的document.querySelector(".dropdown-menu")命令在控制台中返回该元素。

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

当我在“检查元素模式”下单击该元素时，Chrome 会修复 HTML DOM，这意味着 JavaScript 现在会按预期返回该元素。

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

如果这不是真的，那可能是什么？

Answer 1

根据您的评论，由于该元素位于 an 中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()

或者，您甚至可以通过访问现有的 PhantomJS WebPage 实例page并调用底层 PhantomJS 方法之一进行框架导航：

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