从innerHTML过滤HTML注释节点

Question

我想知道是否有一种方法可以过滤DOM的innerHTML，只包含实际的HTML并丢弃所有的注释节点？

实际上，我正在使用Angularjs并用Selenium编写一些测试。并在呈现的HTML中添加许多注释，如：

<!-- ngSwitchWhen: join -->
<div data-ng-switch-when="leave">
  <!-- ngIf: isNow -->
  .
  .
  .
</div>

我目前正在尝试匹配结果：@client是WebDriver实例。

@client.findElement(By.xpath("//*[@id='log']/li")).getAttribute('innerHTML').then (innerHtml) ->
      html = innerHtml.trim()
      expect(html).to.equal """
        <div class="image"><i class="icon-refresh"></i></div>
        <div class="fade-6 content">Getting more activities...</div>
      """

当我尝试用Mocha测试返回的DOM结构时，这就产生了一个大问题。我要测试什么？我不可能重复我的期望值中所有无用的评论，这将是非常浪费的。

有更好的办法吗？

Answer 1

正如您所知，注释节点是DOM节点。您可以遍历所有节点，并通过它们的节点类型筛选出注释。

recursivelyIterate(container, function (subNode) {
    if (subNode.nodeType == Node.COMMENT_NODE) {
        subNode.parentNode.removeChild(subNode);
    }
});

(我还没有包括recursivelyIterate函数的代码，但是编写一个应该很简单。)

或者，让它们保留注释be和不使用DOM节点，使用DOM元素。getElementsByTagName，querySelectorAll和朋友们。

Answer 2

编写依赖于innerHTML的测试根本不是一个好主意。

当您获取innerHTML时，浏览器将DOM中的信息序列化为一个新的标记字符串，这个字符串不一定与最初解析的生成DOM的标记相同。

标记详细信息，如：

• 属性的顺序是什么？
• 大小写标记是什么
• 标签中有什么空格？
• 用什么引号分隔属性值？
• 哪些内容字符被编码为实体或字符引用？

没有存储在DOM信息集中，因此不会保存。不同的浏览器能够并将产生不同的输出。在某些情况下，IE甚至返回无效的标记，或者在解析时不会返回到相同信息集的标记。

+1 katspaugh的答案演示了如何从DOM中获取信息，而不是依赖innerHTML，从而避免了这个问题。

但是，更普遍地说，编写强烈依赖于应用程序使用的确切标记的测试通常是个坏主意。这是测试中的需求和实现细节之间过于紧密的耦合.而且，您对标记所做的任何微小更改，即使是简单的文体原因或文本更新，都意味着您必须更新所有测试才能匹配。测试是一种有用的工具，可以捕捉到您无意破坏的东西；总是在每次更改中中断的测试都不会给您提供任何反馈，说明您是否弄坏了某件东西，因此是没有用的。

虽然通常没有将测试与应用程序标记完全分离的灵丹妙药，但通常您应该将测试减少到满足用户需求的最低限度，并添加信令来捕捉这些情况。我不知道你的应用程序到底在做什么，但我想要求是这样的：“当用户点击‘更多’按钮时，忙碌的旋转器应该会让他们知道正在获取的信息”。

要测试这一点，您可以执行类似这样的检查：“id 'log‘的元素是否包含类’图标-刷新‘的元素？”如果您想更具体地说明这是一个与获取活动有关的旋转器，您可以在“获取更多的活动.”中添加一个类似“刷新-活动”的类。使用该类检测元素，而不是依赖可能会更改的文本(特别是当您翻译应用程序时)。