CSS和HTML前端編碼的自動化測試

我是一位編碼CSS，HTML和Javascript的前端開發人員（按此順序），我所做的大多數工作都是設計引導。雖然質量的設計我用CSS創建是主觀的，大部分的編碼是純粹的功能/佈局，我感興趣的任何方式來自動化我的網頁的測試。CSS和HTML前端編碼的自動化測試

我的問題可以分成兩個部分

沒有人有任何現有技術或建議自動測試CSS或HTML，特別是跨瀏覽器兼容？
如CSS可以大致劃分成控制佈局特性和那些控制的設計，是自動化測試唯一可行的用於佈局（它可以是不可能的自動和有價值測試例如顏色是否正確）？如果是這樣，什麼樣的 CSS值可能適合布爾驗收測試？

這裏是我可以測試的布爾佈局值的初始示例 - 必須有其他嗎？

是否彈出出現上述其他內容（的z-index）
是否頁腳清除所有其他內容（浮動）

感謝您的幫助。問題的第三部分當然是「我在這條路上浪費時間嗎？」。

*****編輯*****

我發現這篇文章，詢問我問同樣的問題，但更深入，也許有點更雄辯。

http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/

展望未來，我試圖孤立從我的工作，其中單獨的CSS但是已經引起功能性錯誤的，我已經發現了一些例子，到目前爲止與JS 和 CSS漏洞相結合。我仍然想自動測試這些類型的錯誤，但明白使用javascript已經超出了我原來的問題範圍。

*****編輯2 *****

我一直以來的博客上講述我如何着手解決這個問題，可在這裏：

http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/

來源

2010-10-28 ajcw

是的，但是如果你需要測試10個瀏覽器（包括每個瀏覽器的不同版本）和3個不同的操作系統，也許還可以在移動設備上看起來不錯。這並不像「打開頁面並查看它的外觀」那麼簡單。更多的，你可以有3種不同的佈局，不同的款式，不同的款式，你想確保它看起來像你想要的。我認爲這是不可能的（至少對我來說），但總是有聰明的人在這種事情上思考，也許其中一個人想出了一個很酷的解決方案。 – nerohc 2011-09-29 19:38:36

W3驗證和Adobe Browser Labs是我可以提供給這個問題的最佳解決方案。回到我做界面佈局和設計時（閱讀= cutup猴子），那些是我的兩個最好的朋友。

真的沒有辦法自動測試外觀如何。所以，你回到視覺檢查你自己的一切，或者衆包（或內部）測試人員爲你做同樣的事情。這不是很有趣，但它使我們前端的業務人員。

好消息是，很多瀏覽器共享渲染引擎。所以，如果你在Chrome上正確測試，你可以打賭你在Safari中會很好。檢查Firefox和IE，你已經解決了90％的問題。然後，確定你（或你的老闆）如何挑剔並相應地進行測試。

來源

2010-10-28 15:27:59

感謝您的回答。我已經掌握了所有手動跨瀏覽器測試，但希望（讀=抓着吸管？）我可以自動化一些。 – ajcw 2010-10-28 15:44:56

看看Selenium - 這是一個基於瀏覽器的自動化測試工具。我想這就是你要找的。

它適用於所有的瀏覽器（它在Firefox創建測試腳本的IDE，但腳本本身可以在任何瀏覽器中運行）

它可以讓你測試DOM等對內容腳本期間任何點的預期輸出。

來源

2010-10-28 15:39:30 Spudley

硒是一個非常漂亮的工具。有一條學習曲線，但不是太陡峭。 – 2010-10-28 16:36:24

硒也像地獄一樣緩慢（只是野獸的性質）。但是，結合一個可以戳動頁面的javaScript系統，你可以得到很快運行的東西。我用硒加載了一個主要是javaScript單元測試框架，這很好。我將它與一個持續集成系統（Jenkins）連接起來，並且發現了各種奇妙的奇怪錯誤，而且我不必總是不停地啓動Windows VM。 – 2012-02-06 17:36:54

如果你正在尋找一種建立迴歸測試檢查的工具：

https://github.com/bfirsh/needle

它基本上需要你選擇的部分截圖（檢查他們的例子），並比較。如果他們彼此太不相同，測試將失敗。它使用Selenium，所以你不妨檢查其他斷言，像Z-indizes，字體大小等

來源

2011-11-29 08:21:51

看起來不錯，謝謝！ – 2013-08-01 19:38:24

當OP發佈這些工具可能不存在，但他們是值得一提：

CasperJS，它採用PhantomJS https://ghostinspector.com/（自動化旅程） https://github.com/BBC-News/wraith（用於截圖對比）

來源

2016-06-01 09:55:46 codeAline

您還可以檢查Nighwatch.js

Nightwat ch.js是基於瀏覽器的應用程序和網站的基於Node.js的端到端（E2E）測試解決方案。它使用強大的W3C WebDriver API在DOM元素上執行命令和斷言。

來源

2017-02-20 11:43:44 obotezat

CSS和HTML前端編碼的自動化測試

回答

相關問題