(Chrome DevTools) querySelector Returns null 即使元素在页面上明显存在

Question

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

然后我在 Google Chrome 中执行了这些步骤：

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

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

当我在检查元素模式下单击元素时，Chrome 修复了 HTML DOM，这意味着 JavaScript 现在 returns 元素符合预期.

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

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

Answer 1

根据你的, since the element is in an iframe, you can access the element using casper.withFrame()：

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

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

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

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

(Chrome DevTools) querySelector Returns null even though Element Clearly Exists on Page