STEP3-VL-10B效果展示：同一张GUI截图→精准定位按钮+生成Selenium脚本

STEP3-VL-10B效果展示同一张GUI截图→精准定位按钮生成Selenium脚本你有没有遇到过这样的场景拿到一张软件界面的截图需要写自动化测试脚本但光是找按钮的坐标、写定位代码就要花上半天时间。或者你想把一个手动操作流程变成自动化脚本但对着截图一个个元素去定位既繁琐又容易出错。今天要给大家展示的STEP3-VL-10B就能完美解决这个问题。这个只有100亿参数的轻量级多模态模型在GUI理解方面的能力让人惊艳——它能看懂界面截图精准找到按钮位置还能直接生成可用的Selenium脚本。1. 先看看效果有多惊艳让我直接给你看几个真实案例你就知道这个模型有多厉害了。1.1 案例一登录界面自动化我上传了一张常见的登录界面截图然后问它“帮我找到登录按钮并生成点击这个按钮的Selenium代码。”模型给出的回答是这样的from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC # 初始化浏览器驱动 driver webdriver.Chrome() # 假设已经打开了目标页面 # 定位登录按钮并点击 login_button driver.find_element(By.XPATH, //button[contains(text(), 登录) or contains(class, login-btn)]) login_button.click() # 或者如果按钮有特定ID # login_button driver.find_element(By.ID, loginButton) # login_button.click() print(登录按钮点击成功)更厉害的是它还能告诉我按钮在图片中的具体位置“登录按钮位于图片右下角区域大约在(80%, 85%)的相对位置是一个蓝色的矩形按钮上面有‘登录’文字。”1.2 案例二电商网站商品操作我又上传了一张电商商品详情页的截图上面有“加入购物车”、“立即购买”等按钮。我问“生成点击‘加入购物车’按钮的Selenium代码。”模型不仅生成了代码还给出了多种定位策略# 方法1通过按钮文本定位最直接 add_to_cart_button driver.find_element(By.XPATH, //button[contains(text(), 加入购物车)]) # 方法2通过CSS类名定位如果按钮有特定样式类 add_to_cart_button driver.find_element(By.CSS_SELECTOR, .add-to-cart-btn) # 方法3通过ID定位最稳定如果按钮有ID add_to_cart_button driver.find_element(By.ID, addToCart) # 点击操作 add_to_cart_button.click() # 建议添加等待确保页面加载完成 wait WebDriverWait(driver, 10) wait.until(EC.element_to_be_clickable((By.XPATH, //button[contains(text(), 加入购物车)]))).click()模型还贴心地提醒我“在实际使用中建议使用方法3ID定位因为这是最稳定的定位方式。如果按钮没有ID可以优先使用方法1文本定位。”1.3 案例三复杂表单操作第三个案例是一个包含多个输入框、下拉框和提交按钮的复杂表单界面。我的问题是“为这个表单生成完整的Selenium自动化代码包括填写所有字段和提交表单。”模型给出的代码相当完整from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select from selenium.webdriver.common.keys import Keys import time driver webdriver.Chrome() # 填写姓名 name_input driver.find_element(By.ID, name) name_input.clear() name_input.send_keys(张三) # 填写邮箱 email_input driver.find_element(By.ID, email) email_input.clear() email_input.send_keys(zhangsanexample.com) # 选择性别假设是单选按钮 male_radio driver.find_element(By.ID, gender_male) male_radio.click() # 选择城市下拉框 city_select Select(driver.find_element(By.ID, city)) city_select.select_by_visible_text(北京) # 填写备注 remarks_textarea driver.find_element(By.ID, remarks) remarks_textarea.clear() remarks_textarea.send_keys(这是测试数据) # 点击提交按钮 submit_button driver.find_element(By.XPATH, //button[typesubmit]) submit_button.click() # 等待提交完成 time.sleep(2) print(表单提交完成)2. 为什么这个效果很厉害你可能觉得不就是生成一些Selenium代码吗很多代码生成工具也能做。但STEP3-VL-10B的厉害之处在于这几个方面2.1 真正的视觉理解能力普通的代码生成工具只能基于文本描述来生成代码但STEP3-VL-10B是真正“看懂”了图片。它能识别界面元素准确区分按钮、输入框、下拉菜单、复选框等不同控件理解元素关系知道哪些元素是表单的一部分哪些是导航菜单识别文字内容准确读取按钮上的文字、输入框的提示语分析布局结构理解元素的相对位置和排列方式2.2 智能的代码生成策略模型生成的代码不是简单的模板填充而是有智能思考的多种定位方式会根据界面特点推荐最合适的定位策略ID、XPath、CSS选择器等错误处理建议会提醒你可能遇到的问题和解决方案最佳实践生成的代码符合Selenium自动化测试的最佳实践可读性强代码结构清晰注释恰当容易理解和修改2.3 媲美大模型的小体积最让人惊讶的是STEP3-VL-10B只有100亿参数但在GUI理解任务上的表现可以媲美那些有1000-2000亿参数的大模型。这意味着什么意味着你可以在消费级显卡比如RTX 4090上就能运行这个模型不需要昂贵的专业显卡。对于大多数开发者和测试工程师来说这个门槛低了很多。3. 实际应用场景这种能力在实际工作中能帮我们做什么呢我想到几个特别实用的场景3.1 自动化测试脚本快速生成以前写自动化测试脚本测试工程师需要打开浏览器开发者工具一个个元素查看属性手动编写定位代码调试和修改现在有了STEP3-VL-10B只需要截一张图上传给模型拿到可用的代码稍微调整就能用效率提升不是一点半点。3.2 旧系统自动化改造很多老系统没有为自动化测试做专门的设计元素没有IDclass命名混乱。手动写自动化脚本特别痛苦。现在可以截取关键界面让模型分析界面结构生成可靠的定位代码。即使元素没有好的属性模型也能通过相对位置、文字内容等方式找到稳定的定位策略。3.3 培训和新手指导对于刚接触Selenium自动化测试的新手这个功能特别有帮助。他们可以看到不同的界面元素应该用什么方式定位什么样的代码结构更合理如何处理常见的界面变化相当于有个经验丰富的自动化测试工程师在随时指导。3.4 跨平台自动化不仅仅是Web界面理论上这个模型也能理解桌面应用、移动应用的界面截图。虽然我主要测试了Web界面但这种视觉理解能力是可以迁移的。4. 怎么使用这个功能使用起来比你想的简单。STEP3-VL-10B提供了两种使用方式4.1 通过Web界面使用如果你在CSDN算力服务器上部署了STEP3-VL-10B镜像可以直接通过Web界面使用打开浏览器访问你的服务器地址比如https://gpu-podxxx-7860.web.gpu.csdn.net/上传你的GUI截图在对话框中输入你的需求比如“生成点击‘搜索’按钮的Selenium代码”等待模型分析并生成代码4.2 通过API调用如果你需要集成到自己的工具链中可以通过API调用import requests import base64 # 读取图片并转换为base64 with open(gui_screenshot.png, rb) as image_file: base64_image base64.b64encode(image_file.read()).decode(utf-8) # 构建请求 url https://你的服务器地址/api/v1/chat/completions headers {Content-Type: application/json} data { model: Step3-VL-10B, messages: [ { role: user, content: [ { type: image_url, image_url: { url: fdata:image/png;base64,{base64_image} } }, { type: text, text: 请分析这个界面找到‘提交’按钮并生成点击该按钮的Selenium Python代码 } ] } ], max_tokens: 1024 } # 发送请求 response requests.post(url, headersheaders, jsondata) result response.json() # 提取生成的代码 generated_code result[choices][0][message][content] print(generated_code)5. 使用技巧和建议根据我的使用经验有几个技巧可以让效果更好5.1 截图要清晰完整截取整个界面不要只截部分确保文字清晰可读如果是Web页面最好在浏览器全屏模式下截图避免截图中包含太多动态内容比如轮播图5.2 提问要具体明确不要只说“生成代码”要明确告诉模型你想要什么❌ 不好的提问“为这个界面生成代码”✅ 好的提问“生成点击登录按钮的Selenium Python代码使用XPath定位”✅ 更好的提问“分析这个电商商品页为‘加入购物车’和‘立即购买’两个按钮生成点击代码并添加适当的等待”5.3 验证和调整生成的代码模型生成的代码通常质量很高但还是要在本地运行测试一下根据实际情况调整定位策略添加必要的异常处理优化等待逻辑5.4 结合其他工具使用你可以把这个功能集成到你的开发流程中与测试管理工具结合自动生成测试脚本与CI/CD流水线结合自动更新自动化脚本与文档工具结合自动生成操作指南6. 效果背后的技术STEP3-VL-10B为什么能在GUI理解上做得这么好主要是这几个原因6.1 专门的多模态训练模型在训练时不仅看了大量的文本数据还看了海量的图像数据特别是界面截图、图表、文档等。这让它学会了如何“读懂”视觉信息。6.2 强大的OCR能力在OCRBench基准测试中STEP3-VL-10B拿到了86.75的高分。这意味着它能准确识别界面上的文字包括按钮标签输入框提示菜单项文字状态信息6.3 精准的空间理解在ScreenSpot-V2测试中模型拿到了92.61分。这个测试专门评估模型对屏幕元素位置的理解能力。高分说明模型能准确判断元素在界面中的相对位置元素的大小和形状元素之间的布局关系6.4 代码生成优化模型在训练时应该接触了大量的编程代码数据特别是自动化测试相关的代码。这让它学会了Selenium的常用模式和最佳实践各种定位策略的适用场景健壮性代码的写法7. 总结STEP3-VL-10B在GUI理解和Selenium代码生成方面的表现确实超出了我的预期。作为一个只有100亿参数的模型它能做到准确理解界面截图识别各种UI元素智能生成可用的代码不仅仅是模板填充提供多种解决方案适应不同场景需求运行门槛低消费级显卡就能部署对于做自动化测试的工程师来说这个工具能大幅提升工作效率。对于开发人员来说它能帮助快速创建界面操作的自动化脚本。对于新手来说它是个很好的学习工具。当然它也不是万能的。复杂的动态界面、自定义控件、图形验证码等场景可能还需要人工干预。但对于大多数标准的Web界面和桌面应用界面它已经能提供很好的帮助了。最让我印象深刻的是这么强大的功能居然来自一个如此轻量级的模型。这让我对多模态AI的未来更加期待——也许用不了多久我们就能在手机上都运行这样的智能助手随时帮我们处理各种界面自动化任务。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。