Snipaste与自动化测试框架（如Selenium）结合：实现自动化视觉验证与Bug报告生成

import subprocess
import time
import pyautogui
from pathlib import Path

class SnipasteHelper:
    def __init__(self, snipaste_exe_path=r"C:\Program Files\Snipaste\Snipaste.exe"):
        self.exe_path = Path(snipaste_exe_path)
        if not self.exe_path.exists():
            raise FileNotFoundError(f"Snipaste not found at {self.exe_path}")

    def capture_by_cli(self, save_path, delay_ms=500):
        """方法一：通过命令行打印到文件（需Snipaste 2.0+且开启相关设置）"""
        # 注意：此功能可能需要Snipaste特定版本或设置，更通用的方法是下面的capture_by_hotkey
        cmd = [str(self.exe_path), 'print', '--delay', str(delay_ms), '--output', str(save_path)]
        try:
            subprocess.run(cmd, timeout=10)
            return save_path
        except subprocess.TimeoutExpired:
            print("Snipaste CLI command timed out.")
            return None

    def capture_by_hotkey(self, save_path=None, region=None):
        """方法二（推荐）：模拟热键截图并保存到剪贴板/文件"""
        # 1. 激活Snipaste截图模式 (默认F1)
        pyautogui.hotkey('f1')
        time.sleep(0.5)  # 等待截图界面激活

        # 2. 如果指定了区域，则模拟鼠标绘制该区域 (region格式: (x, y, width, height))
        if region:
            x, y, w, h = region
            # 移动鼠标到区域左上角，拖动到右下角
            pyautogui.moveTo(x, y)
            pyautogui.mouseDown()
            pyautogui.moveTo(x + w, y + h, duration=0.2)
            pyautogui.mouseUp()
        else:
            # 3. 如果未指定区域，则截取整个屏幕或当前窗口（取决于Snipaste设置）
            # 这里我们按回车确认全屏截图，或按ESC取消。更稳健的做法是结合窗口探测。
            # 为简化，我们假设截取全屏，然后可以通过后续裁剪。
            pass

        # 4. 截图后，Snipaste默认进入编辑模式，图片在剪贴板。我们按Ctrl+S保存。
        time.sleep(0.3)
        if save_path:
            # 模拟按下Ctrl+S打开保存对话框
            pyautogui.hotkey('ctrl', 's')
            time.sleep(0.5)
            # 输入完整保存路径（需要处理路径分隔符和焦点）
            pyautogui.write(str(save_path))
            time.sleep(0.2)
            pyautogui.press('enter')  # 确认保存
            time.sleep(0.5)
            pyautogui.press('esc')    # 退出Snipaste编辑模式
            return save_path
        else:
            # 不保存文件，图片留在剪贴板供后续使用
            pyautogui.press('esc')  # 退出编辑模式，图片在剪贴板
            return None  # 表示图片在剪贴板

    def capture_element(self, selenium_element, save_path, padding=10):
        """结合Selenium元素位置进行精准截图"""
        location = selenium_element.location
        size = selenium_element.size
        # 计算屏幕上的区域（考虑滚动和浏览器窗口位置）
        # 注意：这需要获取浏览器窗口的位置，此处简化处理
        region = (
            location['x'],
            location['y'],
            size['width'],
            size['height']
        )
        # 可以给区域加一点边距
        padded_region = (
            region[0] - padding,
            region[1] - padding,
            region[2] + padding*2,
            region[3] + padding*2
        )
        return self.capture_by_hotkey(save_path, padded_region)

from PIL import Image, ImageChops, ImageDraw
import cv2
import numpy as np
import math

