Finetest: 一个 Web 自动化测试框架的技术实现

function getDomPath(target) {
    return {
        xpath: getDomXPath(target),      // xpath 路径
        selector: getDomSelectorPath(target),  // css 选择器
        text: getDomTextPath(target),    // 文本内容
        value: getDomValuePath(target),  // value 属性
        type: getDomTypePath(target),    // 自定义 type 属性
        abspos: { left, top, width, height },  // 屏幕位置
        classes: "class1 class2..."      // 完整 class 列表
    };
}

def element_locator(self, locator, retry=True):
    # 1. 尝试 xpath 精确匹配
    elements_xpath = self.driver.find_elements_by_xpath(xpath)
    if len(elements_xpath) == 1:
        return elements_xpath[0], locator
    
    # 2. 尝试 css 精确匹配
    elements_selector = self.driver.find_elements_by_css_selector(selector)
    if len(elements_selector) == 1:
        return elements_selector[0], locator
    
    # 3. 多结果时，进入加权匹配
    reserve = {}
    for e in eles1 + eles2:
        weight = 0
        # 文本匹配 +30
        if e["path"].get('text') == text:
            weight += 30
        # value 匹配 +30
        if e["path"].get('value') == value:
            weight += 30
        # type 匹配 +30
        if e["path"].get('type') == stype:
            weight += 30
        # 位置距离 < 100px +30
        d = get_distance(center, get_element_center_pos(e["path"].get('abspos')))
        if d < 100:
            weight += 30
        # 尺寸差异 < 10px +30
        if abs(width_diff) < 10 and abs(height_diff) < 10:
            weight += 30
        # class 匹配 每个 +5
        for c in common_classes:
            weight += 5
        
        reserve[e["id"]] = {"element": e[0], "weight": weight}
    
    # 返回权重最高的元素
    return max(reserve.values(), key=lambda x: x["weight"])["element"]

# imghandle.py（简化代码）
def img_diff(self, locator, directory, imgpath, freeze=False):
    # 1. 定位元素
    log.info("定位图片：{}".format(locator))
    retry = 3
    for i in range(retry):
        try:
            # 2. freeze=True 时，冻结页面交互
            if freeze:
                self.driver.execute_script("""
                    BI.stopEvent = function(event) {
                        event.stopPropagation();
                        event.preventDefault();
                    }
                    document.addEventListener('mouseout', BI.stopEvent, true);
                    document.addEventListener('mousemove', BI.stopEvent, true);
                    document.addEventListener('mouseover', BI.stopEvent, true);
                """)
            
            # 3. 获取元素并移除光标
            ele, path = self.element_locator(locator)
            ActionChains(self.driver).move_to_element_with_offset(ele, 0, 0).perform()
            self.sleep(1)
            
            # 4. 解冻页面
            if freeze:
                self.driver.execute_script("""
                    document.removeEventListener('mouseout', BI.stopEvent, true);
                    document.removeEventListener('mousemove', BI.stopEvent, true);
                    document.removeEventListener('mouseover', BI.stopEvent, true);
                """)
            break
        except (StaleElementReferenceException, ElementNotInteractableException):
            if i == 2:
                raise Exception("元素未出现：" + locator)
            self.sleep(0.5)
    
    # 5. 截图并对比
    img1 = os.path.join(directory, imgpath)  # 基准图
    img2 = os.path.join(cm.TMP_DIR, imgpath)  # 实际截图
    ele.screenshot(img2)
    
    # 6. 5 种算法综合判定
    pham = hamdist(pHash(img1), pHash(img2))  # ≤ 2 认为相似
    aham = hamdist(aHash(img1), aHash(img2))  # = 0 认为相同
    dham = hamdist(dHash(img1), dHash(img2))  # ≤ 2 认为相似
    score = ssim(img1, img2)                   # ≥ 0.95 认为相似
    cdiff = classify_hist_with_split(img1, img2)  # ≥ 0.99 认为相似
    
    if pham > 2 or score < 0.95 or aham > 0 or dham > 0 or cdiff < 0.99:
        score, diff_img = ssim(img1, img2, draw_diff=True)
        cv2.imwrite(diff_path, diff_img)
        raise Exception("图片不一致")

// 冻结逻辑
BI.stopEvent = function(event) {
    event.stopPropagation();  // 阻止事件冒泡
    event.preventDefault();   // 阻止默认行为
}

