Playwright 中如何设计可复用的 API 测试方法-js教程-PHP中文网

Playwright 中如何设计可复用的 API 测试方法

本文介绍在 playwright 中通过封装类（而非裸函数）实现 api 请求逻辑的复用，解决因 url 拼接错误、上下文丢失或异步返回缺失导致的 404 等问题，并提供结构清晰、可维护、符合最佳实践的测试工具层设计方案。

本文介绍在 playwright 中通过封装类（而非裸函数）实现 api 请求逻辑的复用，解决因 url 拼接错误、上下文丢失或异步返回缺失导致的 404 等问题，并提供结构清晰、可维护、符合最佳实践的测试工具层设计方案。

在 Playwright 的 API 测试中，简单地将 request.get() 封装为独立函数看似便捷，但极易引发隐性错误——例如原始代码中 getSubscriptionsFromAPI 函数未正确拼接完整 URL（apiBaseUrl 缺少协议且路径格式不规范），同时未 return 响应数据，导致调用方无法获取结果；更关键的是，该函数未声明对 APIRequestContext 的依赖契约，破坏了 Playwright 的请求上下文生命周期管理。

✅ 正确做法是采用面向对象封装 + 依赖注入模式：将 API 客户端抽象为类，构造时接收 request 实例（即 APIRequestContext），并在内部统一管理基础 URL、认证头、断言与响应解析逻辑。

以下是一个生产就绪的示例：

// utils/subscriptionapi.js
import { expect } from "@playwright/test";

export class SubscriptionAPI {
  constructor(request, options = {}) {
    this.request = request;
    this.baseURL = options.baseURL || process.env.API_BASEURL || "https://apiv3.apifootball.com";
    this.authToken = options.authToken || process.env.API_TOKEN || "abcdef";
  }

  async getSubscriptionsFromAPI() {
    const url = `${this.baseURL}/?action=get_countries`;
    const response = await this.request.get(url, {
      headers: {
        "X-Auth-Token": this.authToken,
      },
    });

    // 强制校验 HTTP 状态码并解析 JSON
    expect(response).toBeOK();
    const data = await response.json();
    console.log(`✅ GET ${url} → ${response.status()}`);
    return data;
  }
}

在测试文件中使用时，只需实例化并调用方法即可：

Playwright Browser Automation

使用Playwright API直接进行浏览器自动化。导航网站、与元素交互、提取数据、截图、生成PDF、录制视频，自动化复杂工作流程。比MCP方法更可靠。

下载

// tests/subscriptionApiTests.spec.js
import { test, expect } from "@playwright/test";
import { SubscriptionAPI } from "../utils/subscriptionapi.js";

test("get subscriptions from subscription API", async ({ request }) => {
  const api = new SubscriptionAPI(request, {
    baseURL: "https://apiv3.apifootball.com",
    authToken: "your-real-token-here",
  });

  const countries = await api.getSubscriptionsFromAPI();
  expect(Array.isArray(countries)).toBe(true);
  expect(countries.length).toBeGreaterThan(0);
});

⚠️ 关键注意事项：

必须显式 return 响应或解析后的数据：原函数未返回值，导致 const response = await ... 接收到 undefined；
URL 必须含协议（https://）：Playwright 不会自动补全，缺失协议会导致请求被发送至本地相对路径，触发 404；
避免在工具类中导入 test 或 expect：仅在测试文件中使用断言，工具类应专注 I/O 和数据转换；
推荐使用 expect(response).toBeOK() 而非手动 expect(status).toBe(200)：它自动涵盖 2xx 全范围状态码，更健壮；
环境变量优先 + 构造参数兜底：提升配置灵活性与可测试性。