Snipaste命令行结合Python脚本：实现自动化测试截图与结果比对

# screenshot_capture.py
import subprocess
import os
import time
from pathlib import Path

class SnipasteCapturer:
    def __init__(self, snipaste_path='snipaste'):
        """
        初始化捕捉器。
        :param snipaste_path: Snipaste可执行文件路径或命令。如果在PATH中，可直接用‘snipaste’。
        """
        self.snipaste_cmd = snipaste_path

    def capture(self, mode='fullscreen', output_path=None, delay=0, include_cursor=False):
        """
        执行截图命令。
        :param mode: 截图模式。可选 'fullscreen', 'window', 'region'。
                     对于‘window’和‘region’，Snipaste会进入交互模式，自动化中慎用。
        :param output_path: 截图保存的完整文件路径。
        :param delay: 延时截图秒数。
        :param include_cursor: 是否包含鼠标光标。
        :return: 布尔值，表示截图是否成功保存。
        """
        if not output_path:
            timestamp = time.strftime("%Y%m%d_%H%M%S")
            output_path = f"capture_{timestamp}.png"

        # 构建命令参数列表
        cmd = [self.snipaste_cmd]
        if mode == 'fullscreen':
            cmd.append('--fullscreen')
        elif mode == 'window':
            cmd.append('--window') # 注意：这会等待用户选择窗口
        elif mode == 'region':
            cmd.append('--region') # 注意：这会等待用户选择区域
        else:
            raise ValueError(f"不支持的截图模式: {mode}")

        cmd.append('--output')
        cmd.append(output_path)

        if delay > 0:
            cmd.append('--delay')
            cmd.append(str(delay))

        if include_cursor:
            cmd.append('--cursor')

        try:
            # 执行命令，等待完成。对于交互模式，这里可能会挂起。
            result = subprocess.run(cmd, capture_output=True, text=True, timeout=10)
            if result.returncode == 0:
                print(f"[成功] 截图已保存至: {output_path}")
                return True, output_path
            else:
                print(f"[失败] 截图命令执行错误: {result.stderr}")
                return False, None
        except subprocess.TimeoutExpired:
            print("[失败] 截图命令超时，可能进入了交互模式。")
            return False, None
        except FileNotFoundError:
            print(f"[失败] 未找到Snipaste可执行文件: {self.snipaste_cmd}")
            return False, None

# 示例用法
if __name__ == "__main__":
    capturer = SnipasteCapturer()
    # 捕获全屏，延时2秒（等待可能弹出的提示消失），不包含光标
    success, path = capturer.capture(mode='fullscreen', output_path='test_homepage.png', delay=2)

# 集成Selenium进行Web页面截图示例
from selenium import webdriver
from selenium.webdriver.common.by import By
from screenshot_capture import SnipasteCapturer
import time

def test_and_capture_webpage(url, test_name):
    # 1. 使用Selenium打开浏览器并导航
    driver = webdriver.Chrome() # 确保ChromeDriver在PATH中
    driver.maximize_window() # 最大化窗口以确保布局一致
    driver.get(url)
    time.sleep(3) # 等待页面完全加载，可根据需要替换为显式等待

    # 2. 执行一些操作（例如点击按钮，打开模态框）
    # element = driver.find_element(By.ID, "some-button")
    # element.click()
    # time.sleep(1)

    # 3. 此时页面处于待截图状态。调用Snipaste进行全屏截图
    # 注意：确保浏览器窗口是当前活动窗口
    capturer = SnipasteCapturer()
    output_path = f"./current_images/{test_name}.png"
    success, _ = capturer.capture(mode='fullscreen', output_path=output_path, delay=1)

    # 4. 关闭浏览器
    driver.quit()
    return success

# 执行测试
if __name__ == "__main__":
    test_and_capture_webpage("https://snipaste-tool.com", "homepage_banner")

# image_comparison.py
from PIL import Image, ImageChops
import math
import operator
from functools import reduce