// 全局监听鼠标事件
document.addEventListener('mouseout', BI.stopEvent, true);
document.addEventListener('mousemove', BI.stopEvent, true);
document.addEventListener('mouseover', BI.stopEvent, true);

// 截图完成后解冻
document.removeEventListener('mouseout', BI.stopEvent, true);
document.removeEventListener('mousemove', BI.stopEvent, true);
document.removeEventListener('mouseover', BI.stopEvent, true);

// foreground.js - 内容脚本
// 1. 监听用户操作
document.addEventListener('click', function(e) {
    if (!isRecording) return;
    
    // 获取元素完整定位信息
    var path = getDomPath(e.target);
    
    // 发送到 background
    chrome.runtime.sendMessage({
        type: 'command',
        data: {
            cmd: 'click',
            path: path,
            x: e.clientX,
            y: e.clientY
        }
    });
});

// 2. 快捷键支持
document.addEventListener('keydown', function(e) {
    // Alt+1 截图断言
    if (e.altKey && e.key === '1') {
        GlobalEvents.emit('screenshotDiff');
    }
    // Alt+2 属性断言
    if (e.altKey && e.key === '2') {
        GlobalEvents.emit('expectDiff');
    }
});

function getDomPath(target, isAllDom) {
    // 生成 5 种定位路径 + 位置信息
    let path1 = getDomXPath(target, isAllDom);        // xpath 路径
    let path2 = getDomSelectorPath(target, isAllDom); // css 选择器
    let path3 = getDomTextPath(target, isAllDom);     // 文本内容定位
    let path4 = getDomValuePath(target, isAllDom);    // value 属性定位
    let path5 = getDomTypePath(target, isAllDom);     // 自定义 type 属性
    
    // 获取元素的屏幕位置和尺寸
    let rect = target.getBoundingClientRect();
    let abspos = {
        left: rect.left,
        top: rect.top,
        width: rect.width,
        height: rect.height
    };
    
    // 获取完整的 class 列表
    let classes = target.getAttribute && target.getAttribute('class');
    
    return {
        xpath: path1,
        selector: path2,
        text: path3,
        value: path4,
        type: path5,
        abspos: abspos,
        classes: classes
    };
}

function getDomXPath(target, isAllDom) {
    var arrAllPaths = [];
    var node = target;
    
    // 从目标元素向上遍历到根节点
    while (node) {
        path = getRelativeDomPath(document, target, isAllDom);
        if (path) {
            arrAllPaths.push(path);
            // 检查当前路径是否唯一
            if (checkUniqueXPath(document, path, isAllDom)) {
                break;
            }
        }
        node = node.parentNode || node.host;
        target = node;
    }
    
    // 反转数组，从根节点到目标元素
    return arrAllPaths.length > 0 ? arrAllPaths.reverse().join('') : null;
}

function getRelativeDomPath(rootNode, target, isAllDom) {
    var tagName = target.nodeName.toLowerCase();
    var testidValue = target.getAttribute('data-testid');
    var idValue = target.getAttribute('id');
    var textValue = target.textContent;
    var __type__Value = target.getAttribute('__type__');
    var __text__Value = target.getAttribute('__text__');
    var __value__Value = target.getAttribute('__value__');
    var classValues = target.getAttribute('class');
    
    // 优先级 1: data-testid (测试专用属性)
    if (testidValue && checkUniqueXPath(rootNode, `//*[@data-testid="${testidValue}"]`)) {
        return `//*[@data-testid="${testidValue}"]`;
    }
    
    // 优先级 2: 唯一 id
    if (idValue && !isInBlackList(idValue) && 
        checkUniqueXPath(rootNode, `//*[@id="${idValue}"]`)) {
        return `//*[@id="${idValue}"]`;
    }
    
    // 优先级 3: 自定义属性 (__type__, __text__, __value__)
    if (__type__Value && __text__Value) {
        return `//*[@__type__="${__type__Value}" and @__text__="${__text__Value}"]`;
    }
    
    // 优先级 4: 文本内容定位
    if (textValue && textValue.length <= 50) {
        return `//${tagName}[text()="${textValue}"]`;
    }
    
    // 优先级 5: class 定位 (在 whitelist 中的 class 优先)
    if (classValues) {
        for (let cls of classValues.split(' ')) {
            if (cls in classWhiteList && 
                checkUniqueXPath(rootNode, `//*[contains(@class,"${cls}")]`)) {
                return `//*[contains(@class,"${cls}")]`;
            }
        }
    }
    
    return null;
}

