什么是視覺回歸測(cè)試？

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

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

為什么視覺回歸測(cè)試很重要？

視覺回歸測(cè)試之所以重要有幾個(gè)原因：

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

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

視覺回歸測(cè)試流程

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

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

就市場(chǎng)上的工具而言，可以分為付費(fèi)和免費(fèi)兩類：

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

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

什么是Playwright？

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

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

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

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

像素匹配如何工作？

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

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

來源：pixelmatch github

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

如何實(shí)施簡單的Playwright視覺測(cè)試？

當(dāng)團(tuán)隊(duì)已將Playwright用于其他測(cè)試級(jí)別時(shí)，在這些測(cè)試中使用Playwright非常有用。

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

另外，請(qǐng)確保安裝了NodeJS和 IDE，例如Visual Studio Code。

如果使用的是yarn，為了安裝Playwright，請(qǐng)考慮運(yùn)行：

yarn create playwright

之后，創(chuàng)建一個(gè)名為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í)行該腳本，請(qǐng)運(yùn)行：

npx playwright test

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

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

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

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

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

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

npx playwright test --update-snapshots

屏幕截圖命名法如何運(yùn)作？

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

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

如何定制視覺比較？

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

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

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

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

以maxDiffPixels選項(xiàng)為例，語法為：

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

如果只想測(cè)試特定的UI元素，請(qǐng)?jiān)俅螌xpect()方法內(nèi)的頁面參數(shù)更改為特定的元素定位器。

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

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

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

怎么樣報(bào)告可視化？

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

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

視覺回歸測(cè)試有局限性嗎？

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

結(jié)論

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

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

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

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

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

最新評(píng)論