我如何單元測試HTML代碼的輸出

Question

我對Web開發和測試非常陌生（開始很慢）。 我有一個帶按鈕的頁面。 單擊按鈕后，將顯示一些信息/文本。

如何編寫測試用例來測試輸出是否符合預期（顯示）？

我想編寫一個測試用例，以確保在單擊按鈕時顯示文本。

<!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!');
}

Answer 1

您可以測試字符串是否已呈現，但單元測試應測試數據，而不是標記。 后者的問題相當罕見，並且在部署和手動測試代碼時更加明顯。 （你不會促進不明顯呈現一個按鈕，它有新的變化。）

而是將值賦給變量並測試函數中的變量是否正確。

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>')

閱讀更多內容

當然，如果任何腳本或庫添加了類或其他屬性，則會失敗。

Answer 2

您描述的測試是一個端到端測試，從用戶輸入到用戶輸出，涉及瀏覽器等復雜組件。 這樣的測試肯定不是單元測試 - 它將是子系統甚至是系統測試。

對於Web應用程序自動測試的特定問題，您可以使用Selenium（ https://en.wikipedia.org/wiki/Selenium_ ( software））等框架。 這將允許您模擬按下按鈕，然后分析生成的內容 - 不是以渲染形式，而是在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