WDIO Allure报告如何插入步骤间截图及实现类似Selenium的用例分组？

一、测试用例分组实现 #

你可以通过两种方式实现和Selenium一致的测试用例分组效果：

• 原生WDIO的describe/context块天然可以做第一层分组，对应Allure报告的测试套件层级
• 使用Allure提供的标签API实现更细粒度的分组，常用API如下：
  • allureReporter.addFeature('模块名')：按业务模块分组
  • allureReporter.addStory('场景名')：按业务场景分组
  • allureReporter.addSeverity('优先级')：按用例优先级分组（可选值blocker/critical/normal/minor/trivial）
  • allureReporter.addTag('自定义标签')：自定义标签分组

参考修改后的用例代码：

// 第一层套件分组
describe('登录模块测试', () => {
  it('with valid user credentials', async () =>{
    // 细粒度分组标签
    allureReporter.addFeature('账号体系')
    allureReporter.addStory('正常登录')
    allureReporter.addSeverity('critical')
    allureReporter.addTag('P0用例')

    // 原有测试逻辑
    await landingScreen.tapSignIn();
    await screenShots.captureScreenShot(filePath, "OnboardingScreen.png")
    // 其余逻辑不变...
  })
})

配置完成后打开Allure报告，在「功能」「分类」「标记」栏目下就可以看到对应的分组结果。

二、测试步骤关联截图实现 #

Allure支持在步骤中直接插入附件，你只需要在执行完步骤操作后，调用allureReporter.addAttachment方法把截图插入到对应步骤下即可，实现逻辑如下：

1. 确保你可以拿到截图的Buffer数据（可以直接用WDIO原生截图接口返回base64，也可以读取你本地保存的截图文件转为Buffer）
2. 在allureReporter.addStep之后新增附件上传逻辑

参考修改后的页面对象login方法代码：

async login(userName, password) {
    await this.spinner.waitForDisplayed({timeout:20000, reverse: true, timeoutMsg: 'Spinner is still exists' })

    try {
        await this.wait_till_screen_displayed
        allureReporter.addStep("Enter user name");
        await this.inputUserName.setValue(userName);
        // 新增：步骤完成后截图并绑定到当前步骤
        const userNameScreenshot = await browser.takeScreenshot()
        allureReporter.addAttachment('输入用户名后截图', Buffer.from(userNameScreenshot, 'base64'), 'image/png')

        allureReporter.addStep("Enter password");
        await this.inputPassword.setValue(password);
        // 新增：输入密码后截图并绑定到当前步骤
        const pwdScreenshot = await browser.takeScreenshot()
        allureReporter.addAttachment('输入密码后截图', Buffer.from(pwdScreenshot, 'base64'), 'image/png')

        await this.keepMeSignedIn.click();
        await this.signInButton.click();
    } catch (error) {
        console.log(error + "This to catch the error")
    }  
}    

如果你用自己封装的screenShots.captureScreenShot方法，只需要调整逻辑拿到对应截图的Buffer替换上面的截图逻辑即可，上传后的截图会直接展示在对应步骤的详情中。

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