WebdriverIO v7(JS)捕获浏览器控制台错误日志：求addConsoleLogs示例

1. 配置Spec Reporter与日志捕获 #

在wdio.conf.js中启用Spec Reporter并开启日志捕获选项：

exports.config = {
    // 其他基础配置
    reporters: [
        ['spec', {
            addConsoleLogs: true, // 捕获测试中的console输出
            addBrowserLogs: true, // 捕获浏览器端的控制台日志
        }]
    ],
    // 其他配置项
}

2. 配置浏览器日志捕获能力 #

根据使用的浏览器，在capabilities中添加日志偏好设置：

• Chrome/Edge 配置：

capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
        args: ['--headless', '--disable-gpu'] // 可选无头模式
    },
    'goog:loggingPrefs': {
        browser: 'SEVERE', // 捕获错误级别日志，可选'WARNING'/'INFO'等
        driver: 'SEVERE'
    }
}]

• Firefox 配置：

capabilities: [{
    browserName: 'firefox',
    'moz:firefoxOptions': {
        args: ['-headless'] // 可选无头模式
    },
    'moz:loggingPrefs': {
        browser: 'WARN' // 捕获警告及以上级别日志
    }
}]

3. 测试用例中手动处理日志（可选） #

若需要在测试逻辑中直接获取并校验日志，可使用browser.getLogs('browser')（v7中仍可用，需配合上述配置）：

describe('浏览器日志捕获测试', () => {
    it('检查页面控制台错误', async () => {
        await browser.url('https://你的测试页面地址');
        
        // 获取浏览器控制台日志
        const allLogs = await browser.getLogs('browser');
        // 过滤出错误日志
        const errorLogs = allLogs.filter(log => log.level === 'SEVERE');
        
        // 断言页面无控制台错误
        expect(errorLogs.length).toBe(0);
        
        // 日志会自动被Spec Reporter捕获到测试报告中
        console.log('浏览器控制台日志:', allLogs);
    });
});

注意事项 #

• 确保WebdriverIO版本为v7及以上，Spec Reporter的addBrowserLogs选项在该版本生效
• 不同浏览器的日志配置参数存在差异，需对应调整loggingPrefs字段
• 若使用云测试平台，需确认平台支持该日志捕获配置

内容的提问来源于stack exchange，提问作者Any php guy