服务选项
服务选项是在实例化服务时可以设置的选项，并将用于每个方法调用。
// wdio.conf.(js|ts)
export const config = {
// ...
// =====
// Setup
// =====
services: [
[
"visual",
{
// The options
},
],
],
// ...
};
默认选项
addressBarShadowPadding
- 类型：
number - 必填： 否
- 默认值：
6 - 支持： Web
需要在 iOS 和 Android 上的地址栏添加填充，以正确裁剪视口。
autoElementScroll
- 类型：
boolean - 必填： 否
- 默认值：
true - 支持： Web、混合应用（Webview）
此选项允许您在创建元素屏幕截图时禁用元素自动滚动到视图中的功能。
addIOSBezelCorners
- 类型：
boolean - 必填： 否
- 默认值：
false - 支持： Web、混合应用（Webview）、原生应用
为 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：
iphone14promaxiPads： - 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 - 支持： Web、混合应用（Webview）、原生应用
如果在比较期间找不到基线图像，则会自动将图像复制到基线文件夹。
baselineFolder
- 类型：
any - 必填： 否
- 默认值：
.path/to/testfile/__snapshots__/ - 支持： Web、混合应用（Webview）、原生应用
该目录将保存比较期间使用的所有基线图像。如果未设置，将使用默认值，该值将在执行视觉测试的规范旁边的__snapshots__/文件夹中存储文件。也可以使用接受选项对象的函数来设置baselineFolder值
{
baselineFolder: (options) => {
const testFolder = path.dirname(options.specs[0]);
return path.join(testFolder, "snapshots", type);
};
}
clearRuntimeFolder
- 类型：
boolean - 必填： 否
- 默认值：
false - 支持： Web、混合应用（Webview）、原生应用
在初始化时删除运行时文件夹（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 - 支持： Web、混合应用（Webview）
启用/禁用应用程序中的所有 CSS 动画和输入光标。如果设置为 true，则在拍摄屏幕截图之前将禁用所有动画，并在完成后重置
enableLayoutTesting
- 类型：
boolean - 必填： 否
- 默认值：
false - 支持： Web
这将隐藏页面上的所有文本，以便仅使用布局进行比较。隐藏将通过向每个元素添加样式'color': 'transparent !important'来完成。
有关输出，请参阅测试输出
通过使用此标志，包含文本的每个元素（不仅是p, h1, h2, h3, h4, h5, h6, span, a, li，还有div|button|..）都将获得此属性。没有选项可以定制它。
formatImageName
- 类型：
string - 必填： 否
- 默认值：
{tag}-{browserName}-{width}x{height}-dpr-{dpr} - 支持： Web、混合应用（Webview）、原生应用
可以通过传递参数formatImageName使用格式字符串（如）来自定义保存图像的名称
{tag}-{browserName}-{width}x{height}-dpr-{dpr}
以下变量可以传递给格式化字符串，并将自动从实例功能中读取。如果无法确定，将使用默认值。
browserName：提供的功能中的浏览器名称browserVersion：功能中提供的浏览器版本deviceName：功能中的设备名称dpr：设备像素比height：屏幕高度logName：功能中的logNamemobile：这将在deviceName之后添加_app或浏览器名称，以区分应用程序屏幕截图和浏览器屏幕截图platformName：提供的功能中的平台名称platformVersion：功能中提供的平台版本tag：在调用的方法中提供的标签width：屏幕宽度
fullPageScrollTimeout
- 类型：
number - 必填： 否
- 默认值：
1500 - 支持： Web
滚动后等待的毫秒数超时。这可能有助于识别具有延迟加载的页面。
hideScrollBars
- 类型：
boolean - 必填： 否
- 默认值：
true - 支持： Web、混合应用（Webview）
隐藏应用程序中的滚动条。如果设置为 true，则在拍摄屏幕截图之前将禁用所有滚动条。默认设置为true以防止出现额外问题。
isHybridApp
- 类型：
boolean - 必填： 否
- 默认值：
false - 支持：混合应用
告诉模块使用的应用程序是否为混合应用程序，这将不会计算地址栏高度，因为它不存在。
logLevel
- 类型：
string - 必填： 否
- 默认值：
info - 支持： Web、混合应用（Webview）、原生应用
添加额外的日志，选项为debug | info | warn | silent
错误始终记录到控制台。
savePerInstance
- 类型：
boolean - 默认值：
false - 必填：否
- 支持： Web、混合应用（Webview）、原生应用
每个实例将图像保存到单独的文件夹中，例如，所有 Chrome 屏幕截图都将保存在 Chrome 文件夹（如desktop_chrome）中。
screenshotPath
- 类型：
any - 默认值：
.tmp/ - 必填：否
- 支持： Web、混合应用（Webview）、原生应用
存储所有实际/不同截图的目录。如果未设置，将使用默认值。也可以使用接受选项对象的函数来设置 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，并且会自动添加9以应对带刘海的 iPhone 或带有 Home 键的 iPad 上可能的 Home 栏）。 - 支持： Web
需要添加到 iOS 和 Android 上的工具栏的填充，以便正确裁剪视口。
可聚焦选项
此模块还支持绘制用户使用键盘Tab键浏览网站的方式，通过绘制从可聚焦元素到可聚焦元素的线条和点来实现。
这项工作受到 Viv Richards 关于 "使用视觉测试和 JavaScript 自动化页面 Tab 可聚焦性（这个词合适吗？）" 博客文章的启发。
可聚焦元素的选择方式基于模块 tabbable。如果存在任何关于 Tab 键的问题，请查看 README.md，尤其是 更多细节部分。
tabbableOptions
- 类型：
object - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
如果您使用 {save|check}Tabbable 方法，则可以更改线条和点的选项。以下将解释这些选项。
tabbableOptions.circle
- 类型：
object - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
更改圆圈的选项。
tabbableOptions.circle.backgroundColor
- 类型：
string - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
圆圈的背景颜色。
tabbableOptions.circle.borderColor
- 类型：
string - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
圆圈的边框颜色。
tabbableOptions.circle.borderWidth
- 类型：
number - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
圆圈的边框宽度。
tabbableOptions.circle.fontColor
- 类型：
string - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
圆圈中文字体的颜色。仅当 showNumber 设置为 true 时才会显示。
tabbableOptions.circle.fontFamily
- 类型：
string - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
圆圈中文字体的族类。仅当 showNumber 设置为 true 时才会显示。
确保设置浏览器支持的字体。
tabbableOptions.circle.fontSize
- 类型：
number - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
圆圈中文字体的大小。仅当 showNumber 设置为 true 时才会显示。
tabbableOptions.circle.size
- 类型：
number - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
圆圈的大小。
tabbableOptions.circle.showNumber
- 类型：
showNumber - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
在圆圈中显示 Tab 键顺序号。
tabbableOptions.line
- 类型：
object - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
更改线条的选项。
tabbableOptions.line.color
- 类型：
string - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
线条的颜色。
tabbableOptions.line.width
- 类型：
number - 必填： 否
- 默认值： 请参阅 此处 获取所有默认值。
- 支持： Web
线条的宽度。
waitForFontsLoaded
- 类型：
boolean - 必填： 否
- 默认值：
true - 支持： Web、混合应用（Webview）
字体，包括第三方字体，可以同步或异步加载。异步加载意味着字体可能在 WebdriverIO 确定页面完全加载后才加载。为了防止字体渲染问题，此模块默认情况下会在截取屏幕截图之前等待所有字体加载完成。
比较选项
比较选项也可以设置为服务选项，它们在 方法比较选项 中进行了描述。
