什么是視覺回歸測試？

視覺回歸測試（Visual Regression Testing）是一種軟件測試技術(shù)，專注于檢測Web應(yīng)用程序或網(wǎng)站的用戶界面中的視覺變化和差異。

它涉及在不同的開發(fā)階段捕獲網(wǎng)頁的屏幕截圖或圖像，并進行比較，用來識別由代碼更改或更新引起的任何意外的視覺回歸。

為什么視覺回歸測試很重要？

視覺回歸測試之所以重要有幾個原因：

• 增強用戶體驗：視覺錯誤會對用戶體驗產(chǎn)生負(fù)面影響，導(dǎo)致用戶滿意度下降。通過檢測和修復(fù)視覺回歸，可以確保流暢一致的用戶界面，從而提高用戶參與度。
• 檢測UI是否一致：在大型應(yīng)用程序中，保持各個頁面之間的視覺一致性可能具有挑戰(zhàn)性。視覺回歸測試有助于識別用戶界面 (UI) 不一致的地方，并確保遵守設(shè)計指南和品牌標(biāo)準(zhǔn)。
• 防止未檢測到的錯誤：傳統(tǒng)的功能測試可能無法捕獲所有視覺問題，因此視覺回歸測試對于識別可能導(dǎo)致未注意到的錯誤或設(shè)計缺陷的細(xì)微視覺變化至關(guān)重要。
• 支持持續(xù)集成 (CI/CD)：將視覺回歸測試集成到 CI/CD 中，可以在每次代碼更改時進行自動測試，從而可以及早檢測到視覺回歸并防止它們進入生產(chǎn)環(huán)境。
• 最大限度地減少時間和精力：手動視覺測試可能非常耗時且容易出錯，自動化視覺回歸測試減少了手動工作量并增加了測試覆蓋率，從而提高了測試效率。

一般來說，視覺回歸測試是如何工作的？

視覺回歸測試流程

1. 場景內(nèi)，第一次執(zhí)行腳本時，會截取某個組件或者整個頁面的截圖，并保存下來供以后對比；
2. 在下一次執(zhí)行中，將拍攝另一張屏幕截圖，并與之前存在的屏幕截圖進行進一步比較；
3. 如果發(fā)現(xiàn)差異，執(zhí)行將失敗，輸出將是上面顯示的差異圖像；
4. 分析差異后，你可以選擇將其假設(shè)為錯誤并進行相應(yīng)處理，或者將其假設(shè)為預(yù)期和有意的更改，并且可以選擇覆蓋預(yù)先存在的屏幕截圖，以便可能在下次執(zhí)行時有更新的版本。

實施這些測試的現(xiàn)有工具是什么？

就市場上的工具而言，可以分為付費和免費兩類：

• 在付費工具中，可以突出顯示Percy、Chromatic 和 Happo等示例。
• 另一方面，免費工具有Playwright、Cypress插件、Wraith和 BackstopJS等。

在本文中，我將更詳細(xì)地介紹如何使用Playwright運行這些測試。

什么是Playwright？

Playwright是Microsoft開發(fā)的開源自動化庫，專為測試和自動化 Web 應(yīng)用程序而設(shè)計，特別針對現(xiàn)代 Web 瀏覽器。

Playwright 提供了功能強大且用戶友好的 API，允許開發(fā)人員和測試人員與網(wǎng)頁交互、模擬用戶操作并驗證應(yīng)用程序的行為。

專門針對視覺測試，Playwright 提供了一個內(nèi)置功能來執(zhí)行這些測試，使用像素匹配庫作為比較引擎。

此外，Playwright 允許在不同的屏幕尺寸和不同的瀏覽器中執(zhí)行這些測試，能夠覆蓋每個場景。這個是在playwright.config（https://playwright.dev/docs/test-configuration）文件中配置的。

像素匹配如何工作？

這個庫負(fù)責(zé)分析和比較測試期間捕獲的屏幕截圖與基線圖像，用來檢測任何視覺差異或回歸。

它計算圖像之間的像素級差異并生成突出顯示變化的差異圖像。

來源：pixelmatch github

此外還有其他庫，例如 Resemble.js（在 BackstopJS 中使用）和 Blink-diff，但不同的是，pixelmatch大約有150行代碼，沒有依賴性，并且適用于圖像數(shù)據(jù)的原始類型數(shù)組，因此它快速且可靠可以在任何環(huán)境下使用。

如何實施簡單的Playwright視覺測試？

當(dāng)團隊已將Playwright用于其他測試級別時，在這些測試中使用Playwright非常有用。

但如果這是你第一次使用它，應(yīng)該按照他們的文檔使用TypeScript安裝 Playwright（https://playwright.dev/docs/intro）。

另外，請確保安裝了NodeJS和 IDE，例如Visual Studio Code。

如果使用的是yarn，為了安裝Playwright，請考慮運行：

yarn create playwright

之后，創(chuàng)建一個名為example.spec.ts的 .spec 文件，例如：

import { test, expect } from '@playwright/test';
test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot();
});

為了執(zhí)行該腳本，請運行：

npx playwright test

當(dāng)你第一次運行此腳本時，將遇到測試運行程序的以下輸出：

