迴歸測試Web應用程序的樣式和佈局

我意識到這是一個不平凡的任務，但有什麼辦法可以迴歸測試Web應用程序的樣式和呈現佈局嗎？我發現它可以直接用於單元測試和迴歸測試功能，包括服務器端和客戶端。然而，我遇到的一個令人沮喪的問題是，爲修復一個佈局問題而做出的CSS更改，這個佈局問題在不同的頁面上破壞了佈局和樣式。我知道如何檢測這些應用程序的唯一方法是手動查看應用程序中的每個頁面，並將其與我自己的期望進行比較，但顯然，當應用程序可能有幾十頁時，這可能會很繁瑣且代價高昂。是否有任何研究使用圖像處理或其他技術來自動檢測這些類型的問題？迴歸測試Web應用程序的樣式和佈局

來源

2011-02-28 Cerin

+1，這將是有用的，但是（如果你正確地做的話）和絕大多數的改變，你要麼打破所有的頁面，要麼沒有。 – thirtydot 2011-02-28 15:57:37

是的，但當然，每次更改後都不必檢查。 – Zsub 2011-03-02 10:22:53

實際上，Selenium隱藏的寶石之一就是您可以使用它來捕獲瀏覽器的屏幕截圖。然後使用此處描述的技術（http://www.bryancook.net/2009/10/find-differences-between-images-c.html），您可以突出顯示以前快照之間的差異。

此示例顯示如何抓取主頁的屏幕截圖，然後創建差異圖像。只需稍加修改，就可以使用相同的技術來計算不同的像素。

[Test] 
public void CompareHomePageToPrevious() 
{ 
    string fileName = Path.Combine(Environment.CurrentDirectory,"homepage.bmp"); 
    var selenium = new DefaultSelenium("localhost",4444, "*chrome", "http://mywebsite"); 
    selenium.Start(); 
    selenium.Open("/"); 
    selenium.CaptureEntirePageScreenshot(fileName, ""); 

    // load current and previous captures 
    var current = new Bitmap(filename); 
    var previous = new Bitmap(_previousHomepageImage); 

    // find all pixels that are the same and make them pink 
    Bitmap diff = ImageTool.GetDifferenceImage(current,previous,Color.Pink); 
    diff.MakeTransparent(Color.Pink); 

    // save the image for viewing 
    // or count the number of different 
}

硒是一個非常有趣的選擇，因爲它是跨平臺，跨瀏覽器，這意味着你可以捕捉不同的瀏覽器的屏幕。您可以使用此技術比較構建之間的快照或瀏覽器之間的比較。

來源

2011-03-01 03:43:52 bryanbcook

我想你可以在你的網頁應用程序中爲每個頁面生成一個'理想'的照片作爲參考。

然後在css更新後生成每個頁面的新鏡頭並與以前的鏡頭進行比較。如果您確保始終保持相同的分辨率，則1：1比較應該可以。

甚至可以這樣做，以便您可以告訴它，如果頁面不同，其他頁面實際上比'更好'該示例並使用「其他」作爲下一次運行的示例。

這樣，當您修復某些內容時，您可以看到一個頁面的差異，並將其標記爲更好，然後修復另一個頁面上的錯誤，同時確保不會使您嘗試修復的錯誤退步首先。

來源

2011-02-28 15:51:56 Zsub

其實我在公司看到過這樣的解決方案。它是在AutoIt中開發的，總的來說，它正在做你所描述的。至於說差異在哪裏，在確定有差異後，它將頁面劃分爲4個區域，並檢查這些區域是否有差異。它是遞歸地進行直到某個閾值。最後你會得到非常精確的區域，哪裏有區別。此外還提供了帶有標記區域的截圖。 – yoosiba 2011-02-28 16:54:13

這將使這更加有用:)我認爲diff算法的實際執行是相當平凡的。 – Zsub 2011-02-28 19:11:24

猜你可以使用http://code.google.com/p/browsershots/wiki/ShotFactoryStandalone（由http://browsershots.org/使用）而不是AutoIt。我還沒有嘗試 – user123444555621 2011-02-28 19:59:48

你應該檢查出Web Consistency Testing作爲你的迴歸測試的方法。 ~~我們使用這些技術爲Mogotest提供支持，Mogotest是一項用於自動化視覺迴歸和跨瀏覽器測試的託管服務。~~ 自從發佈此答案以來，我已經關閉了Mogotest服務。這裏提到的是作爲一個歷史人工製品，表明這些技術被用於生產系統，而不僅僅是學術性的飼料。

來源

2013-01-22 20:44:08 nirvdrum

這些鏈接是borked。請修復鏈接或刪除答案 – activedecay 2016-03-07 15:18:56

如果你正在開發紅寶石，看看rspec-page-regression寶石。這是一個RSpec插件，可讓您將請求的頁面快照與預期圖像進行比較。它適用於Poltergeist，這是一個Capybara驅動程序，它使用PhantomJS並支持渲染頁面快照。

Rspec的頁的迴歸提供了一個RSpec匹配器，讓你做這樣的事情

context "user page" do 
    before(:each) do 
    visit user_path 
    end 

    it { page.should match_expected } 

    context "popup help" do 
    before(:each) do 
     click_button "Help" 
    end 

    it { page.should match_expected } 
    end 
end

而且它提供了一種機制來管理預期的圖像。

聲明：我是寶石的作者。

來源

2013-03-18 14:51:54 ronen

有一種方法可以使用Galen Framework測試Web應用程序的佈局。這個工具有自己的語言，很容易學習和理解。它是基於Selenium的，如果您想在不同的瀏覽器中測試您的應用程序，您可以在Selenium Grid中運行測試，Sauce Labs。

該工具獲取頁面上指定元素的位置，並檢查它們相對於彼此。

例如：如果你想檢查菜單窗格低於頭部和延伸到瀏覽器的寬度和具有50像素高度，你可以做這樣的：

menu 
    below: header 5px 
    width: 100% of screen/width 
    height: 50px

此工具也可以用於測試響應式設計。

您可以在官方網站http://galenframework.com

找到完整的文檔最好的部分是，你甚至可以創建JAVA測試。 Galen JavaScript API也可以與github中的示例項目一起使用。

同樣，一次寫入的測試可用於應用程序生命週期的多個階段。

來源

2015-01-21 12:13:37 Samarth

迴歸測試Web應用程序的樣式和佈局

回答

相關問題