当 Dify 遇见 Selenium：可视化编排 UI 自动化测试，原来如此简单

// 传统的Selenium测试代码示例public class LoginTest {    WebDriver driver;        @Test    public void testUserLogin() {        // 初始化浏览器驱动        driver = new ChromeDriver();        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);                try {            // 打开登录页面            driver.get("https://example.com/login");                        // 输入用户名            WebElement username = driver.findElement(By.id("username"));            username.sendKeys("testuser");                        // 输入密码            WebElement password = driver.findElement(By.id("password"));             password.sendKeys("password123");                        // 点击登录按钮            WebElement loginBtn = driver.findElement(By.xpath("//button[@type='submit']"));            loginBtn.click();                        // 验证登录成功            WebElement welcomeMsg = driver.findElement(By.className("welcome"));            Assert.assertTrue(welcomeMsg.getText().contains("欢迎"));                    } finally {            driver.quit();        }    }}

# 使用Docker Compose部署Difygit clone https://github.com/langgenius/difycd dify/docker
# 创建UI测试专用配置cat > docker-compose.ui-test.yml << EOFversion: '3'services:  dify:    image: langgenius/dify:latest    environment:      - SELENIUM_HUB_URL=http://selenium-hub:4444      - TEST_REPORTS_DIR=/app/reports    volumes:      - ./ui-test-data:/app/data      - ./test-reports:/app/reports
  selenium-hub:    image: selenium/hub:4.15.0    ports:      - "4444:4444"
  chrome-node:    image: selenium/node-chrome:4.15.0    environment:      - SE_EVENT_BUS_HOST=selenium-hub      - SE_EVENT_BUS_PUBLISH_PORT=4442      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443    depends_on:      - selenium-hub
  firefox-node:    image: selenium/node-firefox:4.15.0    environment:      - SE_EVENT_BUS_HOST=selenium-hub      - SE_EVENT_BUS_PUBLISH_PORT=4442      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443    depends_on:      - selenium-hubEOF
docker-compose -f docker-compose.ui-test.yml up -d

# elements.yaml - 页面元素定义库login_page:  username_input:    strategies:      - id: username      - css: "input[placeholder='用户名']"      - xpath: "//input[@name='username']"        password_input:    strategies:      - id: password        - css: "input[type='password']"        login_button:    strategies:      - xpath: "//button[contains(text(),'登录')]"      - css: ".login-btn"
dashboard_page:  welcome_message:    strategies:      - class: welcome-msg      - xpath: "//div[contains(@class,'welcome')]"        user_menu:    strategies:      - id: user-dropdown      - css: ".user-profile"

节点类型: Selenium浏览器控制配置:  浏览器类型: chrome  选项:    headless: true    窗口大小: 1920x1080    隐式等待: 10  环境变量:    CHROME_DRIVER_PATH: /usr/local/bin/chromedriver

节点类型: Selenium页面操作配置:  操作类型: get  URL: https://mall.example.com/login  等待条件: 页面加载完成  超时时间: 30000

节点类型: Selenium元素操作配置:  元素定位:    策略: 多策略优先    定位器:      - id: username      - css: "input[placeholder='请输入用户名']"      - xpath: "//input[@name='username']"  操作: send_keys  输入值: "{{test_data.username}}"  等待条件: 元素可交互  清除原有内容: true

节点类型: Selenium元素操作  配置:  元素定位:    策略: id    定位器: password  操作: send_keys  输入值: "{{test_data.password}}"  安全输入: true

节点类型: Selenium元素操作配置:  元素定位:    策略: xpath    定位器: "//button[contains(@class,'login-btn')]"  操作: click  等待条件: 元素可点击  点击后等待: 页面跳转完成

节点类型: 条件分支配置:  条件表达式: "{{login_success}}"  真分支:    - 节点类型: 断言验证      配置:        验证元素:          定位器: ".welcome-message"        预期结果: "包含文本 '欢迎回来'"        超时时间: 10000  假分支:    - 节点类型: 断言验证      配置:        验证元素:          定位器: ".error-message"          预期结果: "包含文本 '用户名或密码错误'"

