学习周记 #06 | 2026 年 AI Web UI 自动化平台实战：FastAPI + LangChain 多 Agent 实现 Web 可视化测试平台（一键生成执行）

ugyguy

192人浏览 · 2026-07-03 17:25:09

ugyguy · 2026-07-03 17:25:09 发布

大家好前几期我们逐步实现了从单 Agent 到多 Agent 协作。本期把这些能力封装成 Web 平台，让团队成员（即使不懂代码）也能通过浏览器轻松使用 AI 生成并执行测试。

核心功能：输入测试需求 → 点击按钮 → 自动生成 POM 代码 → 执行 → 展示报告 + 日志。

一、技术架构

后端：FastAPI（异步、高性能）
AI 核心：LangGraph 多 Agent 工作流（复用 #05）
前端：简单 HTML + JavaScript（可后续换 Vue/React）
执行引擎：Playwright
报告：Allure 或 Playwright 自带 HTML 报告

二、环境准备

Bash

pip install fastapi uvicorn langgraph langchain-ollama playwright python-multipart jinja2
playwright install chromium

三、核心代码实现（更完整版）

1. 项目结构（推荐）

text

ai-test-platform/
├── main.py
├── agents/
│   ├── workflow.py          # 多 Agent 工作流
│   ├── base_page.py
│   └── prompts.py
├── templates/
│   └── index.html
├── screenshots/
├── reports/
└── requirements.txt

2. FastAPI 主文件（main.py）

Python

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel
import asyncio
from agents.workflow import run_test_workflow   # 导入 #05 的工作流

app = FastAPI(title="AI 测试平台")
templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="static"), name="static")

class TestRequest(BaseModel):
    requirement: str

@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

@app.post("/generate-and-run")
async def generate_and_run(req: TestRequest):
    try:
        print(f"收到需求: {req.requirement}")
        result = await asyncio.to_thread(run_test_workflow, req.requirement)
        
        return {
            "status": "success",
            "code": result.get("final_code", "生成失败"),
            "execution_result": result.get("execution_result", ""),
            "review_feedback": result.get("review_feedback", ""),
            "message": "测试执行完成！"
        }
    except Exception as e:
        return {"status": "error", "message": str(e)}

3. 前端页面（templates/index.html）（简化版）

HTML

<!DOCTYPE html>
<html>
<head>
    <title>AI 测试平台</title>
    <style> /* 简单样式，可自行美化 */ </style>
</head>
<body>
    <h1>AI Web UI 自动化测试平台</h1>
    <textarea id="requirement" rows="5" cols="80" placeholder="输入测试需求，例如：测试电商登录并下单流程..."></textarea><br>
    <button onclick="runTest()">一键生成并执行</button>
    
    <div id="result"></div>

    <script>
        async function runTest() {
            const req = document.getElementById("requirement").value;
            const res = await fetch("/generate-and-run", {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify({requirement: req})
            });
            const data = await res.json();
            document.getElementById("result").innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
        }
    </script>
</body>
</html>

4. 启动命令

Bash

uvicorn main:app --reload --port 8000

访问 http://127.0.0.1:8000 即可使用。

四、常见报错及解决方案（本期重点）

FastAPI 404 或 CORS 错误 解决：添加 from fastapi.middleware.cors import CORSMiddleware 并配置允许前端域名。
Ollama 连接失败 (Connection refused) 解决：确保 Ollama 服务正在运行（ollama serve），或检查端口 11434。
Playwright 执行超时 解决：在 execute_playwright_test 中增加 timeout=180 参数，并使用 page.wait_for_load_state("networkidle")。
LangGraph 状态传递为空 解决：检查每个 node 是否正确 return state，建议加 print 调试。
生成的代码缺少 import 解决：在 Coder Prompt 中明确要求“必须包含所有必要的 import”。
异步与同步冲突（Playwright sync 在 async FastAPI 中）解决：使用 asyncio.to_thread() 包裹同步执行代码。
模板文件夹找不到 解决：确认 templates 目录与 main.py 在同一层级。
大模型输出包含 Markdown 解释文字 解决：在 Coder Prompt 最后加一句：“只输出纯 Python 代码，不要任何解释、markdown 标记或代码块符号。”