Опції Сервісу
Опції сервісу - це налаштування, які можна встановити під час ініціалізації сервісу і які будуть використовуватися для кожного виклику методу.
// wdio.conf.(js|ts)
export const config = {
// ...
// =====
// Setup
// =====
services: [
[
"visual",
{
// The options
},
],
],
// ...
};
Опції за замовчуванням
addressBarShadowPadding
- Тип:
number
- Обов'язково: Ні
- За замовчуванням:
6
- Підтримувані контексти додатків: Web
Відступ, який потрібно додати до адресного рядка на iOS та Android для належного обрізання області перегляду.
autoElementScroll
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
true
- Підтримувані контексти додатків: Web, Hybrid App (Webview)
Ця опція дозволяє вимкнути автоматичне прокручування елемента до видимої області під час створення знімка елемента.
addIOSBezelCorners
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
false
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App
Додає закруглені кути та виріз/динамічний острівець до знімка екрану для пристроїв 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:
iphone14promax
iPads: - iPad Mini 6th Generation:
ipadmini
- iPad Air 4th Generation:
ipadair
- iPad Air 5th Generation:
ipadair
- iPad Pro (11-inch) 1st Generation:
ipadpro11
- iPad Pro (11-inch) 2nd Generation:
ipadpro11
- iPad Pro (11-inch) 3rd Generation:
ipadpro11
- iPad Pro (12.9-inch) 3rd Generation:
ipadpro129
- iPad Pro (12.9-inch) 4th Generation:
ipadpro129
- iPad Pro (12.9-inch) 5th Generation:
ipadpro129
autoSaveBaseline
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
true
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App
Якщо під час порівняння не знайдено базового зображення, зображення автоматично копіюється в папку з базовими зображеннями.
baselineFolder
- Тип:
string|()=> string
- Обов'язково: Ні
- За замовчуванням:
.path/to/testfile/__snapshots__/
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App
Директорія, яка міститиме всі базові зображення, що використовуються під час порівняння. Якщо не встановлено, буде використовуватися значення за замовчуванням, яке зберігатиме файли в папці __snapshots__/
поруч зі специфікацією, яка виконує візуальні тести. Функція, що повертає string
, також може використовуватися для встановлення значення baselineFolder
:
{
baselineFolder: path.join(process.cwd(), 'foo', 'bar', 'baseline')
},
// АБО
{
baselineFolder: () => {
// Виконуємо якусь магію тут
return path.join(process.cwd(), 'foo', 'bar', 'baseline');
}
}
clearRuntimeFolder
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
false
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App
Видаляти папку часу виконання (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
. Дан і згруповані за:
describe
для Jasmine/Mocha абоFeature
для CucumberJSit
для Jasmine/Mocha абоScenario
для CucumberJS і потім відсортовані за: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
або вище
disableBlinkingCursor
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
false
- Підтримувані контексти додатків: Web, Hybrid App (Webview)
Увімкнути/вимкнути "блимання" к урсору для всіх елементів input
, textarea
, [contenteditable]
у додатку. Якщо встановлено значення true
, курсор буде встановлено на transparent
перед створенням знімка
і скинуто після завершення
disableCSSAnimation
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
false
- Підтримувані контексти додатків: Web, Hybrid App (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, Hybrid App (Webview), Native App
Ім'я збережених зображень можна налаштувати, передавши параметр formatImageName
з формат ним рядком, наприклад:
{tag}-{browserName}-{width}x{height}-dpr-{dpr}
Наступні змінні можуть бути передані для форматування рядка та будуть автоматично зчитані з можливостей екземпляра. Якщо вони не можуть бути визначені, будуть використані значення за замовчуванням.
browserName
: Назва браузера в наданих можливостяхbrowserVersion
: Версія браузера, вказана в можливостяхdeviceName
: Назва пристрою з можливостейdpr
: Співвідношення пікселів пристроюheight
: Висота екрануlogName
: Назва журналу з можливостейmobile
: Це додасть_app
або назву браузера післяdeviceName
для розрізнення знімків додатка від знімків браузераplatformName
: Назва платформи в наданих можливостяхplatformVersion
: Версія платформи, вказана в можливостяхtag
: Тег, який надається в методах, що викликаютьсяwidth
: Ширина екрану
Ви не можете надавати власні шляхи/папки в formatImageName
. Якщо ви хочете змінити шлях, будь ласка, перевірте зміну наступних опцій:
baselineFolder
screenshotPath
folderOptions
для кожного методу
fullPageScrollTimeout
- Тип:
number
- Обов'язково: Ні
- За замовчуванням:
1500
- Підтримувані контексти додатків: Web
Час очікування в мілісекундах після прокрутки. Це може допомогти ідентифікувати сторінки з лінивим завантаженням.
Це працюватиме лише коли параметр сервісу/методу userBasedFullPageScreenshot
встановлено на true
, див. також userBasedFullPageScreenshot
hideScrollBars
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
true
- Підтримувані контексти додатків: Web, Hybrid App (Webview)
Приховати смуги прокрутки в додатку. Якщо встановлено значення true, всі смуги прокрутки будуть вимкнені перед створенням знімка. За замовчуванням встановлено на true
для запобігання додатковим проблемам.
logLevel
- Тип:
string
- Обов'язково: Ні
- За замовч уванням:
info
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App
Додає додаткові журнали, опції: debug | info | warn | silent
Помилки завжди виводяться в консоль.
savePerInstance
- Тип:
boolean
- За замовчуванням:
false
- Обов'язково: ні
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App
Зберігати зображення для кожного екземпляра в окремій папці, щоб, наприклад, всі знімки Chrome зберігалися в папці Chrome, наприклад desktop_chrome
.
screenshotPath
- Тип:
string | () => string
- За замовчуванням:
.tmp/
- Обов'язково: ні
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App
Директорія, яка міститиме всі фактичні/різні знімки екрану. Якщо не встановлено, буде використовуватися значення за замовчуванням. Функція, що повертає рядок, також може використовуватися для встановлення значення screenshotPath:
{
screenshotPath: path.join(process.cwd(), 'foo', 'bar', 'screenshotPath')
},
// АБО
{
screenshotPath: () => {
// Виконуємо якусь магію тут
return path.join(process.cwd(), 'foo', 'bar', 'screenshotPath');
}
}
toolBarShadowPadding
- Тип:
number
- Обов'язково: Ні
- За замовчуванням:
6
для Android та15
для iOS (6
за замовчуванням і9
буде додано автоматично для можливої домашньої панелі на iPhone з вирізом або на iPad, які мають домашню панель) - Підтримувані контексти додатків: Web
Відступ, який потрібно додати до панелі інструментів на iOS та Android, щоб правильно вирізати область перегляду.
userBasedFullPageScreenshot
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
false
- Підтримувані контексти додатків: Web, Hybrid App (Webview) Представлено в visual-service@7.0.0
За замовчуванням, повносторінкові знімки екрана на настільному вебі захоплюються за допомогою протоколу WebDriver BiDi, який забезпечує швидкі, стабільні та послідовні знімки без прокрутки. Коли userBasedFullPageScreenshot встановлено на true, процес знімка екрана імітує реального користувача: прокрутка сторінки, захоплення знімків розміром з область перегляду та їх зшивання. Цей метод корисний для сторінок із вмістом, що завантажується лінивим способом, або динамічного рендерингу, який залежить від позиції прокрутки.
Ви користовуйте цю опцію, якщо ваша сторінка залежить від завантаження вмісту під час прокрутки або якщо ви хочете зберегти поведінку старіших методів знімка екрана.
waitForFontsLoaded
- Тип:
boolean
- Обов'язково: Ні
- За замовчуванням:
true
- Підтримувані контексти додатків: Web, Hybrid App (Webview)
Шрифти, включаючи шрифти третіх сторін, можуть завантажуватися синхронно або асинхронно. Асинхронне завантаження означає, що шрифти можуть завантажитися після того, як WebdriverIO визначить, що сторінка повністю завантажена. Щоб запобігти проблемам із відображенням шрифтів, цей модуль за замовчуванням чекатиме завантаження всіх шрифтів перед створенням знімка.
Опції вкладок
Цей модуль також підтримує малювання того, як користувач міг би використовувати клавіатуру для переходу вкладками по веб-сайту, малюючи лінії та крапки від елемента вкладки до елемента вкладки.
Робота натхненна блогом Viv Richards та його статтею "AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING".
Спосіб вибору елементів вкладок заснований на модулі tabbable. Якщо є будь-які проблеми щодо вкладок, будь ласка, перевірте README.md і особливо розділ More details.
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
Показати номер послідовності вкладки в колі.
tabbableOptions.line
- Тип:
object
- Обов'язково: Ні
- За замовчуванням: Див. тут для всіх значень за замовчуванням
- Підтримувані контексти додатків: Web
Опції для зміни лінії.
tabbableOptions.line.color
- Тип:
string
- Обов'язково: Ні
- За замовчуванням: Див. тут для всіх значень за замовчуванням
- Підтримувані контексти додатків: Web
Колір лінії.
tabbableOptions.line.width
- Тип:
number
- Обов'язково: Ні
- За замовчуванням: Див. тут для всіх значень за замовчуванням
- Підтримувані контексти додатків: Web
Ширина лінії.
Опції порівняння
compareOptions
- Тип:
object
- Обов'язково: Ні
- За замовчуванням: Див. тут для всіх значень за замовчуванням
- Підтримувані контексти додатків: Web, Hybrid App (Webview), Native App (Див. Опції методу порівняння для отримання додаткової інформації)
Опції пор івняння також можна встановити як опції сервісу, вони описані в розділі Опції методу порівняння