# 数据驱动测试配置test_cases:  normal_login:    username: "test_user"    password: "correct_password"    expected_result: "success"      wrong_password:    username: "test_user"     password: "wrong_password"    expected_result: "failure"      empty_username:    username: ""    password: "any_password"    expected_result: "validation_error"

class SmartElementLocator:    def __init__(self, element_config):        self.strategies = element_config['strategies']        self.fallback_strategies = element_config.get('fallback_strategies', [])        def find_element(self, driver):        """智能元素定位"""        # 按优先级尝试各种定位策略        for strategy in self.strategies:            try:                element = self.try_strategy(driver, strategy)                if element:                    return element            except NoSuchElementException:                continue                # 主策略失败，尝试备用策略        for strategy in self.fallback_strategies:            try:                element = self.try_strategy(driver, strategy)                if element:                    return element            except NoSuchElementException:                continue                # 所有策略都失败，尝试AI辅助定位        return self.ai_assisted_locate(driver)        def ai_assisted_locate(self, driver):        """AI辅助元素定位"""        # 使用计算机视觉辅助定位元素        screenshot = driver.get_screenshot_as_base64()                # 调用视觉识别服务        vision_result = self.vision_service.analyze_element(screenshot, self.element_description)                if vision_result['found']:            # 使用坐标点击作为最后手段            location = vision_result['location']            action = ActionChains(driver)            action.move_by_offset(location['x'], location['y']).click().perform()            return True                return False

节点类型: 视觉验证配置:  验证类型: 元素视觉匹配  参考图片: "references/welcome_message.png"  相似度阈值: 0.95  忽略区域:    - {x: 10, y: 10, width: 100, height: 30}  # 忽略动态内容区域  超时时间: 5000

class SmartWaiter:    def wait_for_condition(self, driver, condition_type, condition_value, timeout=30):        """智能等待条件满足"""        wait = WebDriverWait(driver, timeout)                conditions = {            'element_visible': EC.visibility_of_element_located,            'element_clickable': EC.element_to_be_clickable,             'page_loaded': self.page_loaded,            'ajax_completed': self.ajax_completed,            'url_contains': EC.url_contains        }                condition = conditions.get(condition_type)        if condition:            return wait.until(condition(condition_value))        else:            raise ValueError(f"不支持的等待条件: {condition_type}")        def page_loaded(self, driver):        """自定义页面加载完成判断"""        return driver.execute_script("return document.readyState") == "complete"        def ajax_completed(self, driver):        """AJAX请求完成判断"""        return driver.execute_script("return jQuery.active == 0")

工作流名称: 电商完整购物流程节点列表:  - 用户登录  - 商品搜索:      搜索关键词: "{{product_name}}"      排序方式: "销量排序"  - 商品选择:      筛选条件:        价格区间: "100-500"        品牌: "知名品牌"  - 加入购物车:      数量: 2      检查库存: true  - 购物车结算:      使用优惠券: true      选择收货地址: "默认地址"  - 订单支付:      支付方式: "模拟支付"      支付金额验证: true  - 订单确认:      验证订单状态: "待发货"      生成订单截图: true

# 多场景测试数据test_scenarios:  normal_purchase:    username: "vip_user"    product_name: "智能手机"    expected_result: "order_created"      out_of_stock:    username: "normal_user"     product_name: "热门商品"    expected_result: "out_of_stock"      coupon_usage:    username: "new_user"    product_name: "普通商品"    coupon_code: "WELCOME100"    expected_result: "discount_applied"

// 页面改版前WebElement searchBox = driver.findElement(By.id("search"));searchBox.sendKeys("keyword");
// 页面改版后 - 需要修改所有相关测试用例WebElement searchBox = driver.findElement(By.cssSelector(".new-search-input"));searchBox.sendKeys("keyword");

