鑰匙要點(diǎn)
-
Phantomcss是一個(gè)Node.js工具，可執(zhí)行視覺回歸測試，這是一種自動(dòng)測試的形式，該形式檢查網(wǎng)頁元素是否按預(yù)期出現(xiàn)。它通過獲取頁??面或特定元素的屏幕截圖，將其與存儲(chǔ)的基線圖像進(jìn)行比較，並在屏幕截圖不匹配的情況下創(chuàng)建差異的圖像。
- >。 Phantomcss建立在多個(gè)組件上，包括用於與Phantomcss或Slimerjs瀏覽器，Phantomjs 2或Slimerjs相互作用的Casperjs，作為無頭瀏覽器，並相似於比較圖像的js。 使用phantomcss，以node.js腳本的形式創(chuàng)建了一個(gè)測試套件。測試套件打開所需的頁面，進(jìn)行屏幕截圖，並將它們與上一步的圖像進(jìn)行比較。如果對網(wǎng)站進(jìn)行更改，則可以再次進(jìn)行測試以將新屏幕截圖與原始屏幕截圖進(jìn)行比較。
- 如果在測試中檢測到視覺變化，則幻影突出顯示了已更改的區(qū)域。要接受這些更改，可以使用其他–rebase參數(shù)運(yùn)行測試命令。這用新的基線圖像替換為新的基線圖像。
- 如果您在職業(yè)生涯中做出了任何認(rèn)真的發(fā)展，那麼當(dāng)您意識(shí)到開發(fā)過程中自動(dòng)測試的重要性時(shí)，您可能已經(jīng)達(dá)到了一點(diǎn)。根據(jù)您的經(jīng)驗(yàn)，這種認(rèn)識(shí)可能會(huì)在一個(gè)大爆發(fā)中襲擊您，或者隨著時(shí)間的流逝，它可能會(huì)輕輕地來到您身邊，但最終將成為第二天性。自動(dòng)測試有多種形式，從單元測試，測試隔離的代碼，集成和功能測試時(shí)，當(dāng)您測試系統(tǒng)的不同部分如何共同行為時(shí)。本文一般不是關(guān)於自動(dòng)測試的概述。它是關(guān)於一個(gè)特定的和一個(gè)相對較新的利基，稱為
- 視覺回歸測試
。 >視覺回歸測試採用另一種方法來測試網(wǎng)頁。該測試不僅要確保DOM中存在某些元素或文本值，還可以打開頁面，並檢查此特定塊是否看起來完全像您希望它到
>。只是為了確保您獲得了差異，讓我給您一個(gè)例子。想像一下，您希望您的網(wǎng)站向訪問者打招呼：<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>為了確保它有效，您可以（並且應(yīng)該）單位測試產(chǎn)生消息的代碼，以檢查其插入正確的名稱。您還可以使用硒或量角器編寫功能測試，以查看該元素是否實(shí)際上在頁面上使用正確的文本存在。但這還不夠。我們不僅要測試文本是正確生成的或出現(xiàn)在DOM中的文本，還要確保整個(gè)元素
>正確，即確保元素不會(huì)被顯示：無或有人並沒有意外地覆蓋文本的顏色。有許多工具可以做到這一點(diǎn)，但是今天我們將特別研究一個(gè)選項(xiàng) - 幻影。
什麼是phantomcss？Phantomcss是一種進(jìn)行視覺回歸測試的node.js工具。它是開源的，由赫德爾的傢伙開發(fā)。 Phantomcss允許您運(yùn)行一個(gè)無頭瀏覽器，打開頁面並在頁面上進(jìn)行整個(gè)頁面或特定元素的屏幕截圖。此屏幕截圖將作為基線圖像存儲(chǔ)，以供將來參考。每當(dāng)您更改網(wǎng)站上的任何內(nèi)容時(shí)，都可以再次運(yùn)行Phantomcss。它將採用另一個(gè)屏幕截圖並將其與原始圖像進(jìn)行比較。如果找不到差異，則測試將通過。但是，如果屏幕截圖不匹配，測試將失敗，並且將創(chuàng)建差異的新圖像供您查看。這種方法使該工具非常適合測試CSS的更改。
Phantomcss構(gòu)建在幾個(gè)關(guān)鍵組件的頂部：casperjs - 一種與Phantomcss或Slimerjs瀏覽器進(jìn)行交互的工具。它允許您打開頁面並執(zhí)行用戶交互，例如單擊按鈕或輸入值。此外，Casperjs提供了自己的測試框架和捕獲頁面屏幕截圖的能力。
Phantomjs 2或Slimerjs - 兩個(gè)不同的無頭瀏覽器，兩種無頭瀏覽器都可以與Phantomcs一起使用。無頭瀏覽器就像沒有用戶界面的普通瀏覽器一樣。
- >類似於js - 用於比較圖像的庫。
- phantomcss可以與phantomjs和slimerjs一起使用，但是在本文中，我們將使用phantomjs。 讓我們旋轉(zhuǎn)
- >讓我們設(shè)置一個(gè)小型測試項(xiàng)目，以了解如何在實(shí)踐中使用此工具。為此，我們將需要一個(gè)網(wǎng)頁來測試和一個(gè)簡單的node.js Web服務(wù)器，以便Casperjs可以打開頁面。
設(shè)置測試項(xiàng)目
>創(chuàng)建一個(gè)帶有一些示例內(nèi)容的index.html文件：
>>要安裝Web服務(wù)器，初始化NPM項(xiàng)目並安裝HTTP-Server軟件包。
運(yùn)行服務(wù)器，讓我們定義一個(gè)簡單的NPM腳本。只需將以下腳本部分添加到package.json
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>
>現(xiàn)在您可以從項(xiàng)目文件夾中運(yùn)行NPM啟動(dòng)，並且索引頁將在默認(rèn)地址http://127.0.0.1:8080上訪問。啟動(dòng)服務(wù)器，現(xiàn)在讓它運(yùn)行。我們將在一段時(shí)間內(nèi)需要它。
>安裝Phantomcss
>安裝Phantomcss很容易，您需要做的就是在項(xiàng)目中添加一些依賴項(xiàng)：
<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)建一個(gè)測試套件>現(xiàn)在，我們擁有建立第一個(gè)測試套件所需的一切。 Phantomcss測試套件是以Node.js腳本的形式創(chuàng)建的，您可以在其中打開網(wǎng)站所需的頁面，進(jìn)行屏幕截圖並將其與上一步中的圖像進(jìn)行比較。我們從基於Phantomcss本身的演示的簡單測試案例開始。
>
<span>npm init </span><span>npm install http-server --save-dev</span>測試將打開http://127.0.0.1：8080/，請屏幕截圖，並將其保存在屏幕截圖/body.png。
>一旦我們將測試本身就位，剩下的就是定義腳本以運(yùn)行測試。讓我們將以下腳本添加到package。
>您現(xiàn)在可以通過執(zhí)行以下命令來運(yùn)行它：
><span>"scripts": {
</span> <span>"start": "http-server"
</span><span>},</span>
您將看到的輸出應(yīng)該看起來像這樣：
<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>
>由於您是第一次進(jìn)行測試，因此它將創(chuàng)建一個(gè)新的基線屏幕截圖，並且不會(huì)進(jìn)行任何比較。繼續(xù)前進(jìn)，窺視屏幕截圖文件夾。您應(yīng)該看到這樣的圖像：
<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)站應(yīng)該如何外觀的黃金標(biāo)準(zhǔn)，並且測試的未來執(zhí)行將將其結(jié)果與此圖像進(jìn)行比較。
引入回歸如果您再次運(yùn)行相同的測試命令，它將報(bào)告所有測試已成功傳遞：
>這是可以預(yù)期的，因?yàn)槲覀儧]有在網(wǎng)站上更改任何內(nèi)容。讓我們打破一些東西，再次重新進(jìn)行測試。例如，嘗試在index.html中更改一些樣式，將塊的大小降低到400px。現(xiàn)在讓我們再次進(jìn)行測試，看看會(huì)發(fā)生什麼：
>
<span>"test": "casperjs test test.js"</span>在這裡發(fā)生了一些重要的事情。首先，Phantomcss報(bào)告說，由於屏幕截圖Body_0.png的不匹配，測試失敗了。不匹配為11.41％。其次，當(dāng)前版本和上一個(gè)版本之間的差異保存在“故障文件夾”中。如果打開它，您會(huì)看到這樣的屏幕截圖：
>
<span>npm test</span>屏幕截圖方便地突出了已更改的區(qū)域，因此很容易發(fā)現(xiàn)差異。
接受更改
>現(xiàn)在已經(jīng)強(qiáng)調(diào)了差異，我們該怎麼做才能接受更改？我們應(yīng)該以某種方式能夠告訴該工具我們要堅(jiān)持使用塊的寬度減小，並接受當(dāng)前視圖作為新標(biāo)準(zhǔn)。為此，您可以使用附加的 - rebase參數(shù)運(yùn)行test命令：
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>請注意兩個(gè)雙重破折號。這是NPM將參數(shù)傳遞到基礎(chǔ)命令的方式。因此，以下命令將導(dǎo)致casperjs test.js -rebase。既然我們已經(jīng)接受了更改，則將以新的基線圖像替換為新的圖像。
>
進(jìn)一步>現(xiàn)在您已經(jīng)掌握了基礎(chǔ)知識(shí)，您可以開始考慮將此工具集成到自己的工作流程中。我不會(huì)詳細(xì)介紹它，因?yàn)樗囟俄?xiàng)目，但是這裡有一些問題要思考：
>您是否要針對真實(shí)網(wǎng)站或某種樣式指南進(jìn)行測試，其中只有單獨(dú)的UI元素？
- >
- 您的網(wǎng)站有動(dòng)態(tài)內(nèi)容嗎？如果是，那麼內(nèi)容的更改將導(dǎo)致測試破裂。為了避免這種情況，您需要設(shè)置一個(gè)具有靜態(tài)上下文的網(wǎng)站的單獨(dú)版本，以對其進(jìn)行測試。
- 您是否要將屏幕截圖添加到版本控件中？是的，你應(yīng)該。
- 您要拍攝整個(gè)頁面的屏幕截圖還是單獨(dú)的元素？ >
- >使用此工具，您現(xiàn)在可以通過自動(dòng)測試來介紹網(wǎng)站的視覺方面。有了您的單元和功能測試，這種新策略將填補(bǔ)您的測試前沿中的狹窄空白。即使您仍然是測試的新手 - 這是一個(gè)很好的起點(diǎn)！
經(jīng)常詢問的問題（常見問題解答）有關(guān)使用幻影測試的視覺回歸測試
什麼是phantomcss，它如何工作？
>
>我可以將phantomcss與其他測試框架一起使用嗎？與其他測試框架（如摩卡咖啡，茉莉花和Qunit）一起使用。它也可以與詹金斯（Jenkins）和特拉維斯（Travis）CI等連續(xù)集成系統(tǒng)進(jìn)行集成。 將使用phantomcss進(jìn)行視覺回歸測試的優(yōu)點(diǎn)是什麼？phantomcss為視覺回歸測試提供了幾種優(yōu)勢。它可以自動(dòng)捕獲和比較屏幕截圖的過程，從而節(jié)省了大量時(shí)間。它還提供了一個(gè)視覺報(bào)告，使得可以輕鬆發(fā)現(xiàn)基線圖像和測試圖像之間的差異。此外，Phantomcss支持響應(yīng)式設(shè)計(jì)測試，使開發(fā)人員可以在不同的屏幕尺寸上測試其網(wǎng)頁。 >我如何在phantomcss中調(diào)試測試？ >我可以自定義phantomcss中的比較過程嗎？ >> phantomcss的視覺回歸測試的替代方法是什麼？ >有幾種替代方法可用於phantomcss for Phantomcss for視覺回歸測試，包括Backstopjs，Wraith和Gemini。這些工具提供了與幻影相似的功能，但根據(jù)您的特定需求，它們可能具有不同的優(yōu)勢和劣勢。
>我如何在phantomcss中調(diào)試測試？ > phantomcss的視覺回歸測試的替代方法是什麼？ >我可以自定義phantomcss中的比較過程嗎？
>有幾種替代方法可用於phantomcss for Phantomcss for視覺回歸測試，包括Backstopjs，Wraith和Gemini。這些工具提供了與幻影相似的功能，但根據(jù)您的特定需求，它們可能具有不同的優(yōu)勢和劣勢。
以上是幻影的視覺回歸測試的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫
Jul 07, 2025 am 12:07 AM
創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過HTML和CSS實(shí)現(xiàn)簡單動(dòng)畫；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。
解決CSS瀏覽器兼容性問題和前綴
Jul 07, 2025 am 01:44 AM
處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動(dòng)畫表現(xiàn)不同；2.查閱CanIuse確認(rèn)特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動(dòng)添加前綴；5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器；6.構(gòu)建時(shí)自動(dòng)處理兼容性；7.老項(xiàng)目可用Modernizr檢測特性；8.不必追求所有瀏覽器一致，確
顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(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
設(shè)置訪問過鏈接的樣式能提升用戶體驗(yàn)，尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào)，避免突兀；4.移動(dòng)端可能不顯示該效果，建議結(jié)合其他視覺提示如icon輔助標(biāo)識(shí)。
使用CSS剪輯路徑創(chuàng)建自定義形狀
Jul 09, 2025 am 01:29 AM
使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優(yōu)勢包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應(yīng)式調(diào)整，適配移動(dòng)端；3.易於動(dòng)畫化，可結(jié)合hover或JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果；4.不影響佈局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意
如何使用CSS創(chuàng)建響應(yīng)式圖像？
Jul 15, 2025 am 01:10 AM
要使用CSS創(chuàng)建響應(yīng)式圖片，主要可通過以下方法實(shí)現(xiàn)：1.使用max-width:100%和height:auto讓圖片在保持比例的同時(shí)自適應(yīng)容器寬度；2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點(diǎn)展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。
揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較
Jul 08, 2025 am 02:16 AM
CSS單位的選擇取決於設(shè)計(jì)需求和響應(yīng)式要求。 1.px用於固定尺寸，適合精確控制但缺乏彈性；2.em是相對單位，受父元素影響易導(dǎo)致級聯(lián)問題，rem則基於根元素更穩(wěn)定，適合全局縮放；3.vw/vh基於視口大小，適合響應(yīng)式設(shè)計(jì)，但需注意極端屏幕下的表現(xiàn)；4.選擇時(shí)應(yīng)根據(jù)是否需要響應(yīng)式調(diào)整、元素層級關(guān)係及視口依賴程度來決定，合理搭配使用可提升佈局靈活性與維護(hù)性。
什麼是常見的CSS瀏覽器不一致？
Jul 26, 2025 am 07:04 AM
不同瀏覽器對CSS解析存在差異，導(dǎo)致顯示效果不一致，主要包括默認(rèn)樣式差異、盒模型計(jì)算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認(rèn)樣式處理不一致，解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式；2.舊版IE的盒模型計(jì)算方式不同，建議統(tǒng)一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異，應(yīng)多測試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級
