如何对HTML代码的输出进行单元测试

Question

如何对HTML代码的输出进行单元测试

5

我非常新手网站开发和测试（从慢开始）。我有一个页面上有一个按钮。一旦点击按钮，会显示一些信息/文本。

如何编写测试用例来测试输出是否符合预期（即是否已显示）？

我想编写一个测试用例来确保在单击按钮时显示文本。

<!DOCTYPE html>
<html>
 <body>

 <button onclick="buttonClick()">Click Me</button>
 <p id="test"></p>

  <script>
    function buttonClick() {
      document.getElementById("test").innerHTML = "TESTING!";
}
  </script>

 </body>
</html>

我猜想我可以使用某种字符串验证器。如果屏幕上出现了字符串，那就意味着测试通过了。我不确定这是否有意义，或者这是否是正确的方法。

谢谢

用于测试的代码:

var elem = document.getElementById('test');
var text = 'TESTING!';

if (
   document.getElementById('test').innerHTML.indexOf('TESTING') != -1){
     alert('success!');
}

- prim3

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- isherwood · Answer 1

你可以测试字符串是否被渲染，但单元测试应该测试数据而不是标记。后者的问题相对较少，并且在部署代码并进行手动测试时更容易发现（您不会推广未明显呈现具有 something 内容的按钮的更改）。相反，将值分配给变量并测试函数中的变量是否正确。

function buttonClick();
    let myButtonText = 'TESTING!';
    document.getElementById("test").innerHTML = myButtonText;
}

// in the test, assert that myButtonText should equal your string,
// which demonstrates that the function works or has been called

如果将字符串传递到调用函数的位置, 这个测试可能会更有价值:

function buttonClick(str);
    document.getElementById("test").innerHTML = str;
}

// assert that str is defined when inside the function

如果需要测试输出内容，您可以查看基于元素ID的按钮字符串值（nodeValue或textContent），或在文档中查找整个标记字符串。这两种方法都满足您的要求，但它们都是脆弱的（依赖于特定的标记和字符串值）。

检查整个文档中的标记片段可能会像这样：

 document.documentElement.innerHTML.indexOf('<button>string</button>')

阅读更多相关内容

当然，如果任何脚本或库添加了类或其他属性，则此方法将失败。

- Dirk Herrmann · Answer 2

根据您的描述，这个测试是一个端到端的测试，从用户输入到用户输出，涉及到像浏览器这样的复杂组件。这样的测试绝对不是单元测试 - 它可能是子系统甚至是系统测试。

对于自动化测试Web应用程序的特定问题，您可以使用类似Selenium（https://en.wikipedia.org/wiki/Selenium_(software)）的框架。这将允许您模拟按钮按下，然后随后分析生成的内容 - 不是以呈现形式，而是在html页面内容（文本）的级别上。