class ImageComparator:
    @staticmethod
    def pixel_by_pixel_diff(img1_path, img2_path, diff_path, threshold=0.1):
        """简单的像素级比对，生成差异图"""
        img1 = Image.open(img1_path).convert('RGB')
        img2 = Image.open(img2_path).convert('RGB')

        # 确保图片尺寸相同
        if img1.size != img2.size:
            # 尝试调整尺寸，或视为重大差异
            img2 = img2.resize(img1.size, Image.Resampling.LANCZOS)

        diff = ImageChops.difference(img1, img2)
        if diff.getbbox() is None:
            return 0.0  # 无差异

        # 计算差异像素比例
        diff_pixels = 0
        total_pixels = img1.size[0] * img1.size[1]
        diff_data = diff.getdata()
        for pixel in diff_data:
            if sum(pixel) > 0:  # 非全黑
                diff_pixels += 1

        diff_ratio = diff_pixels / total_pixels

        # 如果差异超过阈值，保存高亮差异图
        if diff_ratio > threshold or diff_path:
            # 将差异图转换为高亮显示（例如红色）
            highlight = diff.convert('L')
            highlight = highlight.point(lambda x: 255 if x > 0 else 0)
            red_overlay = Image.new('RGB', img1.size, (255, 0, 0))
            # 创建最终差异图：原图+红色高亮差异
            final_diff = Image.composite(red_overlay, img1, highlight)
            final_diff.save(diff_path)
            print(f"差异图已保存至: {diff_path}")

        return diff_ratio

    @staticmethod
    def structural_similarity(img1_path, img2_path, diff_path=None):
        """使用SSIM（结构相似性指数）进行更符合人眼感知的比对"""
        import cv2
        # 读取图像
        img1 = cv2.imread(img1_path)
        img2 = cv2.imread(img2_path)

        # 转换为灰度图
        gray1 = cv2.cvtColor(img1, cv2.COLOR_BGR2GRAY)
        gray2 = cv2.cvtColor(img2, cv2.COLOR_BGR2GRAY)

        # 计算SSIM
        (score, diff_map) = cv2.compareSSIM(gray1, gray2, full=True)
        # SSIM分数范围[-1, 1]，1表示完全相同。我们通常使用 (1 - score) 作为差异度。
        diff_score = 1 - score

        if diff_path and diff_score > 0.01:
            # 将差异图归一化并保存
            diff_map = (diff_map * 255).astype("uint8")
            cv2.imwrite(diff_path, diff_map)

        return diff_score  # 返回差异分数，越小越好

import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By
from pathlib import Path
import sys
sys.path.append(str(Path(__file__).parent.parent))
from utils.screenshot_utils import SnipasteHelper
from utils.image_compare import ImageComparator

