驗證測試：如何驗證UI？

我被要求在我們網站的JavaScript部分實施驗證測試。我一直在考慮使用硒WebDriver。我們想要測試的一件事是用戶界面：檢查它是否「看起來很好」（必須對齊的東西是對齊的，框位於正確的位置）。驗證測試：如何驗證UI？

目前，我發現的唯一選擇是使用Selenium拍攝快照，並將其與預先手動拍攝的測試快照進行比較，或手動檢查快照。快照比較不可維護，因爲佈局中的任何更改都需要重新獲取所有測試快照，而且手動檢查非常耗時。

有沒有人知道有任何方式（在硒或其他）來實現這一目標？

2012-06-27 Stilltorik

這並不好，但它可以在一定程度上完成。

對於定位，可以使用WebElement的getLocation()（Java doc，但所有Selenium綁定中都存在相同的方法）。請注意，大多數瀏覽器呈現的方式稍有不同，所以在使用較舊的IE時，不要指望事物像素完美。而且，當例如事物可能稍微有點不同時在CSS中定義的第一個字體沒有找到，並使用替代方法。不要太依賴這種方法。但是如果你能夠讓你的測試變得健全並且你的環境保持穩定，那麼它就會起作用。

對於對準，我寫WebDriver斷言元素是目視內部另一元件的一個簡單的Java方法。

應該沒有錯誤的否定，但是當內部元素在視覺內部但是其（不可見的）實際邊界「偷看」時可能會出現一些誤報。然而，我並沒有碰到這個問題，因爲我的真實經歷，因爲漂亮的網站行爲良好，不需要這樣的黑客:)。儘管如此，這還不算什麼，Selenium也不是爲這類工作設計的，所以實施更復雜的檢查可能會更困難。

public static void assertContains(WebElement outerElem, WebElement innerElem) { 
    // get borders of outer element 
    Point outerLoc = outerElem.getLocation(); 
    Dimension outerDim = outerElem.getSize(); 
    int outerLeftX = outerLoc.getX(); 
    int outerRightX = outerLeftX + outerDim.getWidth(); 
    int outerTopY = outerLoc.getY(); 
    int outerBottomY = outerTopY + outerDim.getHeight(); 

    // get borders of inner element 
    Point innerLoc = innerElem.getLocation(); 
    Dimension innerDim = innerElem.getSize(); 
    int innerLeftX = innerLoc.getX(); 
    int innerRightX = innerLeftX + innerDim.getWidth(); 
    int innerTopY = innerLoc.getY(); 
    int innerBottomY = innerTopY + innerDim.getHeight(); 

    // assures the inner borders don't cross the outer borders 
    final String errorMsg = "ughh, some error message"; 
    final boolean contains = (outerLeftX <= innerLeftX) 
      && (innerRightX <= outerRightX) 
      && (outerTopY <= innerTopY) 
      && (innerBottomY <= outerBottomY); 
    assertTrue(errorMsg, contains); 
}

來源

2012-06-27 22:45:11

謝謝！我會測試一下。 – Stilltorik

如果您使用術語驗證的含義：「測試我們已經構建了正確的東西」，我會說這幾乎不可能自動化。如果不是讓一些人真正使用它，你會如何判斷它看起來是否令人愉快或容易使用？

這種視覺檢查也是人類擅長的。如果您在開發網站時一直使用網站，那麼如果佈局等有些可疑，您會很容易注意到。

對於功能自動化測試是個好主意。

來源

2012-06-27 16:32:09 Edu

我意識到電腦不是很擅長回答「它看起來很漂亮」的問題。但我希望能夠定義一些規則（這和這應該是對齊的，等等），可以自動檢查。我知道手動檢查是最可靠的方法，但如果我們能夠拯救自己，那會很棒:-) – Stilltorik

驗證測試：如何驗證UI？

回答

相關問題