从零搭建前后端自动化测试体系：pytest + Flask + Playwright + GitHub Actions

qq_45052535

526人浏览 · 2026-04-28 14:59:55

qq_45052535 · 2026-04-28 14:59:55 发布

1. 为什么写这篇文章？

我是一名测试工程师，日常工作主要是功能测试。为了提升竞争力，我决定系统学习自动化测试，并亲手搭建一个完整的测试项目。这篇文章记录了我从零到一的过程，希望能给同样想提升测试能力的同行一些参考。

2. 项目目标

搭建一个包含以下内容的测试项目：

Mock后端服务：模拟用户注册API（邮箱、密码校验、重复注册检查）
前端页面：一个简易的注册表单
API自动化测试：使用 pytest + requests 验证后端接口
前端自动化测试：使用 Playwright 模拟真实用户操作
持续集成（CI）：GitHub Actions 自动运行API测试

3. 技术栈

模块	工具
后端	Flask（Python）
前端	HTML + JavaScript
API测试	pytest + requests
前端测试	pytest + Playwright
版本控制	Git + GitHub
CI	GitHub Actions

4. 项目结构

api-test-practice/
├── frontend/
│ ├── register.html # 注册页面
│ ├── test_frontend.py # 单场景前端测试
│ └── test_frontend_param.py # 参数化前端测试
├── mock_server.py # Flask Mock 后端
├── test_register.py # API 接口测试（含参数化）
├── .github/workflows/ # CI 配置
└── README.md

5. 核心难点与解决方案

5.1 跨域问题（CORS）

问题：前端页面用 file:// 协议打开，向 http://localhost:3000 发送请求时被浏览器拦截。

解决：在 Flask 后端添加 CORS(app) 或手动添加响应头。

5.2 测试隔离

问题：重复注册测试需要依赖“第一次注册成功”的状态。

解决：每个测试用例前调用 /reset 接口清空数据；对于重复注册场景，单独写成独立函数而非参数化。

5.3 pytest 输入捕获

问题：在测试中调用 input() 会报错。

解决：运行 pytest -s 禁用输出捕获。

6. 核心代码示例

6.1 参数化API测试

python

@pytest.mark.parametrize("email, password, expected_status, expected_error", [
    ("test@example.com", "123456", 201, None),
    ("invalid-email", "123456", 400, "Invalid email format"),
])
def test_register(email, password, expected_status, expected_error):
    response = requests.post(f"{BASE_URL}/users", json={"email": email, "password": password})
    assert response.status_code == expected_status

6.2 Playwright 前端测试

python

def test_register_success():
    requests.post(f"{BASE_URL}/reset")
    with sync_playwright() as p:
        browser = p.chromium.launch(channel="msedge", headless=False)
        page = browser.new_page()
        page.goto("file:///path/to/register.html")
        page.fill("#email", "test@playwright.com")
        page.fill("#password", "123456")
        page.click("#registerBtn")
        page.wait_for_selector("#message")
        assert "成功" in page.inner_text("#message")
        browser.close()

7. CI 配置（GitHub Actions）

yaml

name: Run pytest on push
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Python
        uses: actions/setup-python@v5
        with:
          python-version: '3.13'
      - name: Install dependencies
        run: pip install flask pytest requests
      - name: Run mock server
        run: python mock_server.py &
      - name: Run tests
        run: pytest test_register.py -v