軟件測(cè)試是軟件開發(fā)生命周期（SDLC）過(guò)程中的關(guān)鍵階段。早期測(cè)試可以節(jié)省軟件開發(fā)商大量成本和精力，而低質(zhì)量的軟件會(huì)對(duì)用戶參與產(chǎn)生負(fù)面影響，從而降低客戶保留率。因此，構(gòu)建無(wú)缺陷的軟件以增加銷售額并使軟件產(chǎn)品更受歡迎是至關(guān)重要的。

如今有不同類型的測(cè)試，例如冒煙測(cè)試、健全測(cè)試、集成測(cè)試、回歸測(cè)試、單元測(cè)試以及API測(cè)試。而回歸測(cè)試是最重要的測(cè)試類型之一，尤其是在將新功能或更新添加到現(xiàn)有應(yīng)用程序的時(shí)候。  

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

回歸測(cè)試確保新的代碼更改不會(huì)對(duì)現(xiàn)有功能產(chǎn)生不利影響。由于最新的代碼更改而出現(xiàn)的任何問(wèn)題都應(yīng)該在此類測(cè)試中發(fā)現(xiàn)。  

1.自動(dòng)化在回歸測(cè)試中的作用  

與健全性和冒煙測(cè)試不同，回歸測(cè)試的范圍很廣，因?yàn)橘|(zhì)量保證（QA）必須測(cè)試整個(gè)應(yīng)用程序或功能子集。考慮到人工進(jìn)行回歸測(cè)試需要大量的時(shí)間和精力，因此并不劃算。這就是大多數(shù)企業(yè)選擇自動(dòng)化回歸測(cè)試的原因。敏捷團(tuán)隊(duì)中的回歸測(cè)試通常采用基于風(fēng)險(xiǎn)的方法，選擇測(cè)試自動(dòng)化框架來(lái)簡(jiǎn)化測(cè)試過(guò)程。  

2.回歸測(cè)試的類型  

回歸測(cè)試可以分為功能回歸測(cè)試和視覺回歸測(cè)試。從根本上說(shuō)，兩者的工作方式不同，如下所述。  

（1）功能回歸測(cè)試  

功能回歸測(cè)試是使用人工或自動(dòng)化工具測(cè)試工作流或用例的測(cè)試類型。它涉及通過(guò)從瀏覽器DOM中獲取選擇器來(lái)輸入一些值。這還包括通過(guò)以編程方式或人工獲取基于文本的值來(lái)驗(yàn)證它們。實(shí)踐中的大多數(shù)現(xiàn)代測(cè)試都是基于這種方法。  

（2）視覺回歸測(cè)試  

視覺回歸測(cè)試檢查在執(zhí)行任何代碼更改后用戶將看到的內(nèi)容。這是通過(guò)比較代碼更改前后截取的屏幕截圖來(lái)完成的。這就是視覺回歸測(cè)試有時(shí)也稱為視覺快照測(cè)試的原因。視覺測(cè)試突出顯示代碼更新后發(fā)生的任何視覺變化。  

可視化測(cè)試生成、分析和比較瀏覽器快照，以檢測(cè)是否有任何像素發(fā)生了變化。這些像素差異稱為視覺差異（有時(shí)稱為感知差異、pdiff、CSS差異或UI差異）。用戶可以設(shè)置閾值，這使其可以靈活地比較具有小差異的圖像或忽略小差異。  

使用Cypress進(jìn)行視覺回歸測(cè)試  

Cypress是一個(gè)流行的測(cè)試自動(dòng)化框架，它允許大量的可擴(kuò)展性。視覺回歸測(cè)試是Cypress的可擴(kuò)展特性之一。Cypress中有很多插件可用于捕獲視覺圖像并進(jìn)行比較。本教程介紹了使用CypressImageDiff插件進(jìn)行Cypress視覺測(cè)試。  

1.Cypress視覺回歸的分步教程  

要設(shè)置Cypress視覺回歸環(huán)境，需要安裝以下組件：  

• 安裝Node JS。
• 安裝Visual Studio代碼。
• 安裝Cypress。

步驟1：安裝Cypress Image Diff npm包。

導(dǎo)航到項(xiàng)目根文件夾（package.json所在的目錄）。輸入以下命令：

npm i -D cypress-image-diff-js

步驟2：配置圖像差異插件。  

導(dǎo)航到cypress/plugin/index.js并輸入以下命令：  

JavaScript 
1// cypress/plugin/index.js
2 module.exports = (on, config) => {
3 const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
4 getCompareSnapshotsPlugin(on, config)
5
}

步驟3：導(dǎo)入并添加Cypress圖像命令。  

導(dǎo)航到cypress/support/commands.js并輸入下面編寫的代碼：  

JavaScript 
1// cypress/support/commands.js
2 const compareSnapshotCommand = require('cypress-image-diff-js/dist/command')
3 compareSnapshotCommand()

步驟4：配置報(bào)告器。  

導(dǎo)航到cypress/support/index.js并輸入下面編寫的代碼：  

JavaScript 
1 after(() => {
2 cy.task('generateReport')
3 })

步驟5：編寫第一個(gè)Cypress視覺測(cè)試。  

導(dǎo)航到cypress/integration文件夾添加新文件examplevisual-test.js。輸入下面編寫的代碼片段：  

JavaScript 
1 // visual-test.js
2 describe('Cypress Visual Testing', () => {
3  it('Compare fullpage of Google page', () => {
4  cy.visit("https://www.google.com/?hl=hi");
5  cy.compareSnapshot('google-page');
6  })
7 })

上面的代碼導(dǎo)航到谷歌主頁(yè)，并比較其視覺效果是否良好。

