跳至主要内容

调试

当多个进程在多个浏览器中生成数十个测试时,调试会变得非常困难。

首先,通过将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 是最简单的方法

  1. 自动附加调试器
  2. 使用配置文件附加调试器

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}"

示例:.vscode/launch.json

其他信息:https://vscode.js.cn/docs/nodejs/nodejs-debugging

使用 Atom 进行动态 REPL

如果您是Atom黑客,您可以尝试wdio-repl(由@kurtharriger创建),这是一个动态REPL,允许您在Atom中执行单个代码行。观看YouTube视频以查看演示。

使用 WebStorm/Intellij 进行调试

您可以像这样创建 node.js 调试配置:2021-05-29 17-33-33 的屏幕截图观看此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 将自动等待直到条件匹配。在断言文本时,这意味着元素需要存在并且文本需要等于预期值。我们在最佳实践指南中对此进行了更多讨论。

欢迎!我怎样才能帮到您?

WebdriverIO AI Copilot