Playwright断言之---API响应断言

Playwright 提供了强大的 API 响应断言功能，可以通过 page.waitForResponse() 等方法等待和捕获网络请求的响应。捕获到响应后，你可以使用多个方法来检查响应的状态码、头信息、正文内容等。通过这些断言，你可以确保你的应用与后端 API 之间的交互是正确的。

主要的断言方式包括：

• 验证 HTTP 状态码 (response.status())
• 验证响应内容（JSON、文本等）
• 捕获并验证多个响应
• 模拟和拦截请求

1. 等待响应 (Waiting for Responses)

在 Playwright 中，可以通过 page.waitForResponse() 方法来等待和捕获网络请求的响应。

• page.waitForResponse(): 用于等待特定的响应。可以通过 URL 匹配或者自定义函数来过滤想要捕获的响应。

const response = await page.waitForResponse('**/api/endpoint');

或者通过自定义匹配函数：

const response = await page.waitForResponse((response) => response.url().includes('api/endpoint') && response.status() === 200);

上面这个方法等待直到一个符合条件的响应被返回。

2. 获取响应对象 (Accessing Response Object)

一旦响应被捕获，你可以通过响应对象进行各种断言操作。

• response.status(): 获取响应的 HTTP 状态码。

const status = response.status();
expect(status).toBe(200); // 验证响应的状态码为 200

• response.body(): 获取响应体内容。它会返回原始的响应体，可以用来进行自定义验证。

const body = await response.body();
// 对响应体做一些断言，比如转换成 JSON 格式验证
const data = JSON.parse(body.toString());
expect(data.someField).toBe('expected value');

• response.text(): 获取响应的文本内容，适用于返回文本数据的 API。

const text = await response.text();
expect(text).toContain('expected text');

• response.json(): 获取响应的 JSON 内容。如果服务器返回的是 JSON 格式的数据，可以使用 response.json() 来解析并验证。

const json = await response.json();
expect(json.someField).toBe('expected value');

• response.headers(): 获取响应的头信息。你可以用它来验证返回的 HTTP 头部。

const headers = response.headers();
expect(headers['content-type']).toBe('application/json; charset=utf-8');

• response.url(): 获取响应的 URL。

const url = response.url();
expect(url).toBe('https://api.example.com/endpoint');

3. 验证响应的内容 (Validating Response Content)

通过对响应内容的断言，你可以确保 API 返回的数据格式和内容符合预期。以下是几种常见的内容验证方式：

• 验证响应的 JSON 数据

  如果 API 返回的是 JSON 格式的数据，你可以直接使用 response.json() 获取并断言 JSON 内容。

const response = await page.waitForResponse('**/api/endpoint');
const json = await response.json();
expect(json.data).toEqual({ key: 'value' }); // 验证 JSON 数据的字段值

• 验证响应体的文本内容

如果 API 返回的是纯文本，可以使用 response.text() 来断言返回的文本内容。

const response = await page.waitForResponse('**/api/endpoint');
const text = await response.text();
expect(text).toContain('Expected Text');

4. 验证状态码 (Validating HTTP Status Codes)

HTTP 状态码是验证 API 响应的常见方式。常见的状态码包括：200 OK，404 Not Found，500 Internal Server Error 等。

• 验证状态码为 200

const response = await page.waitForResponse('**/api/endpoint');
expect(response.status()).toBe(200); // 验证状态码为 200

• 验证状态码为 4xx 或 5xx 错误

如果你期望的是错误状态码，如 404 或 500，你可以做类似的断言。

const response = await page.waitForResponse('**/api/endpoint');
expect(response.status()).toBeGreaterThanOrEqual(400); // 验证状态码大于等于 400

5. 等待请求并获取响应 (Waiting for Request and Response Pair)

有时你可能需要在一个请求发出后等待它的响应，并做相应的断言。你可以通过以下方式实现：

• page.waitForRequest() 和 page.waitForResponse() 配合使用

const requestPromise = page.waitForRequest('**/api/endpoint');
const responsePromise = page.waitForResponse('**/api/endpoint');

// 执行某个操作，触发请求
await page.click('button');

const request = await requestPromise;
const response = await responsePromise;

expect(request.method()).toBe('POST'); // 验证请求方法
expect(response.status()).toBe(200);  // 验证响应状态码

6. 网络请求的模拟和拦截 (Mocking and Intercepting Requests)

你可以通过 Playwright 来模拟和拦截网络请求，以验证 API 响应的行为。例如，你可以使用 page.route() 方法来拦截网络请求并返回自定义的响应。

• 模拟响应

await page.route('**/api/endpoint', (route) => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ message: 'mocked response' }),
  });
});

// 触发请求
await page.click('button');

• 这样，你就可以验证模拟的 API 响应内容是否符合预期。

7. 捕获多个响应 (Handling Multiple Responses)

有时候你需要等待多个响应，或者捕获多个特定的响应。这时你可以通过 Promise.all() 来并行等待多个响应。

• 捕获多个响应

const [response1, response2] = await Promise.all([
  page.waitForResponse('**/api/first-endpoint'),
  page.waitForResponse('**/api/second-endpoint'),
]);

expect(response1.status()).toBe(200);
expect(response2.status()).toBe(200);