日照網站建設_視覺還原測試的多面性

借助于多種技術和流程，視覺還原測試可以有多種風格。雖然新的工具不斷地被發布到開源社區，但它們通常是一小部分功能的組合。大多數工具可以歸屬為以下幾類。

基于頁面的比較

　　Wraith是一個基于頁面的比較的例子。它使用 YAML 作為設置文件，因此可以很輕松地比較來自兩個不同來源的一大串頁面列表。當你不期望兩個不同來源的頁面有任何差異時，比如需要比較線上頁面和在工作中即將部署的頁面時，這個方法會很合適。

基于組件的比較

　　在基于組件或基于選擇器的比較方面，BackstopJS是一個很好的選擇?；诮M件的比較工具使你可以抓取獨立的頁面片段進行對比，這樣可以寫出更有針對性的測試，并防止誤報。舉例來說，如果頁面頂部的組件把所有其他組件都擠了下去，那么所有其他的組件就都被誤報了。

CSS單位測試

　　Quixote是一類獨特的比較工具，用于比較 CSS 單位的差異而不是視覺上的差異。Quixote 可以設置 TDD 模式的測試用例，這些用例會設置好預期的 CSS 數值（比如字體大小為 1em，側邊欄的內邊距是 2.5%），然后檢測頁面是否滿足這些條件。它還可以診斷頁面是否遵守品牌的視覺規范，比如 logo 的尺寸是否正確，以及 logo 與其他內容是否保持恰當的距離。

基于無頭瀏覽器的測試

　　Gemini是一款可以使用無頭瀏覽器 PhantomJS的比較工具，它可以在抓取截圖之前加載 Web 頁面。 PhantomJS 是 JavaScript 實現的 WebKit 內核的瀏覽器，這意味著它速度非?？欤⑶揖哂锌缙脚_的一致性。

基于桌面瀏覽器的測試

　　Gemini 非常獨特，它支持在傳統的桌面瀏覽器上運行測試用例。為了達到這個目的， Gemini 使用 Selenium 服務器打開并操作系統中安裝的瀏覽器。這種方式沒有基于無頭瀏覽器的方式快，而且也受到系統安裝的瀏覽器版本的影響；但是它更接近真實情況，并且可以發現某個特定瀏覽器引入的 bug。

包含腳步庫文件

　　CasperJS是一個導航腳步庫，可以和 PhantomJS 等無頭瀏覽器協同工作。該工具可以和在瀏覽器中打開的頁面進行交互。使用它，你可以點擊按鈕，等待模態窗口，填充并提交表單，對結果進行截圖。CasperJS 還可以在 PhantomJS 打開的頁面中執行 JavaScript，你可以隱藏元素、關掉動畫，甚至可以用靜態模擬內容替代動態真實內容，以避免由于“博文”的發布導致測試不通過。

基于圖形用戶界面的比較工具，支持更改確認

　　Diffux 項目存儲了測試歷史數據，并可以在基于 Web 的用戶界面中提供測試結果的反饋?；鶞蕡D像存儲在數據庫中，任何對它的改動都必須在該應用界面中標記為接受或拒絕。當不懂技術的股票持有人需要確認每一個變動是否正確時，這些工具就顯得很重要了。

基于命令行的比較工具，支持更改確認

　　PhantomCSS是一款基于組件的比較工具，借助于 PhantomJS 和 CasperJS，它可以僅通過命令行來運行。測試是通過命令行終端運行的，無論測試是否通過，其結果都會輸出到命令行終端里。這種類型的工具尤其適合通過 Grunt 或者 Gulp 運行，而其輸出也很適合 Jenkins 或者 Travis CI 等自動化工具。

以上是日照網站建設公司（昊諾網絡公司）分享，如果你想了解更多的網站建設知識請關注我們網站的動態！