服務選項
服務選項是在服務實例化時可以設定的選項，並將用於每個方法呼叫。
// wdio.conf.(js|ts)
export const config = {
// ...
// =====
// Setup
// =====
services: [
[
"visual",
{
// The options
},
],
],
// ...
};
預設選項
addressBarShadowPadding
- 類型：
number - 必要： 否
- 預設值：
6 - 支援： 網頁
需要在 iOS 和 Android 上的網址列中新增間距，以便適當地裁剪視窗。
autoElementScroll
- 類型：
boolean - 必要： 否
- 預設值：
true - 支援： 網頁、混合應用程式（網頁檢視）
此選項允許您在建立元素螢幕截圖時停用自動將元素捲動到檢視範圍內的功能。
addIOSBezelCorners
- 類型：
boolean - 必要： 否
- 預設值：
false - 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
在 iOS 裝置的螢幕截圖中新增邊框角落和瀏海/動態島。
這只有在裝置名稱可以自動判斷，並且符合下列標準化裝置名稱清單時才能完成。此模組將會進行標準化。iPhone：
- iPhone X：
iphonex - iPhone XS：
iphonexs - iPhone XS Max：
iphonexsmax - iPhone XR：
iphonexr - iPhone 11：
iphone11 - iPhone 11 Pro：
iphone11pro - iPhone 11 Pro Max：
iphone11promax - iPhone 12：
iphone12 - iPhone 12 Mini：
iphone12mini - iPhone 12 Pro：
iphone12pro - iPhone 12 Pro Max：
iphone12promax - iPhone 13：
iphone13 - iPhone 13 Mini：
iphone13mini - iPhone 13 Pro：
iphone13pro - iPhone 13 Pro Max：
iphone13promax - iPhone 14：
iphone14 - iPhone 14 Plus：
iphone14plus - iPhone 14 Pro：
iphone14pro - iPhone 14 Pro Max：
iphone14promaxiPad： - iPad Mini 第 6 代：
ipadmini - iPad Air 第 4 代：
ipadair - iPad Air 第 5 代：
ipadair - iPad Pro (11 英吋) 第 1 代：
ipadpro11 - iPad Pro (11 英吋) 第 2 代：
ipadpro11 - iPad Pro (11 英吋) 第 3 代：
ipadpro11 - iPad Pro (12.9 英吋) 第 3 代：
ipadpro129 - iPad Pro (12.9 英吋) 第 4 代：
ipadpro129 - iPad Pro (12.9 英吋) 第 5 代：
ipadpro129
autoSaveBaseline
- 類型：
boolean - 必要： 否
- 預設值：
true - 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
如果在比較期間找不到基準圖片，則會自動將圖片複製到基準資料夾。
baselineFolder
- 類型：
any - 必要： 否
- 預設值：
.path/to/testfile/__snapshots__/ - 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
該目錄將包含比較期間使用的所有基準圖片。如果未設定，將使用預設值，該值會將檔案儲存在執行視覺測試的規格旁邊的 __snapshots__/ 資料夾中。接受選項物件的函式也可以用來設定 baselineFolder 值
{
baselineFolder: (options) => {
const testFolder = path.dirname(options.specs[0]);
return path.join(testFolder, "snapshots", type);
};
}
clearRuntimeFolder
- 類型：
boolean - 必要： 否
- 預設值：
false - 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
在初始化時刪除執行階段資料夾 (actual & diff)
這只有在透過外掛程式選項設定 screenshotPath 時才會運作，並且當您在方法中設定資料夾時將無法運作
createJsonReportFiles（新功能）
- 類型：
boolean - 必要： 否
- 預設值：
false
您現在可以選擇將比較結果匯出到 JSON 報表檔案中。透過提供選項 createJsonReportFiles: true，每個比較過的圖片都會在每個 actual 圖片結果旁邊的 actual 資料夾中建立一份報表。輸出看起來會像這樣
{
"parent": "check methods",
"test": "should fail comparing with a baseline",
"tag": "examplePageFail",
"instanceData": {
"browser": {
"name": "chrome-headless-shell",
"version": "126.0.6478.183"
},
"platform": {
"name": "mac",
"version": "not-known"
}
},
"commandName": "checkScreen",
"boundingBoxes": {
"diffBoundingBoxes": [
{
"left": 1088,
"top": 717,
"right": 1186,
"bottom": 730
}
//....
],
"ignoredBoxes": [
{
"left": 159,
"top": 652,
"right": 356,
"bottom": 703
}
//...
]
},
"fileData": {
"actualFilePath": "/Users/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
"baselineFilePath": "/Users/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
"diffFilePath": "/Users/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
"fileName": "examplePageFail-local-chrome-latest-1366x768.png",
"size": {
"actual": {
"height": 768,
"width": 1366
},
"baseline": {
"height": 768,
"width": 1366
},
"diff": {
"height": 768,
"width": 1366
}
}
},
"misMatchPercentage": "12.90",
"rawMisMatchPercentage": 12.900729014153246
}
執行完所有測試後，將會產生一個新的 JSON 檔案，其中包含比較集合，並且可以在 actual 資料夾的根目錄中找到。資料會依下列項目分組
- Jasmine/Mocha 的
describe或 CucumberJS 的Feature - Jasmine/Mocha 的
it或 CucumberJS 的Scenario，然後依下列項目排序 commandName，用於比較圖片的比較方法名稱instanceData，先是瀏覽器，然後是裝置，最後是平台，看起來會像這樣
[
{
"description": "check methods",
"data": [
{
"test": "should fail comparing with a baseline",
"data": [
{
"tag": "examplePageFail",
"instanceData": {},
"commandName": "checkScreen",
"framework": "mocha",
"boundingBoxes": {
"diffBoundingBoxes": [],
"ignoredBoxes": []
},
"fileData": {},
"misMatchPercentage": "14.34",
"rawMisMatchPercentage": 14.335403703025868
},
{
"tag": "exampleElementFail",
"instanceData": {},
"commandName": "checkElement",
"framework": "mocha",
"boundingBoxes": {
"diffBoundingBoxes": [],
"ignoredBoxes": []
},
"fileData": {},
"misMatchPercentage": "1.34",
"rawMisMatchPercentage": 1.335403703025868
}
]
}
]
}
]
報表資料將讓您有機會建立自己的視覺報表，而無需自行完成所有魔法和資料收集。
您需要使用 @wdio/visual-testing 版本 5.2.0 或更高版本
disableCSSAnimation
- 類型：
boolean - 必要： 否
- 預設值：
false - 支援： 網頁、混合應用程式（網頁檢視）
啟用/停用應用程式中的所有 CSS 動畫和輸入插入符號和輸入插入符號。如果設定為 true，則在拍攝螢幕截圖之前會停用所有動畫，並在完成時重設
enableLayoutTesting
- 類型：
boolean - 必要： 否
- 預設值：
false - 支援： 網頁
這將隱藏頁面上的所有文字，因此只會使用版面配置進行比較。隱藏將透過將樣式 'color': 'transparent !important' 新增到每個元素來完成。
如需輸出，請參閱測試輸出
透過使用此旗標，每個包含文字的元素（不僅是 p、h1、h2、h3、h4、h5、h6、span、a、li，還有 div|button|..）都會取得此屬性。沒有選項可以調整此設定。
formatImageName
- 類型：
string - 必要： 否
- 預設值：
{tag}-{browserName}-{width}x{height}-dpr-{dpr} - 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
可以透過傳遞帶有格式字串的參數 formatImageName 來自訂儲存的圖片名稱，例如
{tag}-{browserName}-{width}x{height}-dpr-{dpr}
可以將下列變數傳遞至格式化字串，並會自動從執行個體功能中讀取。如果無法判斷，將會使用預設值。
browserName：所提供功能中瀏覽器的名稱browserVersion：功能中所提供瀏覽器的版本deviceName：來自功能中的裝置名稱dpr：裝置像素比height：螢幕的高度logName：來自功能的 logNamemobile：這會在deviceName後面新增_app或瀏覽器名稱，以區分應用程式螢幕截圖和瀏覽器螢幕截圖platformName：所提供功能中平台的名稱platformVersion：功能中所提供平台的版本tag：在所呼叫的方法中提供的標籤width：螢幕的寬度
fullPageScrollTimeout
- 類型：
number - 必要： 否
- 預設值：
1500 - 支援： 網頁
捲動後等待的逾時時間（以毫秒為單位）。這可能有助於識別具有延遲載入的頁面。
hideScrollBars
- 類型：
boolean - 必要： 否
- 預設值：
true - 支援： 網頁、混合應用程式（網頁檢視）
隱藏應用程式中的捲軸。如果設定為 true，則會在截圖前停用所有捲軸。預設值設定為 true，以避免額外問題。
isHybridApp
- 類型：
boolean - 必要： 否
- 預設值：
false - 支援：混合應用程式
告知模組使用的應用程式是否為混合應用程式，這將不會計算網址列高度，因為它不存在。
logLevel
- 類型：
string - 必要： 否
- 預設值：
info - 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
新增額外日誌，選項為 debug | info | warn | silent
錯誤始終記錄到主控台。
savePerInstance
- 類型：
boolean - 預設值：
false - 必要：否
- 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
將每個執行個體的圖像儲存在單獨的資料夾中，例如所有 Chrome 螢幕截圖將儲存在類似 desktop_chrome 的 Chrome 資料夾中。
screenshotPath
- 類型：
any - 預設值：
.tmp/ - 必要：否
- 支援： 網頁、混合應用程式（網頁檢視）、原生應用程式
將保留所有實際/不同螢幕截圖的目錄。如果未設定，將使用預設值。接受選項物件的函式也可以用於設定 screenshotPath 值
getFolder = type = (options) => {
const testFolder = path.dirname(options.specs[0]);
return path.join(testFolder, "snapshots", type);
};
{
screenshotPath: getFolder(options);
}
toolBarShadowPadding
- 類型：
number - 必要： 否
- 預設值： Android 為
6，iOS 為15（預設為6，對於具有瀏海的 iPhone 或具有 Home Bar 的 iPad，將自動新增9以適用可能的 Home Bar） - 支援： 網頁
需要在 iOS 和 Android 的工具列新增的邊距，以便正確裁剪視口。
可 Tab 選項
此模組也支援繪製使用者使用鍵盤在網站上 *tab* 的方式，方法是從可 Tab 元素繪製線條和點到可 Tab 元素。
此工作靈感來自 Viv Richards 關於 「使用視覺測試和 JavaScript 自動化頁面 Tab 流程（這是一個詞嗎？）」的部落格文章。
可 Tab 元素的選擇方式基於模組 tabbable。如果關於 tab 切換有任何問題，請檢查 README.md，特別是 更多詳細資訊區段。
tabbableOptions
- 類型：
object - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
如果使用 {save|check}Tabbable 方法，可以變更線條和點的選項。這些選項在下面說明。
tabbableOptions.circle
- 類型：
object - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
變更圓形的選項。
tabbableOptions.circle.backgroundColor
- 類型：
string - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
圓形的背景顏色。
tabbableOptions.circle.borderColor
- 類型：
string - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
圓形的邊框顏色。
tabbableOptions.circle.borderWidth
- 類型：
number - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
圓形的邊框寬度。
tabbableOptions.circle.fontColor
- 類型：
string - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
圓形中文字的字體顏色。只有在 showNumber 設定為 true 時才會顯示。
tabbableOptions.circle.fontFamily
- 類型：
string - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
圓形中文字的字體系列。只有在 showNumber 設定為 true 時才會顯示。
請務必設定瀏覽器支援的字體。
tabbableOptions.circle.fontSize
- 類型：
number - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
圓形中文字的字體大小。只有在 showNumber 設定為 true 時才會顯示。
tabbableOptions.circle.size
- 類型：
number - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
圓形的大小。
tabbableOptions.circle.showNumber
- 類型：
showNumber - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
在圓形中顯示 Tab 順序號碼。
tabbableOptions.line
- 類型：
object - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
變更線條的選項。
tabbableOptions.line.color
- 類型：
string - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
線條的顏色。
tabbableOptions.line.width
- 類型：
number - 必要： 否
- 預設值： 關於所有預設值，請參閱這裡
- 支援： 網頁
線條的寬度。
waitForFontsLoaded
- 類型：
boolean - 必要： 否
- 預設值：
true - 支援： 網頁、混合應用程式（網頁檢視）
字體（包括第三方字體）可以同步或非同步載入。非同步載入表示字體可能會在 WebdriverIO 判定頁面已完全載入後才載入。為了避免字體呈現問題，此模組預設會等待所有字體載入完成後才截圖。
比較選項
比較選項也可以設定為服務選項，它們在方法比較選項中說明