def compare_images_pixel_exact(img1_path, img2_path, diff_output_path=None):
    """
    精确像素比对。完全相同返回True，否则返回False并可选保存差异图。
    差异图会高亮显示不同的像素。
    """
    image1 = Image.open(img1_path).convert('RGB')
    image2 = Image.open(img2_path).convert('RGB')

    # 检查尺寸是否一致
    if image1.size != image2.size or image1.mode != image2.mode:
        print("图像尺寸或模式不同，无法进行精确像素比对。")
        return False

    # 计算差异
    diff = ImageChops.difference(image1, image2)
    # 如果差异图像的所有像素均为0（黑色），则两张图完全相同
    if diff.getbbox() is None:
        print("图像完全相同。")
        return True
    else:
        print("发现像素差异。")
        if diff_output_path:
            # 增强差异可视度：将差异区域转换为高亮显示（如红色）
            diff_data = diff.getdata()
            highlighted_diff = []
            for pixel in diff_data:
                # 如果像素有差异（非纯黑），则标记为红色(255,0,0)，否则为黑色
                if pixel != (0, 0, 0):
                    highlighted_diff.append((255, 0, 0))
                else:
                    highlighted_diff.append((0, 0, 0))
            diff_image = Image.new('RGB', image1.size)
            diff_image.putdata(highlighted_diff)
            diff_image.save(diff_output_path)
            print(f"差异图已保存至: {diff_output_path}")
        return False

# image_comparison.py (续)
import cv2
import numpy as np
from skimage.metrics import structural_similarity as ssim # 需安装 scikit-image

def compare_images_ssim(img1_path, img2_path, diff_output_path=None, threshold=0.98):
    """
    使用SSIM进行图像比对。
    :param threshold: SSIM相似度阈值，高于此值则认为通过。通常0.98-0.995。
    :return: (is_similar, ssim_score, diff_image)
    """
    # 读取图像为灰度图，SSIM通常在灰度空间计算
    image1 = cv2.imread(img1_path, cv2.IMREAD_GRAYSCALE)
    image2 = cv2.imread(img2_path, cv2.IMREAD_GRAYSCALE)

    # 确保尺寸一致
    if image1.shape != image2.shape:
        # 可以尝试调整尺寸，但通常意味着布局已变，直接判定为失败
        print(f"图像尺寸不匹配: {image1.shape} vs {image2.shape}")
        return False, 0.0, None

    # 计算SSIM
    score, diff = ssim(image1, image2, full=True)
    # diff是归一化的差异图，值域[0,1]
    diff = (diff * 255).astype("uint8")

    is_similar = score >= threshold

    if not is_similar and diff_output_path:
        # 为了可视化，可以将差异区域二值化并标记轮廓
        thresh = cv2.threshold(diff, 0, 255, cv2.THRESH_BINARY_INV | cv2.THRESH_OTSU)[1]
        contours, _ = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

        # 在原彩色图上绘制轮廓
        color_img = cv2.imread(img1_path)
        for c in contours:
            (x, y, w, h) = cv2.boundingRect(c)
            cv2.rectangle(color_img, (x, y), (x + w, y + h), (0, 0, 255), 2) # 红色矩形框
        cv2.imwrite(diff_output_path, color_img)
        print(f"SSIM分数: {score:.4f} (阈值: {threshold})。差异图已保存。")

    return is_similar, score, diff

# tests/test_ui_flows.py
import pytest
from src.screenshot_capture import SnipasteCapturer
from src.image_comparison import compare_images_ssim
import os

BASELINE_DIR = "./baseline_images"
CURRENT_DIR = "./current_images"
DIFF_DIR = "./diff_images"
os.makedirs(CURRENT_DIR, exist_ok=True)
os.makedirs(DIFF_DIR, exist_ok=True)