步驟6：使用Cypress運(yùn)行第一個(gè)視覺回歸測(cè)試。  

使用以下命令運(yùn)行Cypress視覺測(cè)試。  

npx cypress run --spec "cypress/integration/visual-test.js"

步驟7：查看報(bào)告。  

這個(gè)插件的一個(gè)關(guān)鍵特性是它可以生成一個(gè)良好的HTML報(bào)告。在運(yùn)行測(cè)試后，將創(chuàng)建兩個(gè)文件夾： 

• cypress-visual-report：它包含一個(gè)HTML報(bào)告，如果測(cè)試通過(guò)，則不會(huì)顯示任何圖像，如果測(cè)試失敗，它將顯示該圖像的基線（baseline）、比較（comparison）和差異（diff）。
• cypress-visual-screenshots：該文件夾包含三個(gè)子文件夾，即baseline、comparison和diff，其中每個(gè)文件夾包含各自的圖像文件。

通過(guò)的測(cè)試報(bào)告如下圖所示：  

失敗的測(cè)試報(bào)告如下圖所示：  

2.如何對(duì)元素執(zhí)行Cypress視覺測(cè)試

Cypress可用于對(duì)特定元素執(zhí)行視覺測(cè)試，其中它比較指定元素的前后屏幕截圖，如下面的示例所示。  

JavaScript 
1 describe('Visuals', () => {
2  it('should compare screenshot from a given element', () => {
3  cy.visit('www.google.com')
4  cy.get('#report-header').compareSnapshot('search-bar-element')
5  })
6 })

這一代碼片段截取元素#report-header的快照，并在視覺上比較它是否相同。  

3.為視覺測(cè)試添加閾值  

在默認(rèn)情況下，閾值的值為零，這意味著它應(yīng)該與基本圖像完全匹配。但是，可以通過(guò)應(yīng)用其他閾值使其更加靈活。  

使用BrowserStack執(zhí)行Cypress視覺比較測(cè)試  

要在BrowserStack等真實(shí)設(shè)備云上運(yùn)行Cypress視覺比較測(cè)試，需要按照以下步驟操作。  

步驟1：安裝BrowserStack Cypress插件。  

步驟2：使用browserstack-cypressinit命令創(chuàng)建browserstack.json文件。  

步驟3：復(fù)制并粘貼以下代碼。  

JSON 
1 {
2 "auth": {
3"username": "<my_username>",
4 "access_key": "<my_access_key>"
5 },
6 "browsers": [
7 {
8 "browser": "chrome",
9 "os": "Windows 10",
10 "versions": [
11 "latest",
12 "latest - 1"
13 ]
14 }
15 ],
16 "run_settings": {
17 "cypress_config_file": "./cypress.json",
18 "cypress_version": "9",
19 "project_name": "My sandbox project",
20 "build_name": "Build no. 1",
21 "parallels": "2",
22 "npm_dependencies": {
23 "cypress-image-diff-js": "^1.18.0"
24 }
25 }
26 }

注：  

• 可以通過(guò)登錄BrowserStack網(wǎng)站找到用戶名和訪問(wèn)密鑰。
• 還可以從browserstack.json文件更改瀏覽器設(shè)置和平臺(tái)設(shè)置。

步驟4：配置cypress.json文件以包含.js文件。  

JavaScript 
1 {
2 "testFiles":["*.js"]
3 }

步驟5：執(zhí)行Browserstack測(cè)試。  

使用以下命令在BrowserStack中執(zhí)行Cypress可視化測(cè)試：  

browserstack-cypress run –sync

使用Percy執(zhí)行Cypress視覺回歸測(cè)試  

Percy是一種可視化測(cè)試工具，可以幫助對(duì)應(yīng)用程序進(jìn)行可視化測(cè)試。由于Percy現(xiàn)在是BrowserStack的一部分，因此可以使用BrowserStack憑據(jù)訪問(wèn)PercyDashboard?？梢园凑找韵虏襟E使用Percy和Cypress執(zhí)行視覺測(cè)試：  

步驟1：使用以下命令安裝Percy：  

npm install --save-dev @percy/cli @percy/cypress

步驟2：要將Percy導(dǎo)入Cypress，導(dǎo)航到cypress/support/index.js文件并輸入以下命令：  

import '@percy/cypress'

步驟3：編寫第一個(gè)Percy可視化測(cè)試腳本，如下所示：  

JavaScript 
1 describe('Cypress Visual Testing', () => {
2  it('Compare fullpage of Google page', () => {
3  cy.visit("https://www.google.com/?hl=hi");
4 cy.percySnapshot('Google');
5  })
6 })

這一示例使用Percy和Cypress對(duì)Google.com頁(yè)面進(jìn)行了視覺比較。  

轉(zhuǎn)到http://percy.io創(chuàng)建一個(gè)示例項(xiàng)目。創(chuàng)建示例項(xiàng)目后，Percy將生成一個(gè)API密鑰，如下圖所示。

對(duì)于MacOS，使用以下命令輸入Percy令牌：  

export PERCY_TOKEN=<your_token>

對(duì)于Windows操作系統(tǒng)，使用以下命令輸入Percy令牌：  

set PERCY_TOKEN=<your_token>

對(duì)于Powershell，使用以下命令輸入Percy令牌：  

$env:PERCY_TOKEN ==<your_token>

輸入Percy令牌后，使用以下命令運(yùn)行PercyCypress測(cè)試：  

npx percy exec -- cypress run

Cypress可視化測(cè)試將開始運(yùn)行，并在命令行中提供以下結(jié)果：

原文標(biāo)題：??How to Perform Visual Regression Testing Using Cypress??，作者：Ganesh Hegde