Перейти до основного вмісту

Написання тестів

Підтримка Testrunner-фреймворків

@wdio/visual-service не залежить від конкретного тест-фреймворку, що означає, що ви можете використовувати його з усіма фреймворками, які підтримує WebdriverIO, такими як:

В межах ваших тестів ви можете зберігати скріншоти або порівнювати поточний візуальний стан вашого додатка з базовим зображенням. Для цього сервіс надає власний матчер, а також методи перевірки:

describe('Mocha Example', () => {
beforeEach(async () => {
await browser.url('https://webdriver.io')
})

it('using visual matchers to assert against baseline', async () => {
// Check screen to exactly match with baseline
await expect(browser).toMatchScreenSnapshot('partialPage')
// check an element to have a mismatch percentage of 5% with the baseline
await expect(browser).toMatchScreenSnapshot('partialPage', 5)
// check an element with options for `saveScreen` command
await expect(browser).toMatchScreenSnapshot('partialPage', {
/* some options */
})

// Check an element to exactly match with baseline
await expect($('#element-id')).toMatchElementSnapshot('firstButtonElement')
// check an element to have a mismatch percentage of 5% with the baseline
await expect($('#element-id')).toMatchElementSnapshot('firstButtonElement', 5)
// check an element with options for `saveElement` command
await expect($('#element-id')).toMatchElementSnapshot('firstButtonElement', {
/* some options */
})

// Check a full page screenshot match with baseline
await expect(browser).toMatchFullPageSnapshot('fullPage')
// Check a full page screenshot to have a mismatch percentage of 5% with the baseline
await expect(browser).toMatchFullPageSnapshot('fullPage', 5)
// Check a full page screenshot with options for `checkFullPageScreen` command
await expect(browser).toMatchFullPageSnapshot('fullPage', {
/* some options */
})

// Check a full page screenshot with all tab executions
await expect(browser).toMatchTabbablePageSnapshot('check-tabbable')
// Check a full page screenshot to have a mismatch percentage of 5% with the baseline
await expect(browser).toMatchTabbablePageSnapshot('check-tabbable', 5)
// Check a full page screenshot with options for `checkTabbablePage` command
await expect(browser).toMatchTabbablePageSnapshot('check-tabbable', {
/* some options */
})
})

it('should save some screenshots', async () => {
// Save a screen
await browser.saveScreen('examplePage', {
/* some options */
})

// Save an element
await browser.saveElement(
await $('#element-id'),
'firstButtonElement',
{
/* some options */
}
)

// Save a full page screenshot
await browser.saveFullPageScreen('fullPage', {
/* some options */
})

// Save a full page screenshot with all tab executions
await browser.saveTabbablePage('save-tabbable', {
/* some options, use the same options as for saveFullPageScreen */
})
})

it('should compare successful with a baseline', async () => {
// Check a screen
await expect(
await browser.checkScreen('examplePage', {
/* some options */
})
).toEqual(0)

// Check an element
await expect(
await browser.checkElement(
await $('#element-id'),
'firstButtonElement',
{
/* some options */
}
)
).toEqual(0)

// Check a full page screenshot
await expect(
await browser.checkFullPageScreen('fullPage', {
/* some options */
})
).toEqual(0)

// Check a full page screenshot with all tab executions
await expect(
await browser.checkTabbablePage('check-tabbable', {
/* some options, use the same options as for checkFullPageScreen */
})
).toEqual(0)
})
})
ВАЖЛИВО

Цей сервіс надає методи save і check. Якщо ви запускаєте тести вперше, НЕ СЛІД комбінувати методи save і compare, методи check автоматично створять для вас базове зображення

#####################################################################################
INFO:
Autosaved the image to
/Users/wswebcreation/sample/baselineFolder/desktop_chrome/examplePage-chrome-latest-1366x768.png
#####################################################################################

Коли ви вимкнули автоматичне збереження базових зображень, Promise буде відхилено з наступним попередженням.

#####################################################################################
Baseline image not found, save the actual image manually to the baseline.
The image can be found here:
/Users/wswebcreation/sample/.tmp/actual/desktop_chrome/examplePage-chrome-latest-1366x768.png
#####################################################################################

Це означає, що поточний скріншот збережено в папці actual, і ви повинні вручну скопіювати його в базову папку. Якщо ви ініціалізуєте @wdio/visual-service з autoSaveBaseline: true, зображення буде автоматично збережено в базовій папці.

Welcome! How can I help?

WebdriverIO AI Copilot