幻影的視覺回歸測試-css教學-PHP中文網

鑰匙要點

接受更改

phantomcss為視覺回歸測試提供了幾種優勢。它可以自動捕獲和比較屏幕截圖的過程，從而節省了大量時間。它還提供了一個視覺報告，使得可以輕鬆發現基線圖像和測試圖像之間的差異。此外，Phantomcss支持響應式設計測試，使開發人員可以在不同的屏幕尺寸上測試其網頁。

>我如何在phantomcss中調試測試？

>我可以自定義phantomcss中的比較過程嗎？ >
> phantomcss的視覺回歸測試的替代方法是什麼？
>有幾種替代方法可用於phantomcss for Phantomcss for視覺回歸測試，包括Backstopjs，Wraith和Gemini。這些工具提供了與幻影相似的功能，但根據您的特定需求，它們可能具有不同的優勢和劣勢。

首頁

web前端

css教學

幻影的視覺回歸測試

Lisa Kudrow

Feb 21, 2025 am 08:24 AM

幻影的視覺回歸測試

鑰匙要點

>。 Phantomcss建立在多個組件上，包括用於與Phantomcss或Slimerjs瀏覽器，Phantomjs 2或Slimerjs相互作用的Casperjs，作為無頭瀏覽器，並相似於比較圖像的js。
如果在測試中檢測到視覺變化，則幻影突出顯示了已更改的區域。要接受這些更改，可以使用其他–rebase參數運行測試命令。這用新的基線圖像替換為新的基線圖像。
視覺回歸測試

。 >視覺回歸測試採用另一種方法來測試網頁。該測試不僅要確保DOM中存在某些元素或文本值，還可以打開頁面，並檢查此特定塊是否看起來完全像您希望它到

>。只是為了確保您獲得了差異，讓我給您一個例子。想像一下，您希望您的網站向訪問者打招呼：

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

登入後複製

為了確保它有效，您可以（並且應該）單位測試產生消息的代碼，以檢查其插入正確的名稱。您還可以使用硒或量角器編寫功能測試，以查看該元素是否實際上在頁面上使用正確的文本存在。但這還不夠。我們不僅要測試文本是正確生成的或出現在DOM中的文本，還要確保整個元素

>正確，即確保元素不會被顯示：無或有人並沒有意外地覆蓋文本的顏色。有許多工具可以做到這一點，但是今天我們將特別研究一個選項 - 幻影。

什麼是phantomcss？

Phantomcss是一種進行視覺回歸測試的node.js工具。它是開源的，由赫德爾的傢伙開發。 Phantomcss允許您運行一個無頭瀏覽器，打開頁面並在頁面上進行整個頁面或特定元素的屏幕截圖。此屏幕截圖將作為基線圖像存儲，以供將來參考。每當您更改網站上的任何內容時，都可以再次運行Phantomcss。它將採用另一個屏幕截圖並將其與原始圖像進行比較。如果找不到差異，則測試將通過。但是，如果屏幕截圖不匹配，測試將失敗，並且將創建差異的新圖像供您查看。這種方法使該工具非常適合測試CSS的更改。

Phantomcss構建在幾個關鍵組件的頂部：>

casperjs - 一種與Phantomcss或Slimerjs瀏覽器進行交互的工具。它允許您打開頁面並執行用戶交互，例如單擊按鈕或輸入值。此外，Casperjs提供了自己的測試框架和捕獲頁面屏幕截圖的能力。

Phantomjs 2或Slimerjs - 兩個不同的無頭瀏覽器，兩種無頭瀏覽器都可以與Phantomcs一起使用。無頭瀏覽器就像沒有用戶界面的普通瀏覽器一樣。

phantomcss可以與phantomjs和slimerjs一起使用，但是在本文中，我們將使用phantomjs。

設置測試項目

>創建一個帶有一些示例內容的index.html文件：

>要安裝Web服務器，初始化NPM項目並安裝HTTP-Server軟件包。

運行服務器，讓我們定義一個簡單的NPM腳本。只需將以下腳本部分添加到package.json

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

登入後複製

>現在您可以從項目文件夾中運行NPM啟動，並且索引頁將在默認地址http://127.0.0.1:8080上訪問。啟動服務器，現在讓它運行。我們將在一段時間內需要它。

