wangpeng/yidaima_tools

Fork 0

Files

王鹏 ef8237d8d1 add 项目运行截图

2026-04-10 14:37:23 +08:00

14 KiB

Raw Blame History

项目截图自动化功能实施计划

需求分析

根据用户提供的八爪鱼 RPA 流程图，需要实现以下功能：

项目结构

服务后端: Java SpringBoot 项目
前台前端: Vue3 前端项目（部分项目可能没有）
后台前端: Vue3 管理后台项目

脚本文件

run_install_server.bat - 后端 Maven 构建
run_install_front.bat - 前台前端依赖安装
run_install_admin.bat - 后台前端依赖安装
run_server.bat - 启动服务后端
run_front.bat - 启动前台前端
run_admin.bat - 启动后台前端
run_sql.bat - 导入 SQL 脚本（SQL 脚本在后端项目文件夹下的 db 文件夹中）

执行流程（根据八爪鱼流程图）

主流程
├── 初始化变量
├── 打开网页
├── 导入 SQL
├── 更换图片
├── 后台网页截图
├── 启动后端服务
├── 启动前端服务
├── 前端依赖 install
├── 前台网页截图
├── 收尾工作
└── 准备工作

实施步骤

阶段 1: 创建核心模块

1.1 创建 `project_screenshot.py` 模块

实现 ProjectScreenshotAutomation 类
功能包括：
- 项目路径配置管理
- 执行 bat 脚本（构建、安装依赖、启动服务）
- SQL 导入功能
- 使用 Playwright 进行浏览器控制和截图
- 菜单识别和遍历截图

1.2 关键功能实现

脚本执行功能:

def execute_bat(bat_path: str, cwd: str = None, timeout: int = 300) -> tuple[bool, str]:
    """执行 bat 脚本并返回结果"""
    
def wait_for_service(url: str, timeout: int = 120) -> bool:
    """等待服务启动完成"""

SQL 导入功能:

def import_sql(sql_file: str, db_config: dict) -> bool:
    """导入 SQL 脚本到数据库"""

更换前台轮播图片功能:

def get_random_images(bg_pic_folder: str, count: int = 3) -> list:
    """从指定文件夹随机获取指定数量的图片文件"""
    
def copy_images_to_target(source_images: list, target_folder: str) -> bool:
    """将源图片复制到目标文件夹并重命名为 swiperPicture1.jpg 等"""
    
def replace_swiper_images(project_path: str, desktop_path: str) -> str:
    """
    更换前台轮播图片
    1. 从桌面 bg_pic 文件夹随机选择 3 张图片
    2. 复制到项目 server/src/main/resources/static/file 目录
    3. 重命名为 swiperPicture1.jpg、swiperPicture2.jpg、swiperPicture3.jpg
    """

更换后台登录背景图功能:

def update_login_vue_background(project_path: str) -> bool:
    """
    修改 login.vue 文件中的背景图片链接
    1. 从预设图片列表中随机选择一张
    2. 替换 front/manage_code/src/views/login.vue 中的 background: url()
    """
    
# 预设后台登录背景图片列表
LOGIN_BACKGROUND_IMAGES = [
    "http://img.yidaima.cn/7-dcd4fc1e8d0144aaa064bc282d1af289",
    "http://img.yidaima.cn/6-3db67e2e6ff64e018d48282638900a67",
    "http://img.yidaima.cn/5-74ee6fe2f0954a8db2574e8f7fbb8ef2",
    "http://img.yidaima.cn/4-a926593ba8c444a3984100e99ae322bb",
    "http://img.yidaima.cn/3-f91e9a0ed55d45c9aff80a08f554c625",
    "http://img.yidaima.cn/2-2bd41cdd57b54b529dc3a139e66233e0",
    "http://img.yidaima.cn/1-5a0b7ee2344a46bd987c1cafff19b3ba",
    "http://img.yidaima.cn/8-495b9767a2f34197b963a13226d3e1d2",
    "http://img.yidaima.cn/10-991483f941914f3d85bf87a4f8748fee",
    "http://img.yidaima.cn/11-d274f1d695f7472a8fcd2c8c6238a79e",
    "http://img.yidaima.cn/14-0e30653336d849379060ad8c436fe512",
    "http://img.yidaima.cn/16-7a58235a2a4040f99e3431c3cac9ea7a",
    "http://img.yidaima.cn/17-3406a546b81c412d9e3501cdb0f88b12",
    "http://img.yidaima.cn/18-0a2fae1d6634480dabf5471fa86b3623",
    "http://img.yidaima.cn/19-107196938e074c92a40b62c60aed18a4"
]

截图功能:

def capture_screenshots(base_url: str, menu_selectors: list, output_dir: str) -> list:
    """根据菜单进行截图"""

阶段 2: 配置管理扩展

2.1 更新 `config_loader.py`

添加项目截图自动化相关配置：

