本文将手把手教你从零开始搭建一个端到端E2EUI 监控系统。即使你没有相关经验也能跟着步骤一步步完成 前置要求在开始之前请确保你的电脑已安装以下工具Python 3.8- 编程语言环境Docker- 容器化运行环境Git- 代码版本管理Chrome 浏览器- 用于 UI 自动化测试验证安装在终端运行python --version、docker --version、git --version确认是否安装成功。Step 1: 创建项目目录结构首先创建项目的文件夹结构# 创建项目根目录mkdire2e-ui-monitorcde2e-ui-monitor# 创建源代码目录mkdirsrcmkdirdeploymkdirscreenshot# 用于保存失败截图1.1 创建主程序文件创建src/ui-monitor.py文件fromseleniumimportwebdriverfromselenium.webdriver.common.byimportByfromselenium.webdriver.supportimportexpected_conditionsfromselenium.webdriver.support.waitimportWebDriverWaitfromselenium.webdriver.chrome.optionsimportOptionsimporttimeimportosimportsysimportlogging# 设置日志logging.basicConfig(levellogging.INFO,format%(asctime)s - %(levelname)s: %(message)s)defsetup_driver():配置 Chrome WebDriver chrome_optionsOptions()chrome_options.add_argument(--no-sandbox)chrome_options.add_argument(--disable-dev-shm-usage)chrome_options.add_argument(--headless)# 无头模式不显示浏览器窗口chrome_options.add_argument(--disable-gpu)chrome_options.add_argument(--window-size1280,720)try:driverwebdriver.Chrome(optionschrome_options)driver.implicitly_wait(30)returndriverexceptExceptionase:logging.error(f启动浏览器失败:{e})returnNonedeflogin_test(driver,url,username,password):测试登录功能try:logging.info(开始测试登录...)driver.get(url)# 等待输入框出现并输入用户名WebDriverWait(driver,10).until(expected_conditions.presence_of_element_located((By.TAG_NAME,input)))driver.find_elements(By.TAG_NAME,input)[0].send_keys(username)driver.find_elements(By.TAG_NAME,button)[0].click()# 输入密码WebDriverWait(driver,10).until(expected_conditions.presence_of_element_located((By.ID,password)))driver.find_element(By.ID,password).send_keys(password)driver.find_elements(By.TAG_NAME,button)[0].click()logging.info(登录测试成功)returnTrueexceptExceptionase:logging.error(f登录测试失败:{e})# 保存失败截图driver.save_screenshot(./screenshot/login_fail.png)returnFalsedefmain():# 从环境变量获取配置test_urlos.getenv(TEST_URL,https://example.com/login)test_usernameos.getenv(TEST_USERNAME,testuser)test_passwordos.getenv(TEST_PASSWORD,testpass)driversetup_driver()ifnotdriver:sys.exit(1)successlogin_test(driver,test_url,test_username,test_password)driver.quit()ifsuccess:print(✅ UI 监控测试通过)sys.exit(0)else:print(❌ UI 监控测试失败)sys.exit(1)if__name____main__:main()1.2 创建依赖文件创建src/requirements.txtselenium4.15.0 timeout-decorator0.5.0 PyYAML6.0.1Step 2: 配置 Docker 容器2.1 创建 Dockerfile在项目根目录创建DockerfileFROM python:3.9-slim # 安装必要的系统依赖 RUN apt-get update apt-get install -y \ wget \ gnupg \ curl \ rm -rf /var/lib/apt/lists/* # 安装 Chrome 浏览器简化版本 RUN wget -q https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \ apt-get install -y ./google-chrome-stable_current_amd64.deb \ rm google-chrome-stable_current_amd64.deb # 安装 ChromeDriver RUN CHROMEDRIVER_VERSIONcurl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE \ wget -N http://chromedriver.storage.googleapis.com/$CHROMEDRIVER_VERSION/chromedriver_linux64.zip \ unzip chromedriver_linux64.zip \ chmod x chromedriver \ mv chromedriver /usr/local/bin/ # 设置工作目录 WORKDIR /app # 复制依赖文件并安装 Python 包 COPY src/requirements.txt . RUN pip install --no-cache-dir -r requirements.txt # 复制源代码 COPY src/ . # 创建截图目录 RUN mkdir -p screenshot # 设置环境变量 ENV PYTHONUNBUFFERED1 # 默认执行命令 CMD [python, ui-monitor.py]2.2 构建和测试 Docker 镜像# 构建镜像dockerbuild-te2e-ui-monitor.# 本地测试替换为你的测试网站dockerrun-eTEST_URLhttps://httpbin.org/forms/post\-eTEST_USERNAMEtest\-eTEST_PASSWORDtest123\e2e-ui-monitor验证成功如果看到 “✅ UI 监控测试通过” 说明 Docker 容器工作正常。Step 3: 配置 GitHub Actions 自动化3.1 创建 GitHub Actions 工作流在项目根目录创建.github/workflows/monitor.ymlname:E2E UI Monitoron:schedule:# 每30分钟执行一次-cron:*/30 * * * *workflow_dispatch:# 允许手动触发jobs:monitor:runs-on:ubuntu-lateststeps:-name:Checkout codeuses:actions/checkoutv3-name:Set up Docker Buildxuses:docker/setup-buildx-actionv2-name:Build and run monitorrun:|docker build -t e2e-ui-monitor . docker run -e TEST_URL${{ secrets.TEST_URL }} \ -e TEST_USERNAME${{ secrets.TEST_USERNAME }} \ -e TEST_PASSWORD${{ secrets.TEST_PASSWORD }} \ e2e-ui-monitor3.2 配置 GitHub Secrets在 GitHub 仓库设置中添加以下 SecretsTEST_URL- 要监控的网站 URLTEST_USERNAME- 测试用户名TEST_PASSWORD- 测试密码安全提示永远不要在代码中硬编码敏感信息使用 GitHub Secrets 存储。Step 4: 集成 Prometheus 监控假设你的环境中已经部署了 Prometheus 和 Pushgateway我们只需要配置指标上报即可。4.1 修改主程序添加指标上报更新src/ui-monitor.py在main()函数末尾添加importsubprocessdefpush_metrics_to_prometheus(success,regiondefault):将监控结果推送到 Prometheustry:statussuccessifsuccesselsefailuremetric_namefui_monitor_status{{region\{region}\,status\{status}\}}metric_value1# 推送指标到 Prometheus Pushgateway# 注意请根据你的实际 Pushgateway 地址修改 URLpush_commandfecho {metric_name}{metric_value} | curl --data-binary - http://prometheus-pushgateway:9091/metrics/job/ui-monitorsubprocess.run(push_command,shellTrue,checkTrue)logging.info(指标推送成功)exceptExceptionase:logging.error(f指标推送失败:{e})然后在main()函数中调用# 在测试完成后添加push_metrics_to_prometheus(success,os.getenv(REGION,default))配置说明请将http://prometheus-pushgateway:9091替换为你环境中实际的 Pushgateway 地址。Step 5: 添加自动告警功能5.1 创建邮件通知脚本创建src/email_sender.pyimportsmtplibfromemail.mime.textimportMIMETextfromemail.mime.multipartimportMIMEMultipartimportosdefsend_alert_email(subject,body):发送告警邮件smtp_serveros.getenv(SMTP_SERVER,your-smtp-server.com)smtp_portint(os.getenv(SMTP_PORT,587))sender_emailos.getenv(SENDER_EMAIL)sender_passwordos.getenv(SENDER_PASSWORD)recipient_emailos.getenv(RECIPIENT_EMAIL)ifnotall([sender_email,sender_password,recipient_email]):print(邮箱配置不完整跳过邮件发送)returnmsgMIMEMultipart()msg[From]sender_email msg[To]recipient_email msg[Subject]subject msg.attach(MIMEText(body,plain))try:serversmtplib.SMTP(smtp_server,smtp_port)server.starttls()server.login(sender_email,sender_password)textmsg.as_string()server.sendmail(sender_email,recipient_email,text)server.quit()print(告警邮件发送成功)exceptExceptionase:print(f邮件发送失败:{e})5.2 在主程序中集成告警在src/ui-monitor.py的main()函数中添加fromemail_senderimportsend_alert_email# 在测试失败时发送告警ifnotsuccess:send_alert_email(subject UI 监控告警,bodyfUI 监控测试失败\n时间:{time.strftime(%Y-%m-%d %H:%M:%S)}\nURL:{test_url})Step 6: 验证完整流程现在让我们验证整个系统是否正常工作6.1 本地测试# 1. 构建镜像dockerbuild-te2e-ui-monitor.# 2. 运行测试dockerrun-eTEST_URLhttps://httpbin.org/forms/post\-eTEST_USERNAMEtest\-eTEST_PASSWORDtest123\-eREGIONtest\e2e-ui-monitor6.2 GitHub Actions 测试提交代码到 GitHub在 Actions 页面手动触发工作流查看执行日志确认是否成功6.3 Prometheus 验证打开你的 Prometheus Web UI查询ui_monitor_status指标确认能看到监控数据 常见问题解决问题1: Chrome 启动失败解决方案: 确保 Dockerfile 中正确安装了 Chrome 和 ChromeDriver问题2: 元素找不到解决方案: 增加等待时间或使用更稳定的定位方式如 ID、CSS 选择器问题3: GitHub Actions 超时解决方案: 在 workflow 中添加timeout-minutes: 10问题4: 邮件发送失败解决方案: 检查 SMTP 配置根据你的邮件服务商调整设置问题5: Prometheus 指标推送失败解决方案: 确认 Pushgateway 地址配置正确网络连通性正常 扩展建议添加更多测试场景注册、搜索、导航等功能支持多浏览器Firefox、Edge 等集成多种通知方式邮件、Slack、企业微信等添加重试机制网络波动时自动重试生成详细报告包含截图、日志、性能数据总结通过以上 6 个步骤你已经成功搭建了一个完整的 E2E UI 监控系统这个系统可以✅ 自动化测试网站 UI 功能✅ 定时执行监控任务✅ 实时上报监控指标到现有 Prometheus✅ 自动发送告警通知✅ 可视化监控数据