>安裝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>

登入後複製

創建一個測試套件

>現在，我們擁有建立第一個測試套件所需的一切。 Phantomcss測試套件是以Node.js腳本的形式創建的，您可以在其中打開網站所需的頁面，進行屏幕截圖並將其與上一步中的圖像進行比較。我們從基於Phantomcss本身的演示的簡單測試案例開始。

<span>npm init
</span><span>npm install http-server --save-dev</span>

登入後複製

測試將打開http://127.0.0.1：8080/，請屏幕截圖，並將其保存在屏幕截圖/body.png。

>一旦我們將測試本身就位，剩下的就是定義腳本以運行測試。讓我們將以下腳本添加到package。

>您現在可以通過執行以下命令來運行它：

<span>"scripts": {
</span>  <span>"start": "http-server"
</span><span>},</span>

登入後複製

您將看到的輸出應該看起來像這樣：

<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>

登入後複製

>由於您是第一次進行測試，因此它將創建一個新的基線屏幕截圖，並且不會進行任何比較。繼續前進，窺視屏幕截圖文件夾。您應該看到這樣的圖像：

<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>

登入後複製

>這是您的網站應該如何外觀的黃金標準，並且測試的未來執行將將其結果與此圖像進行比較。

引入回歸

如果您再次運行相同的測試命令，它將報告所有測試已成功傳遞：>

>這是可以預期的，因為我們沒有在網站上更改任何內容。讓我們打破一些東西，再次重新進行測試。例如，嘗試在index.html中更改一些樣式，將塊的大小降低到400px。現在讓我們再次進行測試，看看會發生什麼：

<span>"test": "casperjs test test.js"</span>

登入後複製

在這裡發生了一些重要的事情。首先，Phantomcss報告說，由於屏幕截圖Body_0.png的不匹配，測試失敗了。不匹配為11.41％。其次，當前版本和上一個版本之間的差異保存在“故障文件夾”中。如果打開它，您會看到這樣的屏幕截圖：

<span>npm test</span>

登入後複製

屏幕截圖方便地突出了已更改的區域，因此很容易發現差異。

接受更改

>現在已經強調了差異，我們該怎麼做才能接受更改？我們應該以某種方式能夠告訴該工具我們要堅持使用塊的寬度減小，並接受當前視圖作為新標準。為此，您可以使用附加的 - rebase參數運行test命令：

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

登入後複製

請注意兩個雙重破折號。這是NPM將參數傳遞到基礎命令的方式。因此，以下命令將導致casperjs test.js -rebase。既然我們已經接受了更改，則將以新的基線圖像替換為新的圖像。

進一步

>現在您已經掌握了基礎知識，您可以開始考慮將此工具集成到自己的工作流程中。我不會詳細介紹它，因為它特定於項目，但是這裡有一些問題要思考：>

>您是否要針對真實網站或某種樣式指南進行測試，其中只有單獨的UI元素？

您的網站有動態內容嗎？如果是，那麼內容的更改將導致測試破裂。為了避免這種情況，您需要設置一個具有靜態上下文的網站的單獨版本，以對其進行測試。
您是否要將屏幕截圖添加到版本控件中？是的，你應該。
您要拍攝整個頁面的屏幕截圖還是單獨的元素？

經常詢問的問題（常見問題解答）有關使用幻影測試的視覺回歸測試

什麼是phantomcss，它如何工作？

>如何使用幻象來進行視覺回歸測試？ >使用phantomcss進行視覺回歸測試，您首先需要創建一個測試腳本，該測試腳本告訴Phantomcss可以捕獲什麼屏幕截圖。該腳本可以用JavaScript或CoffeeScript編寫。腳本準備就緒後，您可以使用phantomjs運行它。然後，Phantomcss將捕獲指定元素的屏幕截圖，將它們與基線圖像進行比較，並生成一個報告顯示差異的報告。

>我可以將phantomcss與其他測試框架一起使用嗎？與其他測試框架（如摩卡咖啡，茉莉花和Qunit）一起使用。它也可以與詹金斯（Jenkins）和特拉維斯（Travis）CI等連續集成系統進行集成。

將使用phantomcss進行視覺回歸測試的優點是什麼？