Відлагодження

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

Для початку, надзвичайно корисно обмежити паралелізм, встановивши maxInstances на 1, і націлюватися лише на ті специфікації та браузери, які потрібно відлагоджувати.

У wdio.conf:

export const config = {
    // ...
    maxInstances: 1,
    specs: [
        '**/myspec.spec.js'
    ],
    capabilities: [{
        browserName: 'firefox'
    }],
    // ...
}

Команда Debug​

У багатьох випадках ви можете використовувати browser.debug(), щоб призупинити тест і перевірити браузер.

Інтерфейс командного рядка також перейде в режим REPL. Цей режим дозволяє експериментувати з командами та елементами на сторінці. У режимі REPL ви можете отримати доступ до об'єкта browser—або функцій $ та $$—так само, як у тестах.

При використанні browser.debug() вам, ймовірно, знадобиться збільшити час очікування тест-ранера, щоб запобігти провалу тесту через занадто довге виконання. Наприклад:

У wdio.conf:

jasmineOpts: {
    defaultTimeoutInterval: (24 * 60 * 60 * 1000)
}

Перегляньте timeouts для отримання додаткової інформації про те, як це зробити з використанням інших фреймворків.

Щоб продовжити тести після відлагодження, у командній оболонці використовуйте комбінацію клавіш ^C або команду .exit.

Динамічна конфігурація​

Зауважте, що wdio.conf.js може містити JavaScript. Оскільки ви, ймовірно, не хочете постійно змінювати значення таймауту на 1 день, часто буває корисно змінювати ці налаштування з командного рядка, використовуючи змінну середовища.

Використовуючи цю техніку, ви можете динамічно змінювати конфігурацію:

const debug = process.env.DEBUG
const defaultCapabilities = ...
const defaultTimeoutInterval = ...
const defaultSpecs = ...

export const config = {
    // ...
    maxInstances: debug ? 1 : 100,
    capabilities: debug ? [{ browserName: 'chrome' }] : defaultCapabilities,
    execArgv: debug ? ['--inspect'] : [],
    jasmineOpts: {
      defaultTimeoutInterval: debug ? (24 * 60 * 60 * 1000) : defaultTimeoutInterval
    }
    // ...
}

Потім ви можете додати префікс debug до команди wdio:

$ DEBUG=true npx wdio wdio.conf.js --spec ./tests/e2e/myspec.test.js

...і відлагоджувати файл специфікації за допомогою DevTools!

Відлагодження з Visual Studio Code (VSCode)​

Якщо ви хочете відлагоджувати свої тести з точками зупинки в останній версії VSCode, у вас є два варіанти запуску відладчика, з яких варіант 1 є найпростішим методом:

1. автоматичне приєднання відладчика
2. приєднання відладчика за допомогою файлу конфігурації

VSCode Toggle Auto Attach​

Ви можете автоматично приєднати відладчик, виконавши ці кроки у VSCode:

• Натисніть CMD + Shift + P (Linux та MacOS) або CTRL + Shift + P (Windows)
• Введіть "attach" у поле вводу
• Виберіть "Debug: Toggle Auto Attach"
• Виберіть "Only With Flag"

Це все! Тепер, коли ви запускаєте свої тести (пам'ятайте, що вам потрібно встановити прапор --inspect у вашій конфігурації, як показано раніше), він автоматично запустить відладчик і зупиниться на першій точці зупинки, яку він досягне.

Файл конфігурації VSCode​

Можливо запускати всі або вибрані файли специфікацій. Конфігурацію(ї) відлагодження потрібно додати до .vscode/launch.json, щоб відлагоджувати обрану специфікацію, додайте наступну конфігурацію:

{
    "name": "run select spec",
    "type": "node",
    "request": "launch",
    "args": ["wdio.conf.js", "--spec", "${file}"],
    "cwd": "${workspaceFolder}",
    "autoAttachChildProcesses": true,
    "program": "${workspaceRoot}/node_modules/@wdio/cli/bin/wdio.js",
    "console": "integratedTerminal",
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "${workspaceFolder}/lib/**/*.js",
        "<node_internals>/**/*.js"
    ]
},

Щоб запустити всі файли специфікацій, видаліть "--spec", "${file}" з "args"

Приклад: .vscode/launch.json

Додаткова інформація: https://code.visualstudio.com/docs/nodejs/nodejs-debugging

Динамічний Repl з Atom​

Якщо ви користуєтесь Atom, ви можете спробувати wdio-repl від @kurtharriger, який є динамічним repl, що дозволяє виконувати окремі рядки коду в Atom. Перегляньте це відео на YouTube, щоб побачити демонстрацію.

Відлагодження з WebStorm / Intellij​

Ви можете створити конфігурацію відлагодження node.js ось так: Перегляньте це відео на YouTube для отримання додаткової інформації про те, як створити конфігурацію.

Відлагодження нестабільних тестів​

Нестабільні тести може бути справді важко відлагодити, тому ось кілька порад, як ви можете спробувати відтворити локально ті нестабільні результати, які ви отримали у вашому CI.

Мережа​

Для відлагодження нестабільності, пов'язаної з мережею, використовуйте команду throttleNetwork.

await browser.throttleNetwork('Regular3G')

Швидкість рендерингу​

Для відлагодження нестабільності, пов'язаної зі швидкістю пристрою, використовуйте команду throttleCPU. Це призведе до повільнішого рендерингу ваших сторінок, що може бути спричинено багатьма факторами, наприклад, запуском кількох процесів у вашому CI, що може уповільнювати ваші тести.

await browser.throttleCPU(4)

Швидкість виконання тестів​

Якщо ваші тести не здаються ураженими, можливо, WebdriverIO швидший за оновлення з фронтенд-фреймворка / браузера. Це відбувається при використанні синхронних тверджень, оскільки WebdriverIO не має можливості повторно перевірити ці твердження. Деякі приклади коду, який може зламатися через це:

expect(elementList.length).toEqual(7) // список може не бути заповнений на момент твердження
expect(await elem.getText()).toEqual('this button was clicked 3 times') // текст може ще не оновитися на момент твердження, що призведе до помилки ("this button was clicked 2 times" не відповідає очікуваному "this button was clicked 3 times")
expect(await elem.isDisplayed()).toBe(true) // може ще не відображатися

Для вирішення цієї проблеми слід використовувати асинхронні твердження. Наведені вище приклади будуть виглядати так:

await expect(elementList).toBeElementsArrayOfSize(7)
await expect(elem).toHaveText('this button was clicked 3 times')
await expect(elem).toBeDisplayed()

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