![\"幻影的視覺回歸測試\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/174009745373028.png\")
引入回歸
鑰匙要點
-
Phantomcss是一個Node.js工具，可執(zhí)行視覺回歸測試，這是一種自動測試的形式，該形式檢查網(wǎng)頁元素是否按預期出現(xiàn)。它通過獲取頁??面或特定元素的屏幕截圖，將其與存儲的基線圖像進行比較，并在屏幕截圖不匹配的情況下創(chuàng)建差異的圖像。
- >。 Phantomcss建立在多個組件上，包括用于與Phantomcss或Slimerjs瀏覽器，Phantomjs 2或Slimerjs相互作用的Casperjs，作為無頭瀏覽器，并相似于比較圖像的js。 使用phantomcss，以node.js腳本的形式創(chuàng)建了一個測試套件。測試套件打開所需的頁面，進行屏幕截圖，并將它們與上一步的圖像進行比較。如果對網(wǎng)站進行更改，則可以再次進行測試以將新屏幕截圖與原始屏幕截圖進行比較。
- 如果在測試中檢測到視覺變化，則幻影突出顯示了已更改的區(qū)域。要接受這些更改，可以使用其他–rebase參數(shù)運行測試命令。這用新的基線圖像替換為新的基線圖像。
- 如果您在職業(yè)生涯中做出了任何認真的發(fā)展，那么當您意識到開發(fā)過程中自動測試的重要性時，您可能已經達到了一點。根據(jù)您的經驗，這種認識可能會在一個大爆發(fā)中襲擊您，或者隨著時間的流逝，它可能會輕輕地來到您身邊，但最終將成為第二天性。自動測試有多種形式，從單元測試，測試隔離的代碼，集成和功能測試時，當您測試系統(tǒng)的不同部分如何共同行為時。本文一般不是關于自動測試的概述。它是關于一個特定的和一個相對較新的利基，稱為
- 視覺回歸測試
。 >視覺回歸測試采用另一種方法來測試網(wǎng)頁。該測試不僅要確保DOM中存在某些元素或文本值，還可以打開頁面，并檢查此特定塊是否看起來完全像您希望它到
>。只是為了確保您獲得了差異，讓我給您一個例子。想象一下，您希望您的網(wǎng)站向訪問者打招呼：<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>為了確保它有效，您可以（并且應該）單位測試產生消息的代碼，以檢查其插入正確的名稱。您還可以使用硒或量角器編寫功能測試，以查看該元素是否實際上在頁面上使用正確的文本存在。但這還不夠。我們不僅要測試文本是正確生成的或出現(xiàn)在DOM中的文本，還要確保整個元素
>正確，即確保元素不會被顯示：無或有人并沒有意外地覆蓋文本的顏色。有許多工具可以做到這一點，但是今天我們將特別研究一個選項 - 幻影。
什么是phantomcss？Phantomcss是一種進行視覺回歸測試的node.js工具。它是開源的，由赫德爾的家伙開發(fā)。 Phantomcss允許您運行一個無頭瀏覽器，打開頁面并在頁面上進行整個頁面或特定元素的屏幕截圖。此屏幕截圖將作為基線圖像存儲，以供將來參考。每當您更改網(wǎng)站上的任何內容時，都可以再次運行Phantomcss。它將采用另一個屏幕截圖并將其與原始圖像進行比較。如果找不到差異，則測試將通過。但是，如果屏幕截圖不匹配，測試將失敗，并且將創(chuàng)建差異的新圖像供您查看。這種方法使該工具非常適合測試CSS的更改。
Phantomcss構建在幾個關鍵組件的頂部：casperjs - 一種與Phantomcss或Slimerjs瀏覽器進行交互的工具。它允許您打開頁面并執(zhí)行用戶交互，例如單擊按鈕或輸入值。此外，Casperjs提供了自己的測試框架和捕獲頁面屏幕截圖的能力。
Phantomjs 2或Slimerjs - 兩個不同的無頭瀏覽器，兩種無頭瀏覽器都可以與Phantomcs一起使用。無頭瀏覽器就像沒有用戶界面的普通瀏覽器一樣。
- >類似于js - 用于比較圖像的庫。
- phantomcss可以與phantomjs和slimerjs一起使用，但是在本文中，我們將使用phantomjs。 讓我們旋轉
- >讓我們設置一個小型測試項目，以了解如何在實踐中使用此工具。為此，我們將需要一個網(wǎng)頁來測試和一個簡單的node.js Web服務器，以便Casperjs可以打開頁面。
設置測試項目
>創(chuàng)建一個帶有一些示例內容的index.html文件：
>>要安裝Web服務器，初始化NPM項目并安裝HTTP-Server軟件包。
運行服務器，讓我們定義一個簡單的NPM腳本。只需將以下腳本部分添加到package.json
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>
>現(xiàn)在您可以從項目文件夾中運行NPM啟動，并且索引頁將在默認地址http://127.0.0.1:8080上訪問。啟動服務器，現(xiàn)在讓它運行。我們將在一段時間內需要它。
>安裝Phantomcss
>安裝Phantomcss很容易，您需要做的就是在項目中添加一些依賴項：
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>.tag</span> {
</span></span></span><span><span> <span>color: #fff;
</span></span></span><span><span> <span>font-size: 30px;
</span></span></span><span><span> <span>border-radius: 10px;
</span></span></span><span><span> <span>padding: 10px;
</span></span></span><span><span> <span>margin: 10px;
</span></span></span><span><span> <span>width: 500px;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-first</span> {
</span></span></span><span><span> <span>background: lightcoral;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-second</span> {
</span></span></span><span><span> <span>background: lightskyblue;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-first"</span>></span>The moving finger writes, and having written moves on.<span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-second"</span>></span>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></div</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>創(chuàng)建一個測試套件>現(xiàn)在，我們擁有建立第一個測試套件所需的一切。 Phantomcss測試套件是以Node.js腳本的形式創(chuàng)建的，您可以在其中打開網(wǎng)站所需的頁面，進行屏幕截圖并將其與上一步中的圖像進行比較。我們從基于Phantomcss本身的演示的簡單測試案例開始。
>
<span>npm init </span><span>npm install http-server --save-dev</span>測試將打開http://127.0.0.1：8080/，請屏幕截圖，并將其保存在屏幕截圖/body.png。
>一旦我們將測試本身就位，剩下的就是定義腳本以運行測試。讓我們將以下腳本添加到package。
>您現(xiàn)在可以通過執(zhí)行以下命令來運行它：
><span>"scripts": {
</span> <span>"start": "http-server"
</span><span>},</span>
您將看到的輸出應該看起來像這樣：
<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>
>由于您是第一次進行測試，因此它將創(chuàng)建一個新的基線屏幕截圖，并且不會進行任何比較。繼續(xù)前進，窺視屏幕截圖文件夾。您應該看到這樣的圖像：
<span>var phantomcss = require('phantomcss');
</span>
<span>// start a casper test
</span>casper<span>.test.begin('Tags', function(test) {
</span>
phantomcss<span>.init({
</span> <span>rebase: casper.cli.get('rebase')
</span> <span>});
</span>
<span>// open page
</span> casper<span>.start('http://127.0.0.1:8080/');
</span>
<span>// set your preferred view port size
</span> casper<span>.viewport(1024, 768);
</span>
casper<span>.then(function() {
</span> <span>// take the screenshot of the whole body element and save it under "body.png". The first parameter is actually a CSS selector
</span> phantomcss<span>.screenshot('body', 'body');
</span> <span>});
</span>
casper<span>.then(function now_check_the_screenshots() {
</span> <span>// compare screenshots
</span> phantomcss<span>.compareAll();
</span> <span>});
</span>
<span>// run tests
</span> casper<span>.run(function() {
</span> <span>console.log('\nTHE END.');
</span> casper<span>.test.done();
</span> <span>});
</span><span>});</span>
>這是您的網(wǎng)站應該如何外觀的黃金標準，并且測試的未來執(zhí)行將將其結果與此圖像進行比較。
引入回歸如果您再次運行相同的測試命令，它將報告所有測試已成功傳遞：
>這是可以預期的，因為我們沒有在網(wǎng)站上更改任何內容。讓我們打破一些東西，再次重新進行測試。例如，嘗試在index.html中更改一些樣式，將塊的大小降低到400px?，F(xiàn)在讓我們再次進行測試，看看會發(fā)生什么：
>
<span>"test": "casperjs test test.js"</span>在這里發(fā)生了一些重要的事情。首先，Phantomcss報告說，由于屏幕截圖Body_0.png的不匹配，測試失敗了。不匹配為11.41％。其次，當前版本和上一個版本之間的差異保存在“故障文件夾”中。如果打開它，您會看到這樣的屏幕截圖：
>
<span>npm test</span>屏幕截圖方便地突出了已更改的區(qū)域，因此很容易發(fā)現(xiàn)差異。
接受更改
>現(xiàn)在已經強調了差異，我們該怎么做才能接受更改？我們應該以某種方式能夠告訴該工具我們要堅持使用塊的寬度減小，并接受當前視圖作為新標準。為此，您可以使用附加的 - rebase參數(shù)運行test命令：
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>請注意兩個雙重破折號。這是NPM將參數(shù)傳遞到基礎命令的方式。因此，以下命令將導致casperjs test.js -rebase。既然我們已經接受了更改，則將以新的基線圖像替換為新的圖像。
>
進一步>現(xiàn)在您已經掌握了基礎知識，您可以開始考慮將此工具集成到自己的工作流程中。我不會詳細介紹它，因為它特定于項目，但是這里有一些問題要思考：
>您是否要針對真實網(wǎng)站或某種樣式指南進行測試，其中只有單獨的UI元素？
- >
- 您的網(wǎng)站有動態(tài)內容嗎？如果是，那么內容的更改將導致測試破裂。為了避免這種情況，您需要設置一個具有靜態(tài)上下文的網(wǎng)站的單獨版本，以對其進行測試。
- 您是否要將屏幕截圖添加到版本控件中？是的，你應該。
- 您要拍攝整個頁面的屏幕截圖還是單獨的元素？ >
- >使用此工具，您現(xiàn)在可以通過自動測試來介紹網(wǎng)站的視覺方面。有了您的單元和功能測試，這種新策略將填補您的測試前沿中的狹窄空白。即使您仍然是測試的新手 - 這是一個很好的起點！
經常詢問的問題（常見問題解答）有關使用幻影測試的視覺回歸測試
什么是phantomcss，它如何工作？
>
>我可以將phantomcss與其他測試框架一起使用嗎？與其他測試框架（如摩卡咖啡，茉莉花和Qunit）一起使用。它也可以與詹金斯（Jenkins）和特拉維斯（Travis）CI等連續(xù)集成系統(tǒng)進行集成。將使用phantomcss進行視覺回歸測試的優(yōu)點是什么？phantomcss為視覺回歸測試提供了幾種優(yōu)勢。它可以自動捕獲和比較屏幕截圖的過程，從而節(jié)省了大量時間。它還提供了一個視覺報告，使得可以輕松發(fā)現(xiàn)基線圖像和測試圖像之間的差異。此外，Phantomcss支持響應式設計測試，使開發(fā)人員可以在不同的屏幕尺寸上測試其網(wǎng)頁。>我如何在phantomcss中調試測試？>我可以自定義phantomcss中的比較過程嗎？>> phantomcss的視覺回歸測試的替代方法是什么？>有幾種替代方法可用于phantomcss for Phantomcss for視覺回歸測試，包括Backstopjs，Wraith和Gemini。這些工具提供了與幻影相似的功能，但根據(jù)您的特定需求，它們可能具有不同的優(yōu)勢和劣勢。
>我如何在phantomcss中調試測試？ > phantomcss的視覺回歸測試的替代方法是什么？>我可以自定義phantomcss中的比較過程嗎？
>有幾種替代方法可用于phantomcss for Phantomcss for視覺回歸測試，包括Backstopjs，Wraith和Gemini。這些工具提供了與幻影相似的功能，但根據(jù)您的特定需求，它們可能具有不同的優(yōu)勢和劣勢。
以上是幻影的視覺回歸測試的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
顯示：內聯(lián)，顯示：塊和顯示：內聯(lián)塊之間有什么區(qū)別？
Jul 11, 2025 am 03:25 AM
Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo??ntalpadding/margins—idealforinlinetextstyling
造型與CSS不同訪問的鏈接
Jul 11, 2025 am 03:26 AM
設置訪問過鏈接的樣式能提升用戶體驗，尤其在內容密集型網(wǎng)站中幫助用戶更好導航。1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出于隱私限制僅允許修改部分屬性；3.顏色選擇應與整體風格協(xié)調，避免突兀；4.移動端可能不顯示該效果，建議結合其他視覺提示如icon輔助標識。
使用CSS剪輯路徑創(chuàng)建自定義形狀
Jul 09, 2025 am 01:29 AM
使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優(yōu)勢包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應式調整，適配移動端；3.易于動畫化，可結合hover或JavaScript實現(xiàn)動態(tài)效果；4.不影響布局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意
如何使用CSS創(chuàng)建響應式圖像？
Jul 15, 2025 am 01:10 AM
要使用CSS創(chuàng)建響應式圖片，主要可通過以下方法實現(xiàn)：1.使用max-width:100%和height:auto讓圖片在保持比例的同時自適應容器寬度；2.結合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控制圖片裁剪與焦點展示。這些方法共同確保圖片在不同設備上清晰、美觀地呈現(xiàn)。
揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較
Jul 08, 2025 am 02:16 AM
CSS單位的選擇取決于設計需求和響應式要求。1.px用于固定尺寸，適合精確控制但缺乏彈性；2.em是相對單位，受父元素影響易導致級聯(lián)問題，rem則基于根元素更穩(wěn)定，適合全局縮放；3.vw/vh基于視口大小，適合響應式設計，但需注意極端屏幕下的表現(xiàn)；4.選擇時應根據(jù)是否需要響應式調整、元素層級關系及視口依賴程度來決定，合理搭配使用可提升布局靈活性與維護性。
什么是常見的CSS瀏覽器不一致？
Jul 26, 2025 am 07:04 AM
不同瀏覽器對CSS解析存在差異，導致顯示效果不一致，主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid布局支持程度及某些CSS屬性行為不一致。1.默認樣式處理不一致，解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式；2.舊版IE的盒模型計算方式不同，建議統(tǒng)一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異，應多測試并使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse并提供降級
描述'不透明度”屬性
Jul 15, 2025 am 01:23 AM
opacity是CSS中用于控制元素整體透明度的屬性，取值范圍為0（完全透明）到1（完全不透明）。1.常用于圖片hover淡出效果，通過設置opacity過渡增強交互體驗；2.制作背景遮罩層提升文字可讀性；3.控制按鈕或圖標在禁用狀態(tài)下的視覺反饋。需注意它會影響所有子元素，且與rgba不同，后者僅影響指定顏色部分。搭配transition可實現(xiàn)平滑動畫，但頻繁使用可能影響性能，建議結合will-change或transform使用。合理應用opacity能增強頁面層次感和交互性，但應避免干擾用戶
什么是口音色的物業(yè)？
Jul 26, 2025 am 09:25 AM
accent-color是CSS中用于自定義復選框、單選按鈕和滑塊等表單元素高亮顏色的屬性；1.它直接改變表單控件選中狀態(tài)的默認顏色，如將復選框的藍色勾選標記改為紅色；2.支持的元素包括type="checkbox"、type="radio"和type="range"的輸入框；3.使用accent-color可避免復雜的自定義樣式和額外DOM結構，保持原生可訪問性；4.現(xiàn)代瀏覽器普遍支持，舊瀏覽器需降級處理；5.設置accent-col
