自動視覺佈局測試

是否有可能單元測試的東西是視覺渲染想要的（對於一些想要的定義）？專門爲HTML和CSS渲染你的頁面，「預期」

我個人想象這樣的工具允許你在的東西是應該怎樣看，然後運行實際複雜的啓發式聲明方式定義一個測試記錄你的測試，確定它如何「接近」你的聲明性定義。自動視覺佈局測試

是否有其他方法可以對機器進行測試，比如HTML文件的內容是否可視化一致。

我不是在問幾乎不可能的問題：「看起來不錯」，而是看起來是否一致或者它是否與給定模式相匹配。

最後的問題是，如果這些工具不存在，他們值得寫嗎？這種性質的工具是否會給你帶來有意義的結果，而不會受到很大的誤差限制。即他們能否準確預測一些代碼變更是否會破壞您的視覺佈局而不會給出大量的錯誤否定或丟失明顯被破壞的事物。

2011-03-29 Raynos

高度相關：http://stackoverflow.com/questions/4043706/automated-testing-of-css-and-html-front-end-coding – thirtydot 2011-03-29 13:46:43

你說過： ''以聲明方式測試應該看起來如何的東西「 - 」應該看起來怎麼樣「的聲明被稱爲HTML/CSS。任何其他聲明應該看起來如何的方式都會錯過HTML/CSS的細微差別，否則就會像兩者結合那樣複雜。這種類型的工具（如你所說）是不可行的。還有不同的渲染引擎需要考慮。 Gecko和WebKit是開源的，所以你可以在那裏工作，但是Trident（Internet Explorer）呢？ – thirtydot 2011-03-29 14:18:42

@thirtydot微軟的分區使IE開源？我明白你的意思了。我更多的建議是對頁面看起來像一個圖像做一些聲明性的定義，然後將HTML轉換爲圖像並進行比較。 – Raynos 2011-03-29 15:07:09

-9

最後的問題是，如果這些工具不存在，他們是值得寫？

我不這麼認爲，因爲它需要幾秒鐘看看網頁，看看是否所有的元件被正確渲染，而你可能會花費至少幾個星期寫作和從頭測試這樣的工具。

來源

2011-03-29 13:49:39

最初的成本應該標記爲我將要使用開源工具的X人數。這是一個準確性和市場營銷的問題，是否值得去做。 – Raynos 2011-03-29 14:03:55

我不能限制自己評論這一個。這聽起來像是舊式程序員關於單元測試的典型說法。是的，檢查一個頁面需要幾秒鐘的時間，但是如果您的網站包含大量的屏幕或動態頁面，則會發生什麼情況：您可能會發現，對於某些參數組合，某些溢出並會徹底破壞佈局。 – Steves 2012-08-27 16:27:56

史蒂夫，我完全同意。一次查看一頁需要幾秒鐘的時間。但我們通常需要查看20+頁面50+次。 – 2013-08-01 19:17:11

我不認爲你需要複雜的圖像分析。如前所述，無論如何，瀏覽器之間會有很小的差異。還有一些你可能會忽視的太小可能是非常重要的，例如一個小圖標的變化。

如果你想跨瀏覽器測試，它將是非常困難的自動化。但是您可以創建一個工具來檢查意外的視覺變化。保存所需的DOM狀態，然後將其與更改後的版本進行比較可能有助於突出顯示問題。如果您更改期望僅在頁面上生效的CSS類，則運行您的測試會在其他頁面上顯示不期望的knockon影響。

來源

2012-03-01 08:59:36 moefinley

我個人想象這樣的工具允許你在的東西是應該怎樣看，然後在實際的文件中運行一個複雜的啓發式您的測試，它確定如何「關閉」它是一種聲明的方式定義一個測試你的聲明性定義。

有一種方法可以使用Galen Framework（它是我幫助開發的工具）準確測試您的需求。它是一種具有自己語言的特殊工具，可以表達網站的外觀。它基於Selenium，並且可以在Selenium Grid中運行，如果您需要在不同的瀏覽器中檢查它。目前該工具正在做什麼 - 它正在獲取頁面上指定元素的位置並相互檢查它們。因此，舉例來說，如果你想檢查菜單面板低於頭部和延伸到瀏覽器的寬度和具有50像素高度，你做這樣的：

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

在你不想的情況下斷言爲精確值，你可以做這樣的

menu 
    below: header 0 to 5 px 
    width: 90 to 100% of screen/width 
    height: 45 to 55px

的工具是用於測試響應式設計，你可以使用自定義標籤來滿足精確的規格爲您的需要有用。例如，如果我們想要表達的是桌面上的「側面板」應該在靜態寬度爲300像素的屏幕的右側，但是在移動設備上它應該低於「內容」並且延伸以完成寬度一個瀏覽器，你這樣做：

@ desktop 
--------------------- 
content 
    inside: screen 0px left 

side-panel 
    inside: screen 0px right 
    near: content 0px right 
    width: 300px 

@ mobile 
-------------------- 
content, side-panel 
    width: 100% of screen/width 

side-panel 
    below: content 0px

由於它是一個新的工具沒有很多的信息。目前只有一篇文章解釋如何使用Galen Framework http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/來測試響應式網頁。

您還可以在官方網站上找到完整的文檔http://galenframework.com

來源

2013-11-29 09:57:47

好吧，如果你有興趣在CSS和HTML渲染幾個瀏覽器就可以自動執行比較截圖測試。

我參與了一個類似的測試，首先我們所有的CSS都從少編譯，然後測試。基本上這個過程就是生成基本的屏幕截圖，然後在發生變化時比較新的屏幕截圖。

這裏是我爲基線創建一個的NodeJS小CSS測試項目： https://github.com/adcarabajal/generator-css-testing

乾杯

來源

2014-05-23 17:19:11

您可以嘗試一些工具是這樣的： Screenster，mogotest。兩者都使用視覺匹配進行佈局測試。

來源

2014-11-05 03:52:07

如果您有興趣使用CSS HTML視覺測試，differencify可以幫您。它是一個建立在無頭的chrome頂部的nodejs庫

來源

2017-07-26 08:32:19

自動視覺佈局測試

回答

相關問題