59 lines
2.3 KiB
HTML
59 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI 网页测试智能体</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">🌐 AI 网页测试智能体 <span class="ver">v1.0.0</span></div>
|
|
<div class="health" id="health">检测服务中...</div>
|
|
</header>
|
|
|
|
<main class="wrap">
|
|
<section class="card create-card">
|
|
<h2>发起测试任务</h2>
|
|
<div class="form-grid">
|
|
<div class="field span2">
|
|
<label>目标网址</label>
|
|
<input id="url" type="text" placeholder="https://example.com" value="https://example.com">
|
|
</div>
|
|
<div class="field span2">
|
|
<label>测试目标（自然语言描述要测什么）</label>
|
|
<textarea id="goal" rows="3" placeholder="例如：打开页面后，验证标题为 Example Domain，并点击 Learn more 链接能跳转"></textarea>
|
|
</div>
|
|
<div class="field">
|
|
<label>最大步数</label>
|
|
<input id="max_steps" type="number" value="30" min="1" max="100">
|
|
</div>
|
|
<div class="field">
|
|
<label>超时（秒）</label>
|
|
<input id="timeout" type="number" value="600" min="30" max="3600">
|
|
</div>
|
|
</div>
|
|
<button id="submit" class="btn primary">🚀 开始测试</button>
|
|
<div class="hint">测试由 AI 自动驱动浏览器执行：打开页面 → 逐步操作 → 断言验证 → 生成报告（含截图）</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>任务列表 <button id="refresh" class="btn small">刷新</button></h2>
|
|
<table id="task-table">
|
|
<thead><tr><th>任务ID</th><th>目标网址</th><th>测试目标</th><th>状态</th><th>结果</th><th>步骤</th><th>创建时间</th><th>操作</th></tr></thead>
|
|
<tbody><tr><td colspan="8" class="empty">加载中...</td></tr></tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="report-modal" class="modal hidden">
|
|
<div class="modal-body">
|
|
<div class="modal-head"><span id="modal-title">测试报告</span><button id="modal-close" class="btn small">关闭</button></div>
|
|
<iframe id="report-frame" src="about:blank"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|