我如何单元测试HTML代码的输出

Question

I am extremely new to web development and testing (starting slow). 我对Web开发和测试非常陌生（开始很慢）。 I have a page with a button. 我有一个带按钮的页面。 Once the button is clicked, some information/text is displayed. 单击按钮后，将显示一些信息/文本。

How do I write a test case to test that the output is as expected (that its displayed)? 如何编写测试用例来测试输出是否符合预期（显示）？

I want to write a test case to make sure that the text is displayed when the button is clicked. 我想编写一个测试用例，以确保在单击按钮时显示文本。

<!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>

My guess is that I could use some sort of string verifier. 我的猜测是我可以使用某种字符串验证器。 If strings are present on the screen, that means the test passed. 如果屏幕上出现字符串，则表示测试通过。 I am unsure if that makes sense, or if it is the correct approach. 我不确定这是否合理，或者它是否是正确的方法。

Thanks, 谢谢，

Code for testing: 测试代码：

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

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

Answer 1

You could test that the string is rendered, but unit tests should test data, not markup. 您可以测试字符串是否已呈现，但单元测试应测试数据，而不是标记。 Problems with the latter are fairly rare and are more obvious when code is deployed and manually tested. 后者的问题相当罕见，并且在部署和手动测试代码时更加明显。 (You wouldn't promote changes that don't obviously render a button with something in it.) （你不会促进不明显呈现一个按钮，它有新的变化。）

Instead, assign the value to a variable and test that the variable is correct in your function. 而是将值赋给变量并测试函数中的变量是否正确。

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

This test is maybe more valuable if the string is passed into the function where the function is called: 如果字符串传递到其中函数调用的函数这个测试也许是更有价值：

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

// assert that str is defined when inside the function

If you're required to test the output, you could look at the button's string value ( nodeValue or textContent ) based on element ID, or look for the entire markup string in the document. 如果您需要测试输出，可以根据元素ID查看按钮的字符串值（ nodeValue或textContent ），或者在文档中查找整个标记字符串。 Both approaches meet your requirement, but are fragile (dependent on specific markup and string values). 这两种方法都符合您的要求，但是很脆弱（取决于特定的标记和字符串值）。

Checking the document in its entirety for a markup snippet might look like this: 完整检查文档以获取标记代码段可能如下所示：

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

Read more on that 阅读更多内容

Of course, if any script or library adds a class or other attribute, this fails. 当然，如果任何脚本或库添加了类或其他属性，则会失败。

Answer 2

The test as you describe it is an end-to-end test, from user input until user output, involving complex components like the browser(s). 您描述的测试是一个端到端测试，从用户输入到用户输出，涉及浏览器等复杂组件。 Such tests are definitely no unit-tests - it would be subsystem or even system tests. 这样的测试肯定不是单元测试 - 它将是子系统甚至是系统测试。

For the specific problem of automated testing of web applications you could use a framework like Selenium ( https://en.wikipedia.org/wiki/Selenium_(software) ). 对于Web应用程序自动测试的特定问题，您可以使用Selenium（ https://en.wikipedia.org/wiki/Selenium_ ( software））等框架。 This would allow you to simulate the button press and then subsequently analyse the resulting content - not in rendered form, but on the level of the html page content (text). 这将允许您模拟按下按钮，然后分析生成的内容 - 不是以渲染形式，而是在html页面内容（文本）的级别上。

我如何单元测试HTML代码的输出

问题描述

2 个解决方案

解决方案1
0 2019-05-08 13:48:01

解决方案2
0 2019-05-08 22:23:42

我如何单元测试HTML代码的输出

问题描述

2 个解决方案

解决方案1 0 2019-05-08 13:48:01

解决方案2 0 2019-05-08 22:23:42

解决方案1
0 2019-05-08 13:48:01

解决方案2
0 2019-05-08 22:23:42