十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

基于Playwright的Web自动化测试Skill工程实战

基于Playwright的Web自动化测试Skill工程实战 这次我们来看一个可以直接照抄的 Web 自动化测试 Skill 完整工程。很多人用 AI 编程助手写自动化测试最后发现两个问题第一模型只会写单个脚本不会按团队规范来第二写完的用例没有统一入口跑批量回归还是得人肉维护。Skill 要解决的就是这两件事把“怎么写、怎么跑、怎么出报告”固化成一份 AI 能读懂的技能说明书AI 负责分析和生成Playwright 负责真实执行最终形成一个输入网址就能自动执行测试的闭环。这个工程的核心特点很明确基于 Playwright 的 AI 测试自动化SKILL.md 规范定义技能支持 pytest、命令行、FastAPI 接口三种执行方式支持批量跑用例不需要独立显卡普通开发机就能运行。接下来我会把这个工程从零搭起来包括 Skill 定义文件、测试执行脚本、批量任务脚本、接口服务代码再给出一套功能验证和问题排查的方法。文章偏实操测试工程师、开发工程师、想用 AI 做自动化测试的人都可以照做一遍。1. 核心能力速览先把最关键的规格列出来。这个项目是“测试类 Skill 工程模板”不是某个需要下载模型权重的大型项目硬件门槛很低。能力项说明项目类型Web 自动化测试 Skill 工程模板基础框架Playwright Python AI 编程助手 Skill 机制主要功能页面分析、用例生成、自动执行、失败截图、报告输出、API 服务推荐环境Windows / macOS / LinuxPython 3.10Node.js 可选GPU / 显存不需要独立显卡模型算力来自你接入的 AI 助手服务或本地模型服务浏览器模式默认 headless 无头模式可切换有头模式调试启动方式命令行、pytest、FastAPI 服务是否支持 API支持提供 /api/run 示例接口是否支持批量任务支持可循环执行多条用例并汇总结果适合场景冒烟测试、回归测试、页面巡检、测试用例生成这里要同步一个判断标题里说“效率提高 100 倍”实际使用中更准确的理解是——它把“从需求到用例脚本”的时间大幅压缩把“重复执行和结果汇总”变成自动化但不能替代测试设计。想要效果稳定需要把 Skill 定义写得足够细并在第一次使用时用小规模用例验证。2. 适用场景与使用边界这个 Skill 最适合四类场景Web 页面冒烟测试给一个 URL自动检查页面是否能打开、关键元素是否存在。回归测试把核心流程固化成用例清单每次版本更新后批量执行。页面巡检定期对线上页面做基础检查发现元素缺失、文案错误、跳转异常。AI 辅助测试用例生成让 AI 根据页面结构先产出用例 JSON再交给 Playwright 批量执行。不适合的场景也很明显性能压测、需要人工验证码介入的流程、涉及大量真实用户数据的生产环境这些场景不适合直接套用。尤其是生产环境的自动化操作必须确认授权和合规边界不要对未授权站点做扫描或批量访问不要采集真实用户数据不要绕过登录或验证机制。涉及版权和隐私时需要额外注意如果你让 AI 基于某个页面生成测试用例只能用你有权测试的站点或系统如果页面里出现可识别的人脸、个人信息不要把这些内容写进报告或公开用例中。测试产物中的截图、日志、数据都要按内部安全规范处理。3. 环境准备与 Skill 工程结构3.1 基础依赖在开始前确认本机环境。这个工程的核心依赖是 Python 和 Playwright。# 创建虚拟环境Windows python -m venv venv venv\Scripts\activate # 创建虚拟环境macOS / Linux python3 -m venv venv source venv/bin/activate然后安装依赖pip install playwright pytest fastapi uvicorn playwright install chromiumplaywright install chromium这一步必须执行否则脚本运行时会报“找不到浏览器”。如果你后续要测试 WebKit 或 Firefox 内核可以再执行playwright install webkit或playwright install firefox但从资源占用和稳定性来看默认用 Chromium 最稳妥。3.2 目录结构建议按下面的结构组织工程web-test-skill/ ├── SKILL.md # AI 技能定义文件 ├── config.yaml # 测试配置 ├── cases.json # 批量测试用例清单 ├── scripts/ │ ├── run_tests.py # 单条用例执行器 │ └── batch_runner.py # 批量任务执行器 ├── app.py # FastAPI 接口服务 ├── tests/ │ ├── conftest.py │ └── test_demo.py └── reports/ ├── screenshot.png └── results.json这种分层的好处是模型文件、输入素材、测试脚本、输出报告互不干扰。批量任务跑完以后直接到 reports 目录看结果即可。3.3 AI 助手如何加载 Skill不同 AI 编程助手对 Skill 的加载方式不完全一样。通用的做法是把web-test-skill目录放到客户端的 skills 目录下或者在对话中直接告诉模型“读取 web-test-skill/SKILL.md 并按照技能定义执行”。如果你的助手不支持目录级 Skill也可以把 SKILL.md 的内容粘贴到对话上下文里模型一样能按规范执行。4. 完整代码SKILL.md 与测试执行器4.1 SKILL.md 技能定义文件SKILL.md 是这个工程的核心。它用 Markdown 写包含 frontmatter 元信息和正文工作流。AI 助手读取后会按照里面的规则生成和执行测试代码。--- name: web-test-skill description: Web 自动化测试技能基于 Playwright 完成页面分析、用例生成、执行与报告输出。 version: 1.0.0 tags: [web-test, playwright, ai-testing] --- # Web 自动化测试 Skill ## 目标 当用户给出目标 URL 或测试需求时按以下流程自动完成测试 1. 分析目标页面结构。 2. 生成测试用例清单。 3. 调用 Playwright 脚本执行测试。 4. 输出标准测试报告。 5. 失败用例自动截图并尝试修复。 ## 工作流 ### 第一步页面分析 访问用户提供的 URL提取以下信息 - 页面标题 - 表单元素input、button、textarea - 主要跳转链接 - 是否存在登录态要求 ### 第二步用例生成 根据页面结构生成 JSON 用例清单格式如下 json [ { name: login_page_smoke, url: http://127.0.0.1:8080/login, action: assert, selector: form, text: 登录 } ]第三步执行测试调用 scripts/run_tests.py 执行用例优先使用 headless 模式。第四步输出报告执行结果写入 reports/results.json失败用例如有截图一并保存。约束所有测试必须在用户授权范围内进行。不采集真实用户数据。不绕过登录、验证码等安全机制。元素定位优先使用稳定的>import pytest from playwright.sync_api import sync_playwright pytest.fixture(scopesession) def browser(): with sync_playwright() as p: yield p.chromium.launch(headlessTrue) pytest.fixture() def page(browser): context browser.new_context(viewport{width: 1280, height: 720}) page context.new_page() yield page context.close()然后在测试文件里直接写用例def test_login_page(page): page.goto(http://127.0.0.1:8080/login, wait_untilnetworkidle) assert 登录 in page.inner_text(form)pytest 的好处是可以直接看通过率、失败堆栈还能和 CI 平台对接。5. AI 测试功能验证流程从“能不能跑”的角度第一次使用建议按下面的验证流程走一遍。5.1 测试目标准备先准备一个可访问的测试页面。如果你本地没有现成项目可以启动一个简单的 HTML 页面做验证cd tests python -m http.server 8080然后创建tests/index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleSkill 测试页/title /head body h1登录/h1 form input typetext idusername placeholder用户名 button typebutton提交/button /form /body /html这个本地页面可以用来验证最基本的打开、断言、截图能力。5.2 验证冒烟测试执行一条最简单的打开页面用例python scripts/run_tests.py \ --url http://127.0.0.1:8080/ \ --action goto \ --output reports/smoke预期结果终端输出访问页面成功Skill 测试页然后输出RESULT: PASS。此时reports/smoke/screenshot.png会生成一张截图。如果截图存在说明 Playwright 启动、页面渲染、截图链路都正常。5.3 验证断言功能执行一条断言用例python scripts/run_tests.py \ --url http://127.0.0.1:8080/ \ --action assert \ --selector h1 \ --text 登录 \ --output reports/assert预期结果输出断言成功h1 包含 登录。如果断言失败会抛出 AssertionError并且脚本不会走到截图步骤。5.4 验证 AI 生成用例把 SKILL.md 和目录结构准备好后让 AI 助手基于你的测试页面生成cases.json。一个标准示例[ { name: page_open_smoke, url: http://127.0.0.1:8080/, action: goto, selector: , text: }, { name: title_assert, url: http://127.0.0.1:8080/, action: assert, selector: h1, text: 登录 } ]这里的判断标准是AI 生成的用例能否直接被批量脚本执行而不是需要人工改半天。如果生成的 selector 太脆弱说明 Skill 定义里的“约束”部分不够强需要补充“优先使用语义化选择器”这类规则。5.5 判断标准与失败排查验证点成功标准常见失败页面打开输出页面标题浏览器未安装执行 playwright install chromium元素断言输出断言成功页面结构变化或等待时间太短截图生成reports 目录存在 png 文件输出目录无写权限AI 生成用例用例 JSON 可直接执行Prompt 中的 URL 不明确或约束不足6. 接口 API 与批量任务扩展6.1 批量任务执行器回归测试最常用的就是批量执行。scripts/batch_runner.py负责读取cases.json逐条调用执行器汇总结果。import json import subprocess import sys from pathlib import Path def load_cases(path): with open(path, r, encodingutf-8) as f: return json.load(f) def main(): cases load_cases(cases.json) results [] for case in cases: print(f执行用例{case[name]}) cmd [ sys.executable, scripts/run_tests.py, --url, case[url], --action, case.get(action, ), --selector, case.get(selector, ), --text, case.get(text, ), --output, freports/{case[name]} ] try: subprocess.run(cmd, checkTrue, timeout120) results.append({name: case[name], status: passed}) except Exception as e: results.append({name: case[name], status: failed, error: str(e)}) Path(reports).mkdir(parentsTrue, exist_okTrue) with open(reports/results.json, w, encodingutf-8) as f: json.dump(results, f, ensure_asciiFalse, indent2) print(批量执行完成结果已写入 reports/results.json) if __name__ __main__: main()运行方式python scripts/batch_runner.py如果某条用例失败脚本不会中断整个队列而是记录错误后继续执行。这是批量任务里很重要的设计不能让一条失败挡住后面所有用例。6.2 FastAPI 接口服务把测试能力封装成接口方便接到 CI 平台、内部测试平台或消息机器人。app.py使用 FastAPIfrom fastapi import FastAPI from pydantic import BaseModel from pathlib import Path import subprocess import sys app FastAPI() class TestRequest(BaseModel): url: str action: str selector: str text: str app.post(/api/run) def run_case(req: TestRequest): cmd [ sys.executable, scripts/run_tests.py, --url, req.url, --action, req.action, --selector, req.selector, --text, req.text, --output, reports/api ] try: subprocess.run(cmd, checkTrue, timeout120) return {status: passed, url: req.url} except subprocess.TimeoutExpired: return {status: failed, error: 执行超时} except subprocess.CalledProcessError as e: return {status: failed, error: str(e)}启动接口服务uvicorn app:app --host 127.0.0.1 --port 8000调用示例curl -X POST http://127.0.0.1:8000/api/run \ -H Content-Type: application/json \ -d {url: http://127.0.0.1:8080/, action: goto, selector: , text: }Python 调用示例import requests url http://127.0.0.1:8000/api/run payload { url: http://127.0.0.1:8080/, action: assert, selector: h1, text: 登录 } response requests.post(url, jsonpayload, timeout120) print(response.json())接口服务要注意两点一是访问范围测试接口建议只绑定 127.0.0.1或加一层简单的 token 校验二是超时控制单条用例设置 120 秒兜底避免页面卡死时请求无限挂起。6.3 批量任务设计建议批量任务不是“循环调用”就完事了实际工程中建议加三样东西日志每条用例开始和执行结束都写一行日志方便定位卡点。重试机制页面偶发加载慢失败一次就重试一次能显著提升通过率。结果汇总把每条用例的用时、成功失败、截图路径写进统一的 JSON 或 HTML 报告。7. 资源占用与性能观察这个项目不需要 GPU 和显存重点关注 CPU、内存、测试耗时。观察项方法说明CPU 占用任务管理器 / topheadless 模式下高负载来自浏览器渲染和 JS 执行内存占用任务管理器 / htop每个 Chromium 实例约占几百 MB具体取决于页面复杂度测试耗时pytest --durations5 或手动计时查看最慢的用例用于优化等待策略浏览器并发观察同时开启的 Chromium 进程批量任务不要一次性开几十个并发容易拖垮机器端口占用netstat -ano8000 端口被占时换 8001批量执行时如果用例数量多不要每次执行都重新启动浏览器。更优的做法是复用浏览器实例只切换页面上下文。当前run_tests.py是最小实现实际项目可以改成“启动一个浏览器循环跑多条用例”这样能明显降低启动开销。判断性能是否正常的标准很简单单条页面打开用例控制在 5 秒以内断言用例在页面加载完成后 1 秒内返回批量任务不会因为内存不足导致浏览器崩溃。如果出现浏览器进程残留执行pkill -f chrome或taskkill /F /IM chrome.exe清理。8. 常见问题与排查方法问题现象可能原因排查方式解决方案启动后报找不到浏览器未执行 playwright install chromium检查命令行安装日志执行 playwright install chromium元素定位失败页面结构变化或选择器脆弱查看截图和页面 HTML使用>
返回列表