搜尋

首頁 >web前端 >css教學 >幻影的視覺回歸測試

幻影的視覺回歸測試

Lisa Kudrow
Lisa Kudrow原創
2025-02-21 08:24:11853瀏覽

幻影的視覺回歸測試

鑰匙要點

    Phantomcss是一個Node.js工具，可執行視覺回歸測試，這是一種自動測試的形式，該形式檢查網頁元素是否按預期出現。它通過獲取頁​​面或特定元素的屏幕截圖，將其與存儲的基線圖像進行比較，並在屏幕截圖不匹配的情況下創建差異的圖像。
  • >。 Phantomcss建立在多個組件上，包括用於與Phantomcss或Slimerjs瀏覽器，Phantomjs 2或Slimerjs相互作用的Casperjs，作為無頭瀏覽器，並相似於比較圖像的js。
    • 使用phantomcss，以node.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一起使用。無頭瀏覽器就像沒有用戶界面的普通瀏覽器一樣。

    >類似於js - 用於比較圖像的庫。
  • phantomcss可以與phantomjs和slimerjs一起使用，但是在本文中，我們將使用phantomjs。
    • 讓我們旋轉
    • >讓我們設置一個小型測試項目，以了解如何在實踐中使用此工具。為此，我們將需要一個網頁來測試和一個簡單的node.js Web服務器，以便Casperjs可以打開頁面。
>

設置測試項目

>創建一個帶有一些示例內容的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進行視覺回歸測試的優點是什麼？

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

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

>我可以自定義phantomcss中的比較過程嗎？ >

> phantomcss的視覺回歸測試的替代方法是什麼？

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

以上是幻影的視覺回歸測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript json css html npm coffeescript Static define if for while try Error break double using Interface delete JS console number default dom this display jenkins kind http ui everything Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：幽靈：輕巧的CSS框架下一篇：幽靈：輕巧的CSS框架

相關文章

看更多