调试
当多个进程在多个浏览器中生成数十个测试时,调试会变得非常困难。
首先,通过将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
...并使用 DevTools 调试您的规范文件!
使用 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.js.cn/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 将自动等待直到条件匹配。在断言文本时,这意味着元素需要存在并且文本需要等于预期值。我们在最佳实践指南中对此进行了更多讨论。