(Chrome DevTools) querySelector 返回 null 即使元素在页面上明确存在答案

【问题标题】：(Chrome DevTools) querySelector Returns null even though Element Clearly Exists on Page(Chrome DevTools) querySelector 返回 null 即使元素在页面上明确存在
【发布时间】：2023-03-06 17:32:01
【问题描述】：

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

然后我在谷歌浏览器中做了这些步骤：

打开网页和 Chrome DevTools 控制台。
等待页面上的元素出现在我的眼前。
在控制台中输入：document.querySelector(".dropdown-menu")。
Chrome 提供null（元素不存在）。

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

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

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

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

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

【问题讨论】：

您能否发布相关页面，以便我们可以使用minimal reproducible example？
恐怕我做不到。该网站是私人网站，需要登录。如果不是这种情况，我很乐意发布它。
如果您无法发布该网站，是否可以复制重现该问题的 HTML？有点难以解决问题而无法看到问题出在哪里
浏览器确实会修复无效的 HTML，但它们会在页面加载时进行，而不是在您打开“元素”选项卡时进行。
也许您应该使用 HTML 验证器来尝试找出结构中的问题。

标签： javascript google-chrome phantomjs casperjs

【解决方案1】：

根据您的comment，由于该元素位于iframe 中，您可以使用casper.withFrame() 访问该元素：

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

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

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

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

【讨论】：