# 只需在元素库中更新一次search_input:  strategies:    - id: search           # 旧定位器    - css: .new-search-input  # 新定位器

quality_metrics = {    '测试稳定性': {        '传统方式': '75%',        'Dify方式': '95%',        '提升': '26.7%'    },    '缺陷发现率': {        '传统方式': '68%',         'Dify方式': '92%',        '提升': '35.3%'    },    '回归测试覆盖率': {        '传统方式': '45%',        'Dify方式': '88%',        '提升': '95.6%'    }}

page_objects:  login_page:    url: "/login"    elements:      username_input: "#username"      password_input: "#password"      login_button: "//button[text()='登录']"      error_message: ".error-msg"      home_page:    url: "/dashboard"    elements:      welcome_message: ".welcome"      user_menu: "#user-dropdown"      logout_button: "//a[text()='退出']"

reusable_actions:  user_login:    参数:      - username      - password    步骤:      - 打开页面: "login_page"      - 输入文本:           元素: "username_input"          文本: "{{username}}"      - 输入文本:          元素: "password_input"           文本: "{{password}}"      - 点击元素: "login_button"

data_factories:  user_data:    用户名:       生成器: "chinese_name"      前缀: "测试用户"        邮箱:      生成器: "email"      域名: "test.com"        手机号:      生成器: "chinese_mobile"        order_data:    订单号:      生成器: "uuid"        金额:      生成器: "random_number"      最小值: 100      最大值: 1000

retry_policies:  元素定位失败:    最大重试次数: 3    重试间隔: 2000    重试条件: "NoSuchElementException"      网络超时:    最大重试次数: 2    重试间隔: 5000    重试条件: "TimeoutException"      断言失败:    最大重试次数: 1    重试间隔: 1000    重试条件: "AssertionError"

name: UI Automation Testson:  push:    branches: [main]  schedule:    - cron: '0 2 * * *'  # 每天凌晨2点
jobs:  ui-tests:    runs-on: ubuntu-latest    services:      selenium-hub:        image: selenium/hub:4.15.0        ports:          - "4444:4444"            chrome:        image: selenium/node-chrome:4.15.0        environment:          SE_EVENT_BUS_HOST: selenium-hub        depends_on: [selenium-hub]        steps:      - uses: actions/checkout@v3            - name: Run Dify UI Tests        run: |          curl -X POST "http://dify-server:5000/api/workflows/trigger" \          -H "Content-Type: application/json" \          -d '{            "workflow_id": "ui-automation-suite",            "inputs": {              "browser": "chrome",              "environment": "staging",              "test_tags": "regression"            }          }'            - name: Upload Test Reports        uses: actions/upload-artifact@v3        with:          name: ui-test-reports          path: test-reports/          retention-days: 30

ai_test_generation:  基于用户行为:    数据源: "用户会话记录"    生成策略: "高频路径优先"      基于业务规则:    数据源: "需求文档"    生成策略: "关键路径覆盖"      基于风险分析:    数据源: "生产缺陷数据"    生成策略: "高风险区域重点测试"

class SelfHealingTests:    def auto_update_locators(self, changed_elements):        """自动更新元素定位器"""        for element in changed_elements:            new_locators = self.detect_new_locators(element)            self.element_library.update(element.name, new_locators)                        # 自动验证新定位器有效性            validation_result = self.validate_locators(new_locators)            if validation_result['success']:                self.logger.info(f"元素 {element.name} 定位器已自动更新")            else:                self.notify_manual_intervention(element)

cross_platform_testing:  web:    浏览器: ["chrome", "firefox", "safari"]    分辨率: ["1920x1080", "1366x768", "375x667"]      mobile:    设备: ["iPhone 14", "Samsung Galaxy S23"]    方向: ["portrait", "landscape"]      api:    端点: "同一业务逻辑"    验证: "数据一致性"