class TestHomePageVisual:
    @pytest.fixture(scope="class")
    def driver(self):
        driver = webdriver.Chrome()  # 确保chromedriver在PATH中
        driver.maximize_window()
        yield driver
        driver.quit()

    @pytest.fixture
    def snip(self):
        return SnipasteHelper()

    @pytest.fixture
    def comparator(self):
        return ImageComparator()

    def test_homepage_fullpage_layout(self, driver, snip, comparator):
        """测试首页整体布局视觉回归"""
        # 1. 访问被测页面
        driver.get("https://your-test-website.com")
        time.sleep(2)  # 等待页面完全加载，可替换为显式等待

        # 2. 定义图片路径
        baseline_dir = Path("baseline_images")
        current_dir = Path("current_images")
        diff_dir = Path("diff_images")
        baseline_dir.mkdir(exist_ok=True)
        current_dir.mkdir(exist_ok=True)
        diff_dir.mkdir(exist_ok=True)

        test_name = "homepage_fullpage_layout"
        baseline_img = baseline_dir / f"{test_name}.png"
        current_img = current_dir / f"{test_name}.png"
        diff_img = diff_dir / f"{test_name}_diff.png"

        # 3. 使用Snipaste截取当前页面（全屏或浏览器窗口）
        # 这里我们获取浏览器窗口位置并截图（简化版，实际需计算）
        # 更简单的方法：直接使用Selenium的driver.save_screenshot，但失去Snipaste多窗口等能力
        # 此处演示Snipaste热键法
        snip.capture_by_hotkey(save_path=current_img)
        # 或者，如果想截取整个屏幕（包括多显示器）：
        # pyautogui.screenshot(str(current_img)) # 备选方案

        # 4. 视觉比对
        if baseline_img.exists():
            # 执行比对
            diff_ratio = comparator.pixel_by_pixel_diff(
                str(baseline_img), str(current_img), str(diff_img), threshold=0.001
            )
            # 断言差异在可接受范围内
            assert diff_ratio < 0.001, f"视觉差异过大！差异像素比例: {diff_ratio:.4f}。详情见 {diff_img}"
            print(f"视觉测试通过，差异比例: {diff_ratio:.4f}")
        else:
            # 首次运行，保存当前截图作为基线
            import shutil
            shutil.copy(current_img, baseline_img)
            pytest.skip(f"首次运行，已创建基线图像: {baseline_img}。下次运行将进行比对。")

    def test_login_form_visual(self, driver, snip, comparator):
        """测试登录表单的视觉状态"""
        driver.get("https://your-test-website.com/login")
        time.sleep(1)

        # 定位登录表单元素
        form_element = driver.find_element(By.CSS_SELECTOR, ".login-form")
        test_name = "login_form"
        baseline_img = Path(f"baseline_images/{test_name}.png")
        current_img = Path(f"current_images/{test_name}.png")

        # 使用Snipaste针对元素进行精准截图（需要更复杂的坐标计算，此处示意）
        # snip.capture_element(form_element, current_img)

        # 简化：使用WebDriver的元素截图（更稳定，但非Snipaste核心）
        form_element.screenshot(str(current_img))

        # ... 后续比对逻辑与上一个测试类似 ...
        if baseline_img.exists():
            diff_ratio = comparator.structural_similarity(str(baseline_img), str(current_img))
            assert diff_ratio < 0.01, f"登录表单视觉差异显著！SSIM差异分数: {diff_ratio:.4f}"
        else:
            form_element.screenshot(str(baseline_img))
            pytest.skip("基线已创建。")

    def test_error_state_and_auto_bug_report(self, driver, snip):
        """测试错误状态，并演示自动生成增强型Bug报告"""
        driver.get("https://your-test-website.com/login")
        # 故意执行错误操作：不输入密码直接提交
        driver.find_element(By.ID, "username").send_keys("testuser")
        driver.find_element(By.TAG_NAME, "form").submit()
        time.sleep(1)

        # 检查是否出现错误提示
        error_element = driver.find_element(By.CSS_SELECTOR, ".error-message")
        assert error_element.is_displayed(), "错误提示未显示"

        # 当错误发生时，自动截取“现场证据”
        from datetime import datetime
        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
        bug_screenshot_path = Path(f"bug_evidence/login_error_{timestamp}.png")
        # 截取包含错误信息的区域
        # 可以截取整个屏幕，或计算错误元素周围的区域
        snip.capture_by_hotkey(save_path=bug_screenshot_path)

        # 在实际场景中，这里可以：
        # 1. 调用Jira/ZenDesk API创建Bug工单
        # 2. 将截图作为附件上传
        # 3. 自动填充标题、描述（包含测试步骤、浏览器信息、URL等）
        # 4. 将错误元素的HTML片段或XPath也记录到描述中
        print(f"Bug证据已保存: {bug_screenshot_path}")
        # 示例：生成一个简单的HTML报告片段
        html_report = f"""
        <h3>自动化Bug报告 - 登录错误状态</h3>
        <p><strong>时间:</strong> {timestamp}</p>
        <p><strong>URL:</strong> {driver.current_url}</p>
        <p><strong>浏览器:</strong> {driver.capabilities['browserName']} {driver.capabilities['browserVersion']}</p>
        <p><strong>错误信息:</strong> {error_element.text}</p>
        <p><strong>视觉证据:</strong></p>
        <img src="{bug_screenshot_path}" width="800" alt="错误状态截图"/>
        """
        with open(f"bug_reports/login_error_{timestamp}.html", "w", encoding='utf-8') as f:
            f.write(html_report)
        print("HTML报告已生成。")

import pytest
import sys

if __name__ == "__main__":
    # 运行测试并生成HTML报告
    args = [
        "tests/",
        "-v",
        "--html=reports/visual_test_report.html",
        "--self-contained-html",  # 将CSS和图片嵌入到单个HTML文件中
    ]
    sys.exit(pytest.main(args))