区分DOM - 如何编写单元测试来检查脚本是否对页面上的元素进行任何用户可见的更改?

时间:2013-03-21 12:21:53

标签: javascript unit-testing dom testing selenium

我最近写过的一个JavaScript插件有内置的各种故障,告诉整个插件或其中的一部分隐藏自己并在无法运行的情况下死掉。例如,假设我们提供的一项功能是自动生成一个弹出窗口,当用户在一个在线商店中悬停它时,该弹出窗口显示竞争对手的物品价格。然后我们还会有一些检查,如果我们不知道任何竞争对手的价格,或者我们无法识别该项目,那么就不要显示一个弹出窗口。

我想使用大致遵循此结构的测试来测试该功能 - 禁用

  1. 将我们的插件加载到应该禁用某些功能的页面
  2. 欺骗一些否则会触发该功能的用户操作
  3. 断言没有对DOM进行任何可见的更改。 (即没有样式更改为可见元素,除非他们display:none已开启,否则不会添加或删除元素
  4. 当然,步骤#3是有趣的。是否有一种简单的方法可以在JavaScript中编写“DOM未更改”测试? (或者在Selenium for Python中,我正在使用它编写我的测试 - 但是用JavaScript编写检查可能更广泛,因为它可以在任何JavaScript测试环境中使用。)


    P.S。一些笔记要说明“你做错了!”人群:

    • 是的,我知道我可以在上面的测试中替换步骤#3,并检查该插件原本无法进行的特定更改,我可以甚至决定这样做。但是,如果这些具体的变化很少被推测并且可能会发生变化,那么这种包罗万象的方法可能会有用。

    • 是的,我也意识到当触发无效的事件时,只检查DOM没有立即视觉上的变化并不足以证明没有什么破碎。不过,这对我目前的目的来说是最好的。此外,即使事实证明它没有用,它也很有趣,也很有趣。

1 个答案:

答案 0 :(得分:4)

使用Mutation观察者检测没有发生突变。您可能想要检查Mutation Summary,这是一个非常好的突变观察者高级包装器。检查没有发生突变可能很容易,因为检查返回的数组的长度为0.请参阅https://code.google.com/p/mutation-summary/