TypeScript Playwright中如何正确传递自定义请求头x-my-api-token？

核心问题：APIRequestContext实例传递错误 #

你在初始化DataApi时，传入的是导入的request模块，而非Playwright测试上下文提供的APIRequestContext实例，这直接导致自定义请求头无法被正确应用。

修正方案 #

1. 修正测试代码的实例传递

从测试上下文获取request对象（而非导入的模块），传入DataApi构造函数：

import { request, test, APIRequestContext } from "@playwright/test"

class DataApi {
    constructor(private context: APIRequestContext) { }

    public async getDataForEntity(token: string, entityId?: string): Promise<JSON> {
        const response = await this.context.get(`https://api.example.com/activities/${entityId}`, {
            headers: {
                Accept: "application/json",
                Authorization: `Bearer ${token}`,
                'x-my-api-token': token
            },
        });
        return await response.json();
    }
}

test("Data API", ({ request }) => { // 从测试上下文获取合法的APIRequestContext
    let dataApi: DataApi;

    test.beforeAll(async () => {
        dataApi = new DataApi(request); // 传入正确的实例
    });

    const token = "sample_token";
    const entityId = "12345";

    test.step("should fetch data for an entity", async () => {
        const data = await dataApi.getDataForEntity(token, entityId);
        console.log(data);
    });
});

2. 为什么page.setExtraHTTPHeaders无效？

page.setExtraHTTPHeaders仅作用于浏览器页面发起的请求，而APIRequestContext是独立的HTTP客户端，两者上下文完全隔离，因此该方法无法影响API请求的头信息。

如果需要给所有API请求统一设置默认头，可以通过request.newContext()创建全局配置的上下文：

test.beforeAll(async () => {
    const apiContext = await request.newContext({
        headers: {
            'x-my-api-token': token // 全局默认自定义头
        }
    });
    dataApi = new DataApi(apiContext);
});

3. 修复语法错误（附带说明）

你之前调用page.setExtraHTTPHeaders存在语法错误，正确写法应为：

await page.setExtraHTTPHeaders({
    'x-my-api-token': token
});

但再次强调：该方法仅对页面请求生效，对APIRequestContext发起的请求无作用。

验证请求头是否生效 #

可以通过请求拦截打印实际发送的头信息，确认自定义头是否被正确携带：

test.step("should fetch data for an entity", async () => {
    await dataApi.context.route("https://api.example.com/**", (route) => {
        console.log("实际请求头：", route.request().headers());
        route.continue();
    });
    const data = await dataApi.getDataForEntity(token, entityId);
    console.log(data);
});

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