function getDomSelectorPath(target, isAllDom) {
    var arrAllPaths = [];
    var node = target;
    
    // 从目标元素向上遍历，寻找最近的唯一 id 祖先
    while (node) {
        if (node.nodeName === '#document') {
            path = getRelativeDomSelectorPath(node, target, isAllDom);
            if (path) {
                arrAllPaths.push(path);
                break;
            }
        }
        node = node.parentNode;
    }
    
    // 使用 /deep/ 连接跨 Shadow DOM 的路径
    return arrAllPaths.length > 0 ? arrAllPaths.reverse().join(' /deep/ ') : null;
}

# scripts.py
class WSserver(WebSocketHandler):
    arrCodes = []      # 生成的代码行
    eleCodes = {}      # 元素定位信息
    cmdQueue = []      # 操作命令队列
    
    def on_message(self, message):
        message = tornado.escape.json_decode(message)
        
        if message['type'] == 'saveCmd':
            self._on_command(message['data'])
        
        elif message['type'] == 'save':
            self.description = message['data']['description']
            self._save_testfile()      # 保存 JSON 命令流
            self._generate_testfile()  # 生成 Python 代码
    
    def _on_command(self, data):
        # 命令过滤和合并
        self._sendKeysFilter(data)
    
    def _sendKeysFilter(self, cmdInfo):
        # 合并连续的 sendKeys 操作
        if cmdInfo.get('cmd') == 'sendKeys':
            self.arrSendKeys.append(cmdInfo['data']['keys'])
        else:
            if len(self.arrSendKeys) > 0:
                # 执行合并
                merged_cmd = {
                    'cmd': 'sendKeys',
                    'data': {'keys': ''.join(self.arrSendKeys)}
                }
                self.cmdQueue.append(merged_cmd)
                self.arrSendKeys = []
            self.cmdQueue.append(cmdInfo)

# testcase/登录/test_登录.py
import pytest
from page.webpage import WebPage

class TestLogin:
    def test_用户登录 (self, drivers):
        """用户登录成功场景"""
        page = WebPage(drivers)
        
        # 打开登录页
        page.open_url('http://localhost:8080/login')
        
        # 输入用户名
        page.send_keys('admin')
        
        # 输入密码
        page.send_keys('123456')
        
        # 点击登录按钮
        page.click_element({"xpath": "//button[@id='loginBtn']"}, 100, 50)
        
        # 验证登录成功
        page.expect(None, "url", "contain", "/home")

@pytest.fixture(scope='module', autouse=True)
def drivers(request):
    # 测试前：创建 WebDriver
    chrome_options = webdriver.ChromeOptions()
    chrome_options.add_experimental_option(
        'prefs', 
        {'download.default_directory': DOWNLOAD_DIR}
    )
    driver = webdriver.Chrome(options=chrome_options)
    driver.set_window_size(1920, 1080)
    
    def fn():
        # 测试后：移动下载文件到临时目录供对比
        for filename in os.listdir(DOWNLOAD_DIR):
            shutil.move(
                os.path.join(DOWNLOAD_DIR, filename),
                os.path.join(TMP_DIR, f"download_{num}_{filename}")
            )
        driver.quit()
    
    request.addfinalizer(fn)
    return driver

def pytest_html_results_table_header(cells):
    # 自定义表头
    cells[:] = [
        html.th('测试结果'),
        html.th('用例名称'),
        html.th('用例路径'),
        html.th('执行时长')
    ]

def pytest_html_results_table_row(report, cells):
    # 自定义每行内容
    cells[1] = html.td(report.description)  # 用例名称 = 函数 docstring
    cells[2] = html.td(report.nodeid)       # 用例路径

@pytest.hookimpl(hookwrapper=True)
def pytest_runtest_makereport(item):
    # 失败时自动截图
    outcome = yield
    report = outcome.get_result()
    
    if report.failed:
        screen_img = _capture_screenshot()
        html = f'<img src="data:image/png;base64,{screen_img}" />'
        report.extra.append(pytest_html.extras.html(html))