本文将手把手教你从零开始搭建一个端到端（E2E）UI 监控系统。即使你没有相关经验，也能跟着步骤一步步完成！

📋 前置要求

在开始之前，请确保你的电脑已安装以下工具：

• Python 3.8+ - 编程语言环境
• Docker - 容器化运行环境
• Git - 代码版本管理
• Chrome 浏览器 - 用于 UI 自动化测试

💡 验证安装：在终端运行 python --version、docker --version、git --version 确认是否安装成功。

Step 1: 创建项目目录结构

首先创建项目的文件夹结构：

# 创建项目根目录
mkdir e2e-ui-monitor
cd e2e-ui-monitor

# 创建源代码目录
mkdir src
mkdir deploy
mkdir screenshot  # 用于保存失败截图

1.1 创建主程序文件

创建 src/ui-monitor.py 文件：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.chrome.options import Options
import time
import os
import sys
import logging

# 设置日志
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s: %(message)s')

def setup_driver():
    """配置 Chrome WebDriver """
    chrome_options = Options()
    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-size=1280,720")
    
    try:
        driver = webdriver.Chrome(options=chrome_options)
        driver.implicitly_wait(30)
        return driver
    except Exception as e:
        logging.error(f"启动浏览器失败: {e}")
        return None

def login_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("登录测试成功！")
        return True
        
    except Exception as e:
        logging.error(f"登录测试失败: {e}")
        # 保存失败截图
        driver.save_screenshot('./screenshot/login_fail.png')
        return False

def main():
    # 从环境变量获取配置
    test_url = os.getenv('TEST_URL', 'https://example.com/login')
    test_username = os.getenv('TEST_USERNAME', 'testuser')
    test_password = os.getenv('TEST_PASSWORD', 'testpass')
    
    driver = setup_driver()
    if not driver:
        sys.exit(1)
    
    success = login_test(driver, test_url, test_username, test_password)
    driver.quit()
    
    if success:
        print("✅ UI 监控测试通过！")
        sys.exit(0)
    else:
        print("❌ UI 监控测试失败！")
        sys.exit(1)

if __name__ == '__main__':
    main()

1.2 创建依赖文件

创建 src/requirements.txt：

selenium==4.15.0
timeout-decorator==0.5.0
PyYAML==6.0.1

Step 2: 配置 Docker 容器

2.1 创建 Dockerfile

在项目根目录创建 Dockerfile：

FROM 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_VERSION=`curl -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 PYTHONUNBUFFERED=1

# 默认执行命令
CMD ["python", "ui-monitor.py"]

2.2 构建和测试 Docker 镜像

# 构建镜像
docker build -t e2e-ui-monitor .

# 本地测试（替换为你的测试网站）
docker run -e TEST_URL="https://httpbin.org/forms/post" \
           -e TEST_USERNAME="test" \
           -e TEST_PASSWORD="test123" \
           e2e-ui-monitor

💡 验证成功：如果看到 “✅ UI 监控测试通过！” 说明 Docker 容器工作正常。

Step 3: 配置 GitHub Actions 自动化

3.1 创建 GitHub Actions 工作流

在项目根目录创建 .github/workflows/monitor.yml：

name: E2E UI Monitor

on:
  schedule:
    # 每30分钟执行一次
    - cron: '*/30 * * * *'
  workflow_dispatch:  # 允许手动触发

jobs:
  monitor:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v2
      
    - name: Build and run monitor
      run: |
        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-monitor

3.2 配置 GitHub Secrets

在 GitHub 仓库设置中添加以下 Secrets：

• TEST_URL - 要监控的网站 URL
• TEST_USERNAME - 测试用户名
• TEST_PASSWORD - 测试密码

🔒 安全提示：永远不要在代码中硬编码敏感信息，使用 GitHub Secrets 存储。

Step 4: 集成 Prometheus 监控

假设你的环境中已经部署了 Prometheus 和 Pushgateway，我们只需要配置指标上报即可。

4.1 修改主程序添加指标上报

更新 src/ui-monitor.py，在 main() 函数末尾添加：

import subprocess

def push_metrics_to_prometheus(success, region="default"):
    """将监控结果推送到 Prometheus"""
    try:
        status = "success" if success else "failure"
        metric_name = f"ui_monitor_status{{region=\"{region}\",status=\"{status}\"}}"
        metric_value = "1"
        
        # 推送指标到 Prometheus Pushgateway
        # 注意：请根据你的实际 Pushgateway 地址修改 URL
        push_command = f'echo "{metric_name} {metric_value}" | curl --data-binary @- http://prometheus-pushgateway:9091/metrics/job/ui-monitor'
        subprocess.run(push_command, shell=True, check=True)
        logging.info("指标推送成功")
    except Exception as e:
        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.py：

import smtplib
from email.mime.text import MIMEText
from email.mime.multipart import MIMEMultipart
import os

def send_alert_email(subject, body):
    """发送告警邮件"""
    smtp_server = os.getenv('SMTP_SERVER', 'your-smtp-server.com')
    smtp_port = int(os.getenv('SMTP_PORT', '587'))
    sender_email = os.getenv('SENDER_EMAIL')
    sender_password = os.getenv('SENDER_PASSWORD')
    recipient_email = os.getenv('RECIPIENT_EMAIL')
    
    if not all([sender_email, sender_password, recipient_email]):
        print("邮箱配置不完整，跳过邮件发送")
        return
    
    msg = MIMEMultipart()
    msg['From'] = sender_email
    msg['To'] = recipient_email
    msg['Subject'] = subject
    
    msg.attach(MIMEText(body, 'plain'))
    
    try:
        server = smtplib.SMTP(smtp_server, smtp_port)
        server.starttls()
        server.login(sender_email, sender_password)
        text = msg.as_string()
        server.sendmail(sender_email, recipient_email, text)
        server.quit()
        print("告警邮件发送成功")
    except Exception as e:
        print(f"邮件发送失败: {e}")

5.2 在主程序中集成告警

在 src/ui-monitor.py 的 main() 函数中添加：

from email_sender import send_alert_email

# 在测试失败时发送告警
if not success:
    send_alert_email(
        subject="🚨 UI 监控告警",
        body=f"UI 监控测试失败！\n时间: {time.strftime('%Y-%m-%d %H:%M:%S')}\nURL: {test_url}"
    )

Step 6: 验证完整流程

现在让我们验证整个系统是否正常工作：

6.1 本地测试

# 1. 构建镜像
docker build -t e2e-ui-monitor .

# 2. 运行测试
docker run -e TEST_URL="https://httpbin.org/forms/post" \
           -e TEST_USERNAME="test" \
           -e TEST_PASSWORD="test123" \
           -e REGION="test" \
           e2e-ui-monitor

6.2 GitHub Actions 测试

1. 提交代码到 GitHub
2. 在 Actions 页面手动触发工作流
3. 查看执行日志确认是否成功

6.3 Prometheus 验证

1. 打开你的 Prometheus Web UI
2. 查询 ui_monitor_status 指标
3. 确认能看到监控数据

🚀 常见问题解决

问题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
✅ 自动发送告警通知
✅ 可视化监控数据