Playwright拦截接口并修改返回数据的N种方法

最新推荐文章于 2025-07-29 11:05:03 发布

原创最新推荐文章于 2025-07-29 11:05:03 发布 · 478 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#自动化测试

Playwright Mock 核心概念

什么是 API Mock？

API Mock 是一种测试技术，通过拦截前端请求并返回预设响应，实现：

环境解耦：无需依赖真实后端服务
数据控制：精准构造测试所需响应数据
异常模拟：轻松复现网络错误、超时等场景

Playwright Mock 优势

多语言支持：Java/Python/C#/Node.js 统一 API
灵活匹配：支持 URL 正则、请求头/体内容匹配
动态响应：可基于请求参数生成动态响应
调试友好：内置请求日志记录功能

基础 Mock 示例

环境准备

<!-- Maven 依赖 -->
<dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.32.0</version>
</dependency>

基础 Mock

import com.microsoft.playwright.*;

public class MockDemo {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            // 1. 创建浏览器实例
            Browser browser = playwright.chromium().launch();
            
            // 2. 创建上下文并启用 Mock
            BrowserContext context = browser.newContext(new Browser.NewContextOptions()
                .withRoute("https://api.example.com/data", route -> 
                    route.mock()
                        .withStatus(200)
                        .withBody("{\"code\":200,\"data\":[1,2,3]}")
                )
            );
            
            // 3. 执行测试
            Page page = context.newPage();
            page.navigate("https://your-frontend-app.com");
            System.out.println(page.content());
        }
    }
}

代码解析：

withRoute() 定义需要拦截的 URL 模式
mock() 方法链式配置响应参数：
- withStatus() 设置 HTTP 状态码
- withBody() 定义返回内容（支持 JSON/HTML/Text）
- withHeaders() 可自定义响应头

复杂场景处理

动态响应生成

route.mock()
    .withStatus(200)
    .withBody(request -> {
        String requestId = request.url().split("id=")[1];
        return String.format("{\"id\":%s,\"name\":\"Mock User\"}", requestId);
    });

适用场景：需要根据请求参数动态生成响应内容（如用户ID查询）

多请求匹配策略

// 正则匹配 URL
context = browser.newContext(new Browser.NewContextOptions()
    .withRoute(/user\/\d+/, route -> 
        route.mock()
            .withBody("{\"status\":\"OK\"}")
    )
);

// 匹配请求头
context = browser.newContext(new Browser.NewContextOptions()
    .withRoute(route -> 
        route.matchHeader("Authorization", "Bearer mock-token")
    )
);

模拟网络异常

route.mock()
    .withStatus(500)
    .withBody("Server Error")
    .withDelay(2000); // 模拟 2 秒延迟

扩展用法：

withAbort() 模拟连接中断
withTimeout() 设置响应超时

实战案例

测试目标

验证用户登录功能在不同响应下的表现：

正常登录（返回 200 + token）
密码错误（返回 401）
服务器异常（返回 500）

测试代码实现

public class LoginTest {
    private static final String API_URL = "https://api.example.com/login";
    
    @Test
    public void testLoginSuccess() {
        try (Playwright playwright = Playwright.create()) {
            BrowserContext context = createMockContext(200, "{\"token\":\"valid-token\"}");
            
            Page page = context.newPage();
            page.navigate("https://app.example.com/login");
            page.fill("#username", "testuser");
            page.fill("#password", "correctpass");
            page.click("button[type=submit]");
            
            assertThat(page.innerText(".welcome-message")).contains("Welcome");
        }
    }

    @Test
    public void testWrongPassword() {
        try (Playwright playwright = Playwright.create()) {
            BrowserContext context = createMockContext(401, "{\"error\":\"Invalid credentials\"}");
            
            Page page = context.newPage();
            page.navigate("https://app.example.com/login");
            // ... 执行登录操作
            assertThat(page.innerText(".error-message")).contains("Wrong password");
        }
    }

    private BrowserContext createMockContext(int status, String body) {
        return playwright.chromium().launch().newContext(new Browser.NewContextOptions()
            .withRoute(API_URL, route -> 
                route.mock()
                    .withStatus(status)
                    .withBody(body)
            )
        );
    }
}