Skip to main content

网络与模拟

🌐 Network & Mocking

检查网络流量、模拟 API 响应，并测试离线行为。检查请求是 核心 的一部分，始终可用。模拟和网络状态控制需要 网络 功能。

🌐 Inspect network traffic, mock API responses, and test offline behavior. Inspecting requests is part of core and always available. Mocking and network state control require the network capability.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=network"]
    }
  }
}

检查网络请求​

🌐 Inspect network requests

browser_network_requests​

列出自页面加载以来的请求。属于 核心 — 无需额外能力。

🌐 List requests made since page load. Part of core — no extra capability needed.

参数类型必填描述
filter字符串否用于过滤 URL 的正则表达式模式
includeStatic布尔值否是否包含图片、CSS、字体
includeBody布尔值否是否包含请求体
includeHeaders布尔值否是否包含请求头
→ browser_network_requests { filter: "api" }

  GET  200 https://api.example.com/me              8ms   application/json
  POST 201 https://api.example.com/users/create     45ms  application/json
  GET  200 https://api.example.com/settings         12ms  application/json

模拟 API 响应​

🌐 Mock API responses

browser_route​

拦截匹配 URL 模式的请求并返回自定义响应。

🌐 Intercept requests matching a URL pattern and return a custom response.

参数类型是否必填描述
pattern字符串是URL 模式（支持 ** 通配符）
status数字否HTTP 状态码
body字符串否响应体
contentType字符串否Content-Type 头
headers对象否额外的响应头
removeHeaders字符串数组否要从请求中移除的头

模拟一个 API 端点​

🌐 Mock an API endpoint

You: Mock the /api/users endpoint to return two test users.

→ browser_route {
    pattern: "**/api/users",
    status: 200,
    body: "[{\"id\":1,\"name\":\"Alice\"},{\"id\":2,\"name\":\"Bob\"}]",
    contentType: "application/json"
  }
→ browser_reload
→ browser_snapshot
  - heading "Users" [level=1]
  - list "User list":
    - listitem: "Alice"
    - listitem: "Bob"

测试错误处理​

🌐 Test error handling

You: Test what happens when the API returns a 503 error.

→ browser_route { pattern: "**/api/users", status: 503 }
→ browser_reload
→ browser_snapshot
  - heading "Something went wrong" [level=1]
  - button "Retry" [ref=e5]

→ browser_take_screenshot

去掉模拟并验证恢复：

🌐 Remove the mock and verify recovery:

→ browser_unroute
→ browser_click { ref: "e5" }
→ browser_snapshot
  - heading "Users" [level=1]
  - list "User list":
    - listitem: "Alice Johnson"
    - listitem: "Bob Smith"

阻止资源​

🌐 Block resources

→ browser_route { pattern: "**/*.jpg", status: 404 }
→ browser_route { pattern: "**/analytics/**", status: 204 }

移除认证头​

🌐 Strip authentication headers

→ browser_route { pattern: "**/api/**", removeHeaders: ["cookie", "authorization"] }
→ browser_reload
  // Page shows 401 / login prompt

带条件的代码模拟​

🌐 Conditional mocking with code

对于复杂场景——延迟、条件响应、请求体检查——使用 browser_run_code：

🌐 For complex scenarios — delays, conditional responses, request body inspection — use browser_run_code:

→ browser_run_code {
    code: "async (page) => {
      await page.route('**/api/search', async route => {
        const url = new URL(route.request().url());
        const query = url.searchParams.get('q');
        await route.fulfill({
          body: JSON.stringify(query === 'empty' ? [] : [{ title: 'Result: ' + query }])
        });
      });
    }"
  }

管理路由​

🌐 Manage routes

browser_route_list​

→ browser_route_list

  Pattern              Status  Content-Type
  **/api/users         200     application/json
  **/*.jpg             404     -
  **/analytics/**      204     -

browser_unroute​

参数类型必需描述
pattern字符串否要移除的模式。省略以移除所有。

测试离线模式​

🌐 Test offline mode

browser_network_state_set​

参数类型是否必需描述
state字符串是online 或 offline
→ browser_network_state_set { state: "offline" }
→ browser_reload
→ browser_snapshot
  - heading "No internet connection" [level=1]

→ browser_network_state_set { state: "online" }
→ browser_reload
  // Page loads normally