project_screenshot:
  # 项目路径配置
  project_path: ""
  has_front: true  # 是否有前台前端
  
  # 脚本路径配置（相对项目路径或绝对路径）
  scripts:
    install_server: "run_install_server.bat"    # 后端 Maven 构建
    install_front: "run_install_front.bat"      # 前台前端依赖安装
    install_admin: "run_install_admin.bat"      # 后台前端依赖安装
    run_server: "run_server.bat"                # 启动服务后端
    run_front: "run_front.bat"                  # 启动前台前端
    run_admin: "run_admin.bat"                  # 启动后台前端
    run_sql: "run_sql.bat"                      # 导入 SQL 脚本
  
  # SQL 配置
  sql:
    script_path: "server/db/init.sql"  # SQL 脚本路径（相对项目路径）
    
  # 服务配置
  services:
    backend:
      url: "http://localhost:8080"
      health_endpoint: "/actuator/health"
      startup_timeout: 120
    front:
      url: "http://localhost:8082"           # 前台前端地址
      login_url: "http://localhost:8082/#/login"  # 前台登录页面
      startup_timeout: 60
    admin:
      url: "http://localhost:8081"           # 后台前端地址
      login_url: "http://localhost:8081/#/login"  # 后台登录页面
      startup_timeout: 60
  
  # 登录配置
  login:
    admin:                                   # 后台登录配置
      username: "admin"
      password: "admin"
      username_selector: "input[placeholder='请输入用户名'], input[name='username'], #username"
      password_selector: "input[placeholder='请输入密码'], input[name='password'], #password, input[type='password']"
      submit_selector: "button[type='submit'], .login-btn, .el-button--primary"
    front:                                   # 前台登录配置
      username: "2"
      password: "123456"
      username_selector: "input[placeholder='请输入用户名'], input[name='username'], #username"
      password_selector: "input[placeholder='请输入密码'], input[name='password'], #password, input[type='password']"
      submit_selector: "button[type='submit'], .login-btn, .el-button--primary"
  
  # 截图配置
  screenshot:
    output_dir: "./screenshots"
    full_page: true
    menu_selectors:  # 菜单识别选择器
      admin: ".el-menu-item, .el-sub-menu__title"
      front: ".nav-item, .menu-item"
    delay: 2000  # 截图前等待时间(ms)
  
  # 轮播图片配置
  swiper_images:
    source_folder: "{desktop_path}/bg_pic"  # 图片来源文件夹（桌面 bg_pic）
    target_subpath: "server/src/main/resources/static/file"  # 目标路径（相对于项目路径）
    target_names:
      - "swiperPicture1.jpg"
      - "swiperPicture2.jpg"
      - "swiperPicture3.jpg"
    count: 3  # 随机选择的图片数量
  
  # 后台登录背景图配置
  login_background:
    vue_file_subpath: "front/manage_code/src/views/login.vue"  # login.vue 相对项目路径
    images:  # 预设背景图片列表
      - "http://img.yidaima.cn/7-dcd4fc1e8d0144aaa064bc282d1af289"
      - "http://img.yidaima.cn/6-3db67e2e6ff64e018d48282638900a67"
      - "http://img.yidaima.cn/5-74ee6fe2f0954a8db2574e8f7fbb8ef2"
      - "http://img.yidaima.cn/4-a926593ba8c444a3984100e99ae322bb"
      - "http://img.yidaima.cn/3-f91e9a0ed55d45c9aff80a08f554c625"
      - "http://img.yidaima.cn/2-2bd41cdd57b54b529dc3a139e66233e0"
      - "http://img.yidaima.cn/1-5a0b7ee2344a46bd987c1cafff19b3ba"
      - "http://img.yidaima.cn/8-495b9767a2f34197b963a13226d3e1d2"
      - "http://img.yidaima.cn/10-991483f941914f3d85bf87a4f8748fee"
      - "http://img.yidaima.cn/11-d274f1d695f7472a8fcd2c8c6238a79e"
      - "http://img.yidaima.cn/14-0e30653336d849379060ad8c436fe512"
      - "http://img.yidaima.cn/16-7a58235a2a4040f99e3431c3cac9ea7a"
      - "http://img.yidaima.cn/17-3406a546b81c412d9e3501cdb0f88b12"
      - "http://img.yidaima.cn/18-0a2fae1d6634480dabf5471fa86b3623"
      - "http://img.yidaima.cn/19-107196938e074c92a40b62c60aed18a4"

阶段 3: GUI 界面开发

3.1 在 `gui.py` 中添加新的 Tab

创建 "项目截图" Tab，包含以下区域：

配置区域:

项目路径选择（文件夹浏览器）
是否有前台前端复选框
各脚本路径配置（可编辑，有默认值）
SQL 脚本路径配置

服务配置区域:

后端服务 URL 和端口
前台前端 URL 和端口
后台前端 URL 和端口

操作按钮区域:

构建/安装按钮:
- "Maven 构建后端" - 执行 run_install_server.bat
- "安装前台依赖" - 执行 run_install_front.bat
- "安装后台依赖" - 执行 run_install_admin.bat
- "导入 SQL" - 执行 run_sql.bat
启动按钮:
- "启动后端服务" - 执行 run_server.bat
- "启动前台前端" - 执行 run_front.bat
- "启动后台前端" - 执行 run_admin.bat
截图按钮:
- "后台截图" - 遍历后台菜单截图
- "前台截图" - 遍历前台菜单截图（如果有）
- "一键完整流程" - 按顺序执行所有步骤

日志输出区域:

显示执行日志
进度条显示当前步骤

阶段 4: 流程实现

4.1 完整流程执行顺序

根据八爪鱼流程图，实现以下执行顺序：

1. 初始化变量
   - 加载项目配置
   - 检查必要文件是否存在

2. 准备工作
   - 检查项目路径
   - 验证脚本文件存在
   - 创建截图输出目录

3. 导入 SQL
   - 执行 run_sql.bat
   - 或使用 Python 直接执行 SQL 文件

4. 更换图片
   - **更换前台轮播图片**：
     - 从桌面 bg_pic 文件夹随机选择 3 张图片
     - 复制到项目 server/src/main/resources/static/file 目录
     - 重命名为 swiperPicture1.jpg、swiperPicture2.jpg、swiperPicture3.jpg
   - **更换后台登录背景图**：
     - 修改 front/manage_code/src/views/login.vue 文件
     - 从预设图片列表中随机选择一张背景图
     - 替换 CSS 中的 background: url() 属性

5. 前端依赖 install
   - 执行 run_install_front.bat（如果有前台）
   - 执行 run_install_admin.bat

6. 启动后端服务
   - 执行 run_server.bat
   - 等待服务健康检查通过

7. 启动前端服务
   - 执行 run_front.bat（如果有前台）
   - 执行 run_admin.bat
   - 等待服务启动

8. 打开后台网页并登录
   - 使用 Playwright 打开后台登录页面 http://localhost:8081/#/login
   - 输入用户名 admin，密码 admin
   - 点击登录按钮
   - 等待登录成功跳转

9. 后台网页截图
   - 登录成功后访问 http://localhost:8081
   - 识别菜单项
   - 遍历每个菜单进行截图

10. 前台网页截图（如果有前台）
    - 打开前台登录页面 http://localhost:8082/#/login
    - 输入用户名 2，密码 123456
    - 点击登录按钮
    - 登录成功后访问 http://localhost:8082
    - 识别菜单项
    - 遍历每个菜单进行截图

11. 收尾工作
    - 关闭浏览器
    - 停止服务（可选）
    - 生成截图报告

阶段 5: 截图功能实现

5.1 菜单识别和截图

class ScreenshotCapture:
    def __init__(self, browser, output_dir: str):
        self.browser = browser
        self.output_dir = output_dir
        
    async def login(self, login_url: str, username: str, password: str, 
                    username_selector: str, password_selector: str, submit_selector: str):
        """
        执行登录操作
        1. 打开登录页面
        2. 输入用户名和密码
        3. 点击登录按钮
        4. 等待登录成功
        """
        
    async def capture_menu_screenshots(self, base_url: str, menu_selector: str):
        """
        1. 访问基础页面（已登录状态）
        2. 识别所有菜单项
        3. 点击每个菜单并截图
        4. 保存到输出目录
        """
        
    async def capture_full_page(self, url: str, filename: str):
        """截取整页截图"""

阶段 6: 测试和验证

6.1 功能测试

单个 bat 脚本执行测试
SQL 导入功能测试
服务启动和等待测试
菜单识别和截图测试
完整流程测试

6.2 边界情况处理

项目没有前台前端的情况
服务启动超时处理
菜单识别失败处理
截图保存失败处理

文件结构

yidaima/
├── gui.py                          # 主 GUI（添加项目截图 Tab）
├── config_loader.py                # 配置加载器（扩展）
├── project_screenshot.py           # 项目截图自动化核心模块（新增）
├── core/
│   └── browser.py                  # 浏览器控制（扩展 Playwright）
└── utils/
    └── screenshot.py               # 截图工具（扩展）

依赖项

需要添加的依赖：

playwright>=1.40.0

安装命令：

pip install playwright
playwright install chromium

实施顺序

创建 project_screenshot.py - 核心自动化模块
扩展 config_loader.py - 添加项目截图配置
扩展 gui.py - 添加项目截图 Tab
测试验证 - 完整流程测试
打包发布 - PyInstaller 打包 exe

注意事项

服务进程管理: 启动的服务进程需要在适当的时候关闭
端口占用检查: 启动服务前检查端口是否被占用
超时处理: 每个步骤都需要有合理的超时时间
错误恢复: 某一步失败时能够优雅地停止并报告
并发安全: 避免同时执行多个自动化流程

14 KiB Raw Blame History Unescape Escape