基於AngularJS的Web應用程序的Web UI迴歸測試

Question

在最近基於AngularJS的求職面試中，客戶討論了對Web UI迴歸測試的需求。

客戶簡要地介紹了他們已經推出了最後一分鐘DOM更改爲生產的情況，但事實證明，他們添加的新按鈕導致頁面上出現了一些問題（我相信確切的問題是新按鈕變得隱藏起來，但沒有人提前發現問題）。

談話中出現的主要問題是，如果我能想出一個網絡用戶界面迴歸測試，將舊UI與新用戶界面進行比較，那將是一件好事。

我自己不是一個迴歸測試專家，我尋求一些關於最好的UI測試工具的建議。

有一些AngularJS的經驗，我的第一種方法是使用量角器 - 我知道是基於硒的webdriver。

我也遇到過一些Visual UI迴歸工具，如https://github.com/garris/BackstopJS,http://screenster.io/和https://www.parasoft.com/capability/web-ui-testing/。

所以我的主要問題在於AngularJS測試人員：測試應用程序中DOM更改的最佳解決方案是什麼？

如果這個問題太含糊，我會提前道歉，但我正在尋求關於UI迴歸測試最佳方法的建議。

預先感謝您...

鮑勃

Answer 1

我花了一段時間來回答這個問題，因爲我覺得這很重要，你的客戶的情況非常有效，並且是實時發生的。我希望這將清除一些關於Web UI測試自動化的概念。

我假設你知道爲什麼以及如何改變DOM。這主要是由於JavaScript函數或ajax調用發生的變化，我們的測試腳本嘗試查找Web元素時可能無法捕獲它們導致着名的時間窗口陳舊元素例外。現在，讓我們把注意力集中在如何發生的背景 -

正如你可以看到上面的DOM結構，每次一個webdriver的實例/會話創建的Web元素的引用存儲其又存儲爲JSON並傳遞給sedium webdriver和構建在其上的Protractor。這將驅動瀏覽器，就像我們在瀏覽器測試和自動化中看到的一樣。

當瀏覽器刷新，導航或重新加載時，DOM樹會被破壞並重新創建，因此每個對此DOM元素的引用都將失效。元素引用可能在特定的時間框架中丟失或中斷，因此我們會得到陳舊的元素異常。

說實話，避免這些情況是不可能的，最糟糕的部分是它可能不會經常發生，那麼我們該如何解決這個惱人的情況呢？有安靜的幾個變通趕上他們efficiently-

• 重新創建catch塊整個引用層次和遞歸調用相同的方法，直到最大嘗試次數或綁定到一些其他異常。
• 要將元素定位符引用爲String，而不是使用WebElement引用它們，因爲字符串不會過時。

以上兩種方法都在下面的鏈接中詳細討論，請仔細閱讀它們，因爲我不希望把代碼放在這篇文章中，只是爲了保持理解概念的簡單性。

http://darrellgrainger.blogspot.in/2012/06/staleelementexception.html http://www.assertselenium.com/java/what-is-staleelementexception-in-webdriver/ http://softtechlabs.com/2015/09/deal-with-staleelementreferenceexception/

我希望這清除了很多東西給你！

Answer 2

我會投票支持使用量角器。您可以擁有測試用例，其中包括控制狀態測試，因此在您提到的示例中，如果您有一個測試已驗證按鈕應該啓用，另一個測試用例處於禁用狀態（或顯示/未顯示），則會失敗。