除錯
當多個程序在多個瀏覽器中產生數十個測試時，除錯會變得更加困難。
首先，將 maxInstances 設定為 1，並僅針對需要除錯的規格和瀏覽器，這非常有助於限制並行性。
在 wdio.conf 中
export const config = {
// ...
maxInstances: 1,
specs: [
'**/myspec.spec.js'
],
capabilities: [{
browserName: 'firefox'
}],
// ...
}
除錯命令
在許多情況下，您可以使用 browser.debug() 來暫停您的測試並檢查瀏覽器。
您的命令列介面也會切換到 REPL 模式。此模式允許您在頁面上處理命令和元素。在 REPL 模式下，您可以像在測試中一樣存取 browser 物件—或 $ 和 $$ 函數。
當使用 browser.debug() 時，您可能需要增加測試執行器的逾時時間，以防止測試執行器因花費過長時間而使測試失敗。例如
在 wdio.conf 中
jasmineOpts: {
defaultTimeoutInterval: (24 * 60 * 60 * 1000)
}
有關如何使用其他框架執行此操作的更多資訊，請參閱逾時。
要在除錯後繼續測試，請在 shell 中使用 ^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
...並使用開發人員工具除錯您的規格檔案！
使用 Visual Studio Code (VSCode) 除錯
如果您想在最新的 VSCode 中使用中斷點除錯您的測試，您有兩個啟動除錯器選項，其中選項 1 是最簡單的方法
- 自動附加除錯器
- 使用設定檔附加除錯器
VSCode 切換自動附加
您可以按照 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"
]
},
若要執行所有規格檔案，請從 "args" 中移除 "--spec", "${file}"
其他資訊：https://vscode.dev.org.tw/docs/nodejs/nodejs-debugging
使用 Atom 的動態 Repl
如果您是 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) // list might not be populated at the time of the assertion
expect(await elem.getText()).toEqual('this button was clicked 3 times') // text might not be updated yet at the time of assertion resulting in an error ("this button was clicked 2 times" does not match the expected "this button was clicked 3 times")
expect(await elem.isDisplayed()).toBe(true) // might not be displayed yet
若要解決此問題，應改用非同步斷言。以上範例如下所示
await expect(elementList).toBeElementsArrayOfSize(7)
await expect(elem).toHaveText('this button was clicked 3 times')
await expect(elem).toBeDisplayed()
使用這些斷言，WebdriverIO 會自動等待直到條件符合。當斷言文字時，這表示元素需要存在且文字需要等於預期值。我們在我們的最佳實務指南中更詳細地討論了這個問題。