# 假设我们已经有一个配置好的WebDriver fixture (使用pytest-selenium)
@pytest.mark.usefixtures("driver")
class TestVisualUI:

    def test_homepage_layout(self, driver):
        """测试首页布局"""
        test_name = "homepage_layout"
        driver.get("https://snipaste-tool.com")
        driver.maximize_window()
        # 等待关键元素加载，这里简化处理
        import time
        time.sleep(3)

        capturer = SnipasteCapturer()
        current_img_path = os.path.join(CURRENT_DIR, f"{test_name}.png")
        capturer.capture(mode='fullscreen', output_path=current_img_path, delay=1)

        baseline_img_path = os.path.join(BASELINE_DIR, f"{test_name}.png")
        if not os.path.exists(baseline_img_path):
            pytest.skip(f"基准图不存在: {baseline_img_path}，首次运行请创建。")
            # 或者可以自动将当前图复制为基准图
            # import shutil
            # shutil.copy(current_img_path, baseline_img_path)
            # return

        diff_img_path = os.path.join(DIFF_DIR, f"{test_name}_diff.png")
        is_similar, score, _ = compare_images_ssim(
            baseline_img_path,
            current_img_path,
            diff_output_path=diff_img_path,
            threshold=0.985
        )

        assert is_similar, f"视觉回归测试失败！SSIM分数: {score:.4f}。差异图: {diff_img_path}"

    # 可以添加更多测试用例...
    # def test_login_modal(self, driver):
    #     ...

# report_generator.py
import os
import json
from datetime import datetime
from jinja2 import Template

def generate_html_report(test_results, report_dir="./reports"):
    """
    根据测试结果生成HTML报告。
    :param test_results: 列表，每个元素是字典，包含：
                         name, passed, baseline_img, current_img, diff_img, score, message
    """
    os.makedirs(report_dir, exist_ok=True)

    report_data = {
        "generated_at": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
        "total_tests": len(test_results),
        "passed_tests": sum(1 for r in test_results if r['passed']),
        "failed_tests": sum(1 for r in test_results if not r['passed']),
        "results": test_results
    }

    # 简单的HTML模板 (使用Jinja2更佳)
    html_template = """
    <!DOCTYPE html>
    <html>
    <head>
        <title>视觉回归测试报告 - {{ generated_at }}</title>
        <style>
            body { font-family: sans-serif; margin: 20px; }
            .summary { background: #f5f5f5; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
            .passed { color: green; }
            .failed { color: red; }
            .test-case { border: 1px solid #ddd; margin-bottom: 20px; padding: 15px; border-radius: 5px; }
            .test-case.failed { border-left: 5px solid red; }
            .test-case.passed { border-left: 5px solid green; }
            .image-row { display: flex; gap: 20px; margin-top: 10px; }
            .image-container { text-align: center; }
            .image-container img { max-width: 300px; border: 1px solid #ccc; }
            .diff { font-weight: bold; }
        </style>
    </head>
    <body>
        <h1>Snipaste自动化视觉测试报告</h1>
        <div class="summary">
            <p>生成时间: <strong>{{ generated_at }}</strong></p>
            <p>总计测试: <strong>{{ total_tests }}</strong></p>
            <p class="passed">通过: <strong>{{ passed_tests }}</strong></p>
            <p class="failed">失败: <strong>{{ failed_tests }}</strong></p>
            <p>通过率: <strong>{{ "%.1f"|format((passed_tests/total_tests*100) if total_tests>0 else 0) }}%</strong></p>
        </div>

        {% for test in results %}
        <div class="test-case {{ 'passed' if test.passed else 'failed' }}">
            <h3>{{ test.name }} {% if test.passed %}<span class="passed">✓ 通过</span>{% else %}<span class="failed">✗ 失败</span>{% endif %}</h3>
            {% if not test.passed %}
                <p><span class="diff">差异分数 (SSIM): {{ "%.4f"|format(test.score) if test.score else 'N/A' }}</span></p>
                <p>{{ test.message }}</p>
                <div class="image-row">
                    <div class="image-container">
                        <p>基准图</p>
                        <img src="{{ test.baseline_img }}" alt="基准图">
                    </div>
                    <div class="image-container">
                        <p>当前图</p>
                        <img src="{{ test.current_img }}" alt="当前图">
                    </div>
                    <div class="image-container">
                        <p>差异高亮</p>
                        <img src="{{ test.diff_img }}" alt="差异图">
                    </div>
                </div>
            {% else %}
                <p>无视觉差异。</p>
            {% endif %}
        </div>
        {% endfor %}
    </body>
    </html>
    """

    template = Template(html_template)
    html_content = template.render(**report_data)

    report_path = os.path.join(report_dir, f"visual_report_{datetime.now().strftime('%Y%m%d_%H%M%S')}.html")
    with open(report_path, 'w', encoding='utf-8') as f:
        f.write(html_content)

    print(f"HTML报告已生成: {report_path}")
    return report_path