测试操纵DOM的Javascript代码

Question

我一直在研究JavaScript测试套件，发现QUnit非常有趣。我知道如何测试计算代码，但是...

如何测试主要用于DOM操作的JavaScript应用程序？

似乎测试DOM元素的位置/颜色等是无意义的，因为最终你会像这样做：

$("li.my_element").css("background-color", "#f00");

然后在你的测试中...

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

这感觉不太对，因为它基本上只是在做这个：

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

我疯了吗？这应该怎么做？

编辑：问题的核心：

我想说的是，我需要确保代码在部署之前没有问题，但其中绝大部分都是 UI 帮助程序和 ajax。如何测试是否正确显示事物？

几个示例：

• 测试 JQuery UI 对话框是否出现在所有其他元素上方。
• 测试拖放功能是否正常工作。
• 测试当元素被拖放到可放置区域时，可放置区域的颜色是否会改变。
• 测试 ajax 是否全部正常工作。
• 测试是否存在可能会破坏 IE 的多余逗号。

- Jiaaro

---

此外，加剧了这一点的是css('foo')返回元素计算出的样式。因此，尽管您可能设置为“#f00”，但您将获取“#ff0000”。 - Crescent Fresh

你的目的是什么？是为了测试UI的外观还是功能性测试？ - Ates Goral

这看起来像是一个不必要的低级测试。jQuery（以及任何其他合理的库）已经对其方法（在这种情况下为css）进行了非常详细的单元测试。 - kangax

这是我想要表达的核心 - 我如何测试我的动画是否看起来正确，或者元素在正确的时间改变颜色/可见性/大小？ - Jiaaro

Answer 1

我发现JavaScript/DOM测试，特别是对于你描述的简单交互，不是很有用。你将会测试设置是否正确，由于jQuery非常声明式，你的测试看起来很像你的代码。

我目前的想法是，如果你正在编写更大的JS组件，那么将一组相关的行为分解出来，并将其转化为一个jQuery插件和相应的测试集合是有意义的。

但从你提到的例子来看，似乎你真正需要的是集成网站内部的一定程度的保护。像Selenium这样的工具可能更加强大和适合你。具体而言，它

• 可以自动化
• 可以在多个浏览器上运行，包括IE
• 在你的Web应用程序和页面的上下文中运行，因此可以在实际发生拖放的地方进行测试，而不是在某个测试环境中。
• 可以测试AJAX

- ndp

---

Selenium这样的工具（或者今天的现代化替代品：Playwright）的另一个优点是它可以针对实际浏览器进行测试。 - rinogo

Answer 2

不要测试 JQuery 的 css 函数。你的测试应该模拟 css 函数，并确保它只被正确调用了一次。被测试的代码应该是你自己的代码，而不是框架的代码。

- Jason Harwig

Answer 3

除了Jason Harwig所说的，我认为单元测试是一种测试，以确保代码按预期运行。如果您想测试这一点，那么Jason绝对是正确的。如果您想运行测试来检查DOM操作（UI测试）而不是执行DOM操作的实际代码（单元测试），那么您可能需要查看类似于Selenium，WatiN或Watir的东西。

- J.R. Garcia

Answer 4

我猜很多人都是通过视觉测试的：也就是说，他们查看监视器上浏览器的输出，以查看是否像预期那样操作了DOM。

如果需要自动化测试用例（例如回归测试），那么可能会记录输出（如屏幕截图），并执行类似于比较两个屏幕截图以查看结果是否相同的操作。

与其捕获屏幕截图，不如捕获整个DOM，并对捕获的DOM树进行并排比较（这可能比比较像素更少出错）。

- ChrisW

Answer 5

我这样测试 AJAX 的东西：

1. 进行 AJAX 调用
2. 设置 JavaScript 计时器
3. 检查 DOM 是否发生了预期的更改

现在，可能是 AJAX 调用在您进行检查之前没有返回，但这也是有用的测试信息；使用 AJAX 调用后，通常会有一些时间，我们将其称为失败。例如，如果我们正在做一个建议弹出窗口，并且它花费了 30 秒才返回，那就是失败。

- Hogsmill