Error: A snapshot doesn't exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, writing actual.

發(fā)生這種情況的原因是，它獲取該頁面的屏幕截圖，然后當(dāng)它嘗試與基本屏幕截圖進行比較時，它在本地沒有找到具有該名稱的屏幕截圖。

因此，它保存了屏幕截圖，以便在接下來的測試執(zhí)行中進行比較。

將來，如果再次運行測試但失敗，則意味著兩個屏幕截圖之間存在視覺差異，你必須評估這是否是由于代碼中的錯誤或有意更改造成的。

如果這是有意更改，運行帶有標(biāo)志— update-snapshots 的執(zhí)行命令：

npx playwright test --update-snapshots

屏幕截圖命名法如何運作？

1. 使用 .spec 文件的名稱創(chuàng)建文件夾（如果尚不存在）；
2. 使用名稱保存屏幕截圖，在本例中為 example-test-1 （自動生成的快照名稱和測試名稱 - 你可以更改為自定義名稱，將其作為 toHaveScreenshot() 方法的參數(shù)傳遞）；
3. 除了example-test-1 之外，它還添加了瀏覽器名稱和平臺，在本示例中分別是chromium和darwin（瀏覽器名稱和平臺無法自定義）。

請記住，必須具有與CI（持續(xù)集成）系統(tǒng)相同的操作系統(tǒng) (OS)，否則需要在 Docker 上運行這些測試，這是因為操作系統(tǒng)和CI中使用的屏幕可能有所不同。

如何定制視覺比較？

在我之前提供的示例中，腳本包括對整個頁面進行屏幕截圖并將其與已存在的屏幕截圖進行比較。

但這只是一個示例，你也可能只想測試頁面的特定元素。為此，應(yīng)該使用Playwright定位器。

此外，還可以設(shè)置各種可以修改由 Pixelmatch 提供的toHaveScreenshot()行為的選項：

• maxDiffPixels：可接受的不同于像素總數(shù)的比例，介于0和1之間（默認(rèn)未設(shè)置）；
• 閾值（threshold）：比較圖像中相同像素之間YIQ 顏色空間中可接受的感知顏色差異，介于0（嚴(yán)格）和1（寬松）之間。默認(rèn)為0.2 ；
• maxDiffPixelRatio：可接受的像素數(shù)量，可能不同（默認(rèn)情況下未設(shè)置）。

以maxDiffPixels選項為例，語法為：

await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });

如果只想測試特定的UI元素，請再次將Expect()方法內(nèi)的頁面參數(shù)更改為特定的元素定位器。

此外，如果想檢查元素內(nèi)容是否具有參考文本或任意二進制數(shù)據(jù)，Playwright 測試會自動檢測內(nèi)容類型并使用適當(dāng)?shù)谋容^算法：

expect(await page.textContent('.hero__title')).toMatchSnapshot('heroText.txt');

在此示例中，我們檢查包含類名hero__title的元素的文本內(nèi)容是否與heroText.txt文件中存在的文本內(nèi)容相同。這些快照存儲在測試文件旁邊的單獨目錄中。

怎么樣報告可視化？

關(guān)于報告，Playwright 配備了一些內(nèi)置報告器以滿足不同的需求，能夠提供自定義報告器，也可以使用第三方報告器。

以Allure為例，如果執(zhí)行這些測試并使用 Allure 作為報告器，將能夠使用選項Show diff或Show Overlay看到有關(guān)失敗測試的屏幕差異，并快速了解問題。

視覺回歸測試有局限性嗎？

這些測試確實有局限性。由于他們只檢查UI外觀，因此需要進行其他測試，例如功能、安全、性能、可訪問性和可用性測試，以確保產(chǎn)品的質(zhì)量有保證。

結(jié)論

視覺回歸測試成為Web 應(yīng)用程序綜合測試策略的關(guān)鍵組成部分，雖然功能測試涵蓋了底層功能的正確性，但視覺回歸測試側(cè)重于用戶界面，確保一致且具有視覺吸引力的用戶體驗。

通過捕獲和比較不同開發(fā)階段的屏幕截圖，視覺回歸測試有助于檢測傳統(tǒng)測試方法可能忽略的細(xì)微視覺變化和回歸。此類測試在保障用戶滿意度、檢測 UI 不一致以及防止未檢測到的視覺錯誤進入生產(chǎn)方面發(fā)揮著至關(guān)重要的作用。

為了實現(xiàn)有效的視覺回歸測試，Playwright 被證明是一個強大且多功能的自動化庫。憑借對多種 Web 瀏覽器、無頭和非無頭模式以及跨平臺兼容性的支持，Playwright使開發(fā)人員和測試人員能夠跨不同環(huán)境無縫地自動化視覺測試。通過使用像素匹配庫，它可以提供精確的結(jié)果，使其成為分析最小視覺差異的理想選擇。

通過將 Playwright 納入測試工作流程并利用其可視化測試功能，團隊可以有效地維護視覺上一致且可靠的用戶界面，從而提高整體應(yīng)用程序質(zhì)量并提高用戶滿意度。

到此這篇關(guān)于使用Playwright進行視覺回歸測試詳解的文章就介紹到這了,更多相關(guān)Playwright視覺回歸測試內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論