张翔Novalon Website E2E 测试框架
基于 Playwright 和 Python 的端到端测试解决方案，为 Novalon Website 提供全面的自动化测试覆盖。
目录
特性
- 模块化设计: 采用 Page Object Model (POM) 设计模式
- 跨浏览器测试: 支持 Chrome、Firefox、WebKit
- 响应式测试: 覆盖多端（移动端、平板、桌面）
- 性能测试: 页面加载性能指标监控
- 多格式报告: HTML、JSON、Markdown 报告生成
- 完整测试数据: 自动生成测试数据（中文/英文）
- 详细日志: 彩色日志输出，便于问题定位
技术栈
| 技术 | 用途 |
|---|---|
| Python 3.9+ | 编程语言 |
| Playwright | 浏览器自动化框架 |
| pytest | 测试框架 |
| pytest-html | HTML 报告 |
| pytest-cov | 代码覆盖率 |
| Jinja2 | 报告模板 |
项目结构
e2e-tests/
├── config/
│ ├── __init__.py
│ ├── settings.py # 应用配置
│ └── browsers.py # 浏览器配置
├── pages/
│ ├── __init__.py
│ ├── base_page.py # 页面基类
│ ├── home_page.py # 首页对象
│ └── contact_page.py # 联系页面对象
├── tests/
│ ├── __init__.py
│ ├── conftest.py # pytest 配置和 fixture
│ ├── test_home_page.py # 首页测试
│ ├── test_contact_form.py # 联系表单测试
│ ├── test_navigation.py # 导航测试
│ ├── test_performance.py # 性能测试
│ └── test_responsive.py # 响应式测试
├── utils/
│ ├── __init__.py
│ ├── helpers.py # 辅助工具函数
│ ├── logger.py # 日志配置
│ ├── data_generator.py # 测试数据生成
│ └── report_generator.py # 报告生成器
├── scripts/
│ ├── run_tests.py # 测试运行脚本
│ └── ci_test.py # CI/CD 测试脚本
├── reports/ # 测试报告目录
├── screenshots/ # 失败截图目录
├── videos/ # 测试视频目录
├── requirements.txt # Python 依赖
├── pyproject.toml # pytest 配置
├── pytest.ini # pytest 配置
├── .env.example # 环境变量模板
└── README.md # 本文档
快速开始
1. 环境准备
# 创建虚拟环境
python -m venv venv
source venv/bin/activate # Linux/Mac
# 或
.\venv\Scripts\activate # Windows
# 安装依赖
pip install -r requirements.txt
# 安装 Playwright 浏览器
playwright install
2. 环境配置
# 复制环境变量模板
cp .env.example .env
# 编辑 .env 文件
# BASE_URL=http://localhost:3000
# 默认开发环境: http://localhost:3000
3. 运行测试
# 运行所有测试
python scripts/run_tests.py
# 运行冒烟测试
python scripts/run_tests.py -m smoke
# 运行特定测试
python scripts/run_tests.py tests/test_home_page.py
# 使用关键字过滤
python scripts/run_tests.py -k home
# 多浏览器测试
python scripts/run_tests.py -b all
测试运行
命令行参数
| 参数 | 说明 | 默认值 |
|---|---|---|
-b, --browser |
浏览器 (chromium/firefox/webkit/all) | chromium |
-h, --headless |
无头模式 | False |
-m, --marker |
运行指定标记的测试 | - |
-k, --keyword |
关键字过滤 | - |
-v, --verbose |
详细输出 | False |
--html |
生成 HTML 报告 | False |
--video |
录制测试视频 | False |
--screenshot |
失败时截图 | False |
--parallel |
并行执行 | False |
--workers |
并行工作数 | 4 |
--env |
测试环境 | development |
示例命令
# 冒烟测试
python scripts/run_tests.py -m smoke -v
# 性能测试
python scripts/run_tests.py -m performance
# 响应式测试
python scripts/run_tests.py -m responsive
# 完整回归测试
python scripts/run_tests.py -m regression -v --html
# 无头模式运行
python scripts/run_tests.py -h --parallel
# 跨浏览器测试
python scripts/run_tests.py -b all --html
CI/CD 集成
GitHub Actions 示例
name: E2E Tests
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
e2e-tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set up Python
uses: actions/setup-python@v4
with:
python-version: '3.10'
- name: Install dependencies
run: |
python -m venv venv
source venv/bin/activate
pip install -r e2e-tests/requirements.txt
playwright install --with-deps chromium
- name: Run E2E Tests
run: |
source venv/bin/activate
cp e2e-tests/.env.example e2e-tests/.env
python e2e-tests/scripts/run_tests.py -m smoke --html
env:
BASE_URL: ${{ secrets.BASE_URL }}
- name: Upload Test Report
if: always()
uses: actions/upload-artifact@v3
with:
name: test-report
path: e2e-tests/reports/
CI 测试脚本
# 运行冒烟测试
python scripts/ci_test.py --test-type smoke
# 运行回归测试
python scripts/ci_test.py --test-type regression
# 运行性能测试
python scripts/ci_test.py --test-type performance
# 跨浏览器测试
python scripts/ci_test.py --test-type cross_browser
# 完整测试套件
python scripts/ci_test.py --test-type full
测试标记
| 标记 | 说明 | 用例数量 |
|---|---|---|
@pytest.mark.smoke |
冒烟测试，快速验证核心功能 | 关键路径 |
@pytest.mark.regression |
回归测试，完整功能验证 | 功能测试 |
@pytest.mark.performance |
性能测试，页面加载和响应时间 | 性能指标 |
@pytest.mark.responsive |
响应式测试，不同屏幕尺寸 | 布局适配 |
@pytest.mark.cross_browser |
跨浏览器测试 | 兼容性 |
@pytest.mark.form |
表单相关测试 | 表单验证 |
@pytest.mark.navigation |
导航测试 | 页面跳转 |
@pytest.mark.interactive |
用户交互测试 | 交互功能 |
运行特定标记的测试
# 只运行冒烟测试
pytest -m smoke
# 运行冒烟和性能测试
pytest -m "smoke or performance"
# 运行冒烟但排除性能测试
pytest -m "smoke and not performance"
配置说明
环境变量 (.env)
# 网站基础URL
BASE_URL=http://localhost:3000
# 测试环境
ENVIRONMENT=development
# 默认浏览器
DEFAULT_BROWSER=chromium
# 无头模式
HEADLESS_MODE=false
# 页面加载超时
PAGE_LOAD_TIMEOUT=30000
# 元素等待超时
ELEMENT_TIMEOUT=10000
# 报告标题
REPORT_TITLE=Novalon Website E2E 测试报告
# 报告描述
REPORT_DESCRIPTION=自动化端到端测试结果
测试配置 (pytest.ini)
[pytest]
testpaths = tests
python_files = test_*.py
python_classes = Test*
python_functions = test_*
addopts =
-v
--tb=short
--strict-markers
--disable-warnings
filterwarnings =
ignore::DeprecationWarning
浏览器配置 (config/browsers.py)
# 支持的浏览器配置
BROWSER_CONFIG = {
"chromium": {
"headless": False,
"viewport": {"width": 1920, "height": 1080},
"args": ["--start-maximized"]
},
"firefox": {
"headless": False,
"viewport": {"width": 1920, "height": 1080}
},
"webkit": {
"headless": False,
"viewport": {"width": 1920, "height": 1080}
}
}
最佳实践
1. 页面对象模式
每个页面都应该有对应的 Page Object 类：
from pages.base_page import BasePage
class HomePage(BasePage):
def __init__(self, page):
super().__init__(page)
self.path = "/"
self.selectors = {
"hero_title": "#home h1",
"cta_button": ".cta-button"
}
def verify_hero_title(self):
self.assert_element_visible("hero_title")
return self
2. 测试数据管理
使用数据生成器创建测试数据：
from utils.data_generator import get_test_data_generator
def test_contact_form(test_data_generator):
data = test_data_generator.generate_contact_form_data()
page.fill_contact_form(data)
3. 断言辅助
使用断言助手进行验证：
def test_example(page):
assert_(page).title_contains("首页")
assert_(page).element_visible("#main")
4. 截图和日志
测试失败时自动截图，并记录详细日志：
def test_with_logging(page):
logger = get_logger()
logger.log_action("执行测试步骤")
# 测试代码
5. 性能监控
使用内置的性能监控：
def test_performance(page):
performance = page.verify_page_performance()
assert performance["pageLoadTime"] < 5000
报告示例
测试完成后，报告将保存在 reports/ 目录：
reports/
├── html/
│ └── test_report.html # HTML 格式报告
├── json/
│ └── test_results.json # JSON 格式结果
└── screenshots/
└── test_failed.png # 失败截图
故障排除
常见问题
1. 浏览器安装失败
playwright install --with-deps
2. 依赖安装失败
pip install --upgrade pip
pip install -r requirements.txt
3. 测试超时
检查 .env 中的 PAGE_LOAD_TIMEOUT 设置
4. 页面元素定位失败
使用开发者工具检查元素选择器是否正确
获取帮助
- 查看详细日志: 运行
python scripts/run_tests.py -v - 查看 Playwright 文档: https://playwright.dev/python/
- 查看 pytest 文档: https://docs.pytest.org/
许可证
本测试框架基于 MIT 许可证开源。