如何使用Cypress執行視覺回歸測試

作者：李睿 2022-07-13 08:00:00

軟件測試是軟件開發生命周期（SDLC）過程中的關鍵階段。早期測試可以節省軟件開發商大量成本和精力，而低質量的軟件會對用戶參與產生負面影響，從而降低客戶保留率。因此，構建無缺陷的軟件以增加銷售額并使軟件產品更受歡迎是至關重要的。

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

什么是回歸測試？

回歸測試確保新的代碼更改不會對現有功能產生不利影響。由于最新的代碼更改而出現的任何問題都應該在此類測試中發現。

1.自動化在回歸測試中的作用

與健全性和冒煙測試不同，回歸測試的范圍很廣，因為質量保證（QA）必須測試整個應用程序或功能子集。考慮到人工進行回歸測試需要大量的時間和精力，因此并不劃算。這就是大多數企業選擇自動化回歸測試的原因。敏捷團隊中的回歸測試通常采用基于風險的方法，選擇測試自動化框架來簡化測試過程。

2.回歸測試的類型

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

（1）功能回歸測試

功能回歸測試是使用人工或自動化工具測試工作流或用例的測試類型。它涉及通過從瀏覽器DOM中獲取選擇器來輸入一些值。這還包括通過以編程方式或人工獲取基于文本的值來驗證它們。實踐中的大多數現代測試都是基于這種方法。

（2）視覺回歸測試

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

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

使用Cypress進行視覺回歸測試

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

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

要設置Cypress視覺回歸環境，需要安裝以下組件：

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

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

導航到項目根文件夾（package.json所在的目錄）。輸入以下命令：

npm i -D cypress-image-diff-js

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

導航到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：導入并添加Cypress圖像命令。

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

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

步驟4：配置報告器。

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

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

步驟5：編寫第一個Cypress視覺測試。

導航到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 })

上面的代碼導航到谷歌主頁，并比較其視覺效果是否良好。

步驟6：使用Cypress運行第一個視覺回歸測試。

使用以下命令運行Cypress視覺測試。

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

步驟7：查看報告。

這個插件的一個關鍵特性是它可以生成一個良好的HTML報告。在運行測試后，將創建兩個文件夾：

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

通過的測試報告如下圖所示：

失敗的測試報告如下圖所示：

2.如何對元素執行Cypress視覺測試

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

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.為視覺測試添加閾值

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

使用BrowserStack執行Cypress視覺比較測試

要在BrowserStack等真實設備云上運行Cypress視覺比較測試，需要按照以下步驟操作。

步驟1：安裝BrowserStack Cypress插件。

步驟2：使用browserstack-cypressinit命令創建browserstack.json文件。

步驟3：復制并粘貼以下代碼。

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 }

注：

可以通過登錄BrowserStack網站找到用戶名和訪問密鑰。
還可以從browserstack.json文件更改瀏覽器設置和平臺設置。

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

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

步驟5：執行Browserstack測試。

使用以下命令在BrowserStack中執行Cypress可視化測試：

browserstack-cypress run –sync

使用Percy執行Cypress視覺回歸測試

Percy是一種可視化測試工具，可以幫助對應用程序進行可視化測試。由于Percy現在是BrowserStack的一部分，因此可以使用BrowserStack憑據訪問PercyDashboard。可以按照以下步驟使用Percy和Cypress執行視覺測試：

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

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

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

import '@percy/cypress'

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

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