WebdriverIO Mock对象详解：网络请求模拟实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00355/article/details/148418544

WebdriverIO Mock对象详解：网络请求模拟实战指南

webdriverio Next-gen browser and mobile automation test framework for Node.js 项目地址: https://gitcode.com/gh_mirrors/we/webdriverio

什么是Mock对象

Mock对象是WebdriverIO中用于模拟网络请求的核心工具，它允许开发者拦截和修改浏览器发出的HTTP请求。通过Mock对象，我们可以：

拦截特定模式的网络请求
修改请求的响应内容
模拟网络错误情况
监控请求和响应的详细信息

使用前提条件

使用Mock功能需要满足以下技术条件：

必须在基于Chromium的浏览器本地运行测试
或者使用Selenium Grid v4及以上版本
需要Chrome DevTools协议支持

注意：在云端运行自动化测试时无法使用此功能。

Mock对象核心属性

Mock对象包含以下重要属性，可以帮助我们获取请求的详细信息：

| 属性名称 | 类型 | 描述 | |----------------|------------|----------------------------------------------------------------------| | url | 字符串 | 传递给mock命令的URL匹配模式 | | filterOptions| 对象 | 传递给mock命令的资源过滤选项 | | browser | 对象 | 获取Mock对象时使用的浏览器对象 | | calls | 对象数组 | 包含所有匹配请求的详细信息，如URL、方法、头信息、状态码和响应体等 |

Mock对象常用方法

Mock对象提供了一系列强大的方法来控制请求行为：

请求拦截类方法
- abort(): 永久中止匹配的请求
- abortOnce(): 仅中止下一次匹配的请求
响应模拟类方法
- respond(): 永久修改匹配请求的响应
- respondOnce(): 仅修改下一次匹配请求的响应
管理类方法
- clear(): 清除所有mock设置
- restore(): 恢复原始网络行为

事件监听机制

Mock对象实现了事件发射器模式，可以监听多种网络事件：

1. 请求事件(request)

当发起匹配mock模式的网络请求时触发，事件回调中包含请求的详细信息。

2. 响应覆盖事件(overwrite)

当使用respond或respondOnce覆盖响应时触发，包含修改后的响应信息。

3. 失败事件(fail)

当使用abort或abortOnce中止请求时触发，包含失败原因。

4. 匹配事件(match)

当新请求匹配mock模式时触发，在继续或覆盖响应之前。

5. 继续事件(continue)

当响应未被mock修改时触发。

实战应用示例

示例1：监控待处理请求数量

let pendingRequests = 0
const mock = await browser.mock('**')  // 匹配所有请求

mock.on('request', ({request}) => {
    pendingRequests++
    console.log(`拦截到请求: ${request.url}, 待处理请求数: ${pendingRequests}`)
})

mock.on('match', ({url}) => {
    pendingRequests--
    console.log(`请求完成: ${url}, 剩余待处理请求数: ${pendingRequests}`)
})

示例2：处理404错误

browser.addCommand('safeLoadPage', async (url, options = {}) => {
    const mock = await browser.mock('**')
    
    return new Promise((resolve, reject) => {
        mock.on('match', ({url, statusCode}) => {
            if (statusCode === 404) {
                reject(new Error(`请求失败: ${url} 返回404`))
            }
        })

        browser.url(url)
            .then(() => options.selector ? $(options.selector).waitForExist() : Promise.resolve())
            .then(resolve)
            .catch(reject)
    })
})

// 使用示例
await browser.safeLoadPage('https://example.com', {selector: '#main'})

示例3：响应优先级控制

const commonMock = await browser.mock('**/api/**')
const specificMock = await browser.mock('**/api/user/**')

commonMock.respondOnce({data: '通用响应'})
specificMock.respond({data: '特定响应'})

commonMock.on('overwrite', () => {
    console.log('使用通用mock响应')
}).on('continue', () => {
    console.log('请求未被通用mock处理')
})

specificMock.on('continue', () => {
    console.log('第一次特定请求未被处理')
}).on('overwrite', () => {
    console.log('使用特定mock响应')
})