在企业测试体系中，UI 自动化常被认为 “慢、脆、不稳定”。但实际上：当 UI 测试与 API 测试结合后，可以让测试执行速度更快、定位问题更快、覆盖率更高、用例结构更清晰。
本篇教程将手把手教你：
目录
-
• ✔ 如何让 Playwright直接调用API（无需额外安装库） -
• ✔ 如何让 API负责 “准备数据”，UI用于 “验证展示” -
• ✔ 如何用 API快速登录并写入session，提高UI测试速度 -
• ✔ 如何让 API替UI执行稳定性差的步骤（下单、清理购物车等） -
• ✔ 全流程可运行示例（基于 https://www.saucedemo.com/）
适用人群
-
• 想让 UI自动化跑得更快 -
• 想提升自动化项目可维护性 -
• 项目中 UI自动化存在 “用例冗长、重复步骤多、不稳定” -
• 需要构建企业级 UI+API一体化测试体系
一、为什么要做 UI + API 一体化测试？
UI 自动化的痛点：
-
• 场景准备步骤过长（登录、建数据） -
• 页面加载慢 → 用例执行很慢 -
• UI不稳定导致假失败
API 自动化的优势：
-
• 快 100倍 -
• 稳定 -
• 能直接操作底层业务（购物车、订单、库存……）
结合的价值：
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
这样可以让一条 UI 用例从 15 秒 → 3 秒。
二、Playwright 自带 API 客户端？（是的）
Playwright 不是只有 UI。
Playwright 的 APIRequestContext 等同于一个内置的 HTTP 客户端。
你可以直接：
request = playwright.request.new_context()
response = request.post("https://api.xxx.com/login", data=...)
无需 requests！
三、实战场景：Saucedemo 购物流程
我们将展示：
-
1. 用 API登录，写入Session→UI可直接进入库存页 -
2. API创建购物车数据 →UI直接验证 -
3. UI+API合并验证业务流程
四、步骤 1：API 登录生成 Session（可运行代码）
Saucedemo 是前端伪登录，但我们通过操作登录接口后写入 cookies/state。
代码：login_api.py
from playwright.sync_api import sync_playwright
import json
LOGIN_URL = "https://www.saucedemo.com/"
def generate_storage_state():
with sync_playwright() as p:
browser = p.chromium.launch()
context = browser.new_context()
page = context.new_page()
page.goto(LOGIN_URL)
page.fill("#user-name", "standard_user")
page.fill("#password", "secret_sauce")
page.click("#login-button")
# 登录后写入 session
context.storage_state(path="auth_state.json")
browser.close()
if __name__ == "__main__":
generate_storage_state()
print("auth_state.json generated!")
运行：
python login_api.py
五、步骤 2：Playwright 使用 storage_state 加速 UI
这是 UI 测试中最常用的 “免登录” 技巧。
context = browser.new_context(storage_state="auth_state.json")
测试直接进入登录后的页面：
page.goto("https://www.saucedemo.com/inventory.html")
无需输入账号密码。
六、步骤 3：API 创建购物车数据（模拟业务操作）
虽然 saucedemo 没开放真实 API，但你可以模拟真实项目 API 方式写：
api = playwright.request.new_context()
res = api.post(
"https://myapi/cart/add",
data={"sku_id": 123, "quantity": 2}
)
为了兼容 saucedemo，我们在 UI 层模拟 API 行为：
cart_api.py 示意（真实项目直接调用后端 API）：
from playwright.sync_api import Page
def api_add_item(page: Page, item_id: str):
"""模拟后台 API 添加购物车数据（示意）"""
page.goto("https://www.saucedemo.com/inventory.html")
page.click(f'[data-test="add-to-cart-{item_id}"]')
在真实企业项目，你会用真正 API 来代替 UI 操作。
七、UI + API 一体化测试示例（完整可运行）
conftest.py
import pytest
from playwright.sync_api import sync_playwright
from login_api import generate_storage_state
@pytest.fixture(scope="session")
def storage_state():
generate_storage_state()
return "auth_state.json"
@pytest.fixture(scope="function")
def page(storage_state):
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
context = browser.new_context(storage_state=storage_state)
page = context.new_page()
yield page
context.close()
browser.close()
八、测试：API 准数据 + UI 验业务展示
test_cart_flow.py
from cart_api import api_add_item
def test_cart_ui_after_api_setup(page):
# Step 1: 用 API 添加购物车数据（模拟）
api_add_item(page, "sauce-labs-backpack")
# Step 2: 直接打开购物车验证
page.goto("https://www.saucedemo.com/cart.html")
items = page.locator(".cart_item").count()
assert items == 1
name = page.locator(".inventory_item_name").text_content()
assert "Backpack" in name
特点：
-
• 没有登录（ API完成） -
• 没有重复添加动作 -
• 测试直接聚焦 UI展示逻辑 -
• 更快、更稳定
九、企业级最佳实践（非常重要）
⭐ 1. UI 负责验证展示UI 不要做数据准备。
⭐ 2. API 负责：
-
• 创建数据 -
• 修改数据 -
• 清理数据 -
• 登录态获取 -
• 异常场景构造
⭐ 3. UI 用例 90% 都可以缩短时间
传统用例：
登录 → 添加到购物车 → 到购物车页 → 验证
UI + API 新版：
API 添加数据 → UI 验证展示
时间从 15s → 3s。
十、常见问题 FAQ
❓ API + UI 会不会造成数据不同步？
不会。
正确方式是：
-
• API创建数据 -
• UI刷新后读取后端给的数据 -
• 双方一致性得到验证（这是好事！）
❓ UI 无法模拟复杂流程怎么办？
API + UI 混跑通常比 UI 全流程更强大：
-
• API创建复杂数据（100条订单、活动、库存……） -
• UI验证页面显示是否正确
❓ 这种方式适用于前后端分离项目吗？
-
• ✔ 完全适用 -
• ✔ 效率更高 -
• ✔ 团队使用最多的模式
总结
本篇你已经掌握：
-
• ✔ 如何用 Playwright 调 API -
• ✔ 如何用 API 快速登录（storage_state） -
• ✔ API 创建测试数据 → UI 验证展示 -
• ✔ 完整可运行代码（Saucedemo） -
• ✔ 企业级自动化体系最佳实践
这套模式在大团队中已成为 默认标准，可以让 UI 自动化：
更快（3–10 倍）
-
• 更稳定 -
• 更易维护 -
• 更可扩展
如果觉得本教程和本公众号对你有帮助，还请 点个赞，关个注，下次更新不迷路！