WebdriverIO：如何获取全部浏览器控制台日志并集成至测试报告

我之前也碰到过一模一样的问题！其实核心原因是WebdriverIO默认只捕获级别较高的控制台日志（比如warn、error），要拿到全部log信息，得从配置和代码两方面调整，下面是具体的解决步骤：

1. 调整浏览器Capabilities配置 #

默认情况下，WebdriverIO会过滤掉低级别日志，你需要在wdio.conf.js的capabilities配置里明确指定要捕获的日志级别。以Chrome为例：

capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
        args: ['--disable-web-security', '--no-sandbox'],
        // 设置捕获所有级别浏览器日志
        loggingPrefs: {
            browser: 'ALL'
        }
    }
}]

如果是Firefox，配置逻辑类似：

capabilities: [{
    browserName: 'firefox',
    'moz:firefoxOptions': {
        args: ['--headless']
    },
    loggingPrefs: {
        browser: 'ALL'
    }
}]

这里的loggingPrefs.browser可选值包括：OFF、SEVERE、WARNING、INFO、CONFIG、FINE、FINER、FINEST、ALL，设置为ALL就能捕获所有console输出，包括log、info、warn、error等类型。

2. 正确调用日志获取方法 #

调用browser.getLogs('browser')时要注意时机——最好在测试用例结束后（或者需要捕获日志的操作完成后）立即调用，避免日志被浏览器自动清空。推荐在afterTest钩子中统一处理：

afterTest: async (test, context, { error, passed }) => {
    // 可以针对失败用例单独捕获日志，也可以所有用例都捕获
    if (!passed) {
        const browserLogs = await browser.getLogs('browser');
        // 先打印日志方便调试
        console.log('=== 浏览器控制台日志 ===', browserLogs);
    }
}

3. 把日志集成到测试报告 #

不同报告器的集成方式略有差异，这里给两个常用报告器的实现示例：

Spec报告器 #

在wdio.conf.js启用spec报告器后，直接把日志追加到测试失败信息中，就能在报告里看到：

afterTest: async (test, context, { error, passed }) => {
    if (!passed) {
        const browserLogs = await browser.getLogs('browser');
        if (browserLogs.length > 0) {
            // 把日志拼接到错误信息末尾
            error.message += '\n\n=== 浏览器控制台日志 ===\n';
            error.message += browserLogs.map(log => `${log.level}: ${log.message}`).join('\n');
        }
    }
}

Allure报告器 #

可以用addAttachment方法把日志作为附件添加到测试结果中，方便后续查看：

const allureReporter = require('@wdio/allure-reporter').default;

afterTest: async (test, context, { passed }) => {
    if (!passed) {
        const browserLogs = await browser.getLogs('browser');
        if (browserLogs.length > 0) {
            const logContent = browserLogs.map(log => `[${new Date(log.timestamp)}] ${log.level}: ${log.message}`).join('\n');
            allureReporter.addAttachment('浏览器控制台日志', logContent, 'text/plain');
        }
    }
}

4. 几个注意事项 #

• 部分浏览器（比如Safari）的日志捕获支持有限，要确保Webdriver版本和浏览器版本兼容；
• 如果页面日志量较大，建议在beforeTest钩子中先调用一次browser.getLogs('browser')并忽略结果，清空之前的日志堆积；
• 尽量使用较新的WebdriverIO版本，旧版本可能存在日志捕获的bug。

内容的提问来源于stack exchange，提问作者Ewgenij Sokolovski