STEP3-VL-10B多模态实战：用ScreenSpot-V2 92.61分能力做APP界面自动化测试

STEP3-VL-10B多模态实战用ScreenSpot-V2 92.61分能力做APP界面自动化测试1. 前言当AI能“看懂”手机屏幕你有没有想过如果有一个助手不仅能看懂你手机屏幕上的每一个按钮、每一段文字还能像人一样点击、滑动、输入帮你自动完成各种操作那会是什么体验这听起来像是科幻电影里的场景但现在它已经变成了现实。今天要聊的STEP3-VL-10B就是一个能“看懂”屏幕的AI模型。它在ScreenSpot-V2测试中拿到了92.61的高分这意味着它识别和定位屏幕元素的能力已经达到了相当高的水平。更重要的是这个模型只有100亿参数对硬件要求相对友好普通的高性能显卡就能跑起来。这对于我们做APP自动化测试来说简直是量身定做的工具。想象一下以前写自动化测试脚本需要手动定位每个按钮的坐标屏幕分辨率一变脚本就可能失效。现在你只需要告诉AI“点击登录按钮”它就能自己找到并点击。这不仅仅是效率的提升更是测试方式的革命。2. STEP3-VL-10B轻量级的多模态“火眼金睛”2.1 这个模型到底有多强STEP3-VL-10B是阶跃星辰开源的一个多模态视觉语言模型。简单来说它既能看懂图片又能理解文字还能把两者结合起来进行推理。你可能听说过GPT-4V、Qwen-VL这些大模型它们确实很强但动辄几百亿甚至上千亿的参数对硬件要求极高部署成本也让人望而却步。STEP3-VL-10B只有100亿参数在保持强大能力的同时大大降低了使用门槛。让我用几个数字告诉你它到底有多强MMMU多学科多模态理解78.11分MathVista数学视觉推理83.97分OCRBench文档识别86.75分ScreenSpot-V2屏幕元素定位92.61分特别是最后这个ScreenSpot-V2的92.61分对于做APP自动化测试来说意义重大。这个分数意味着模型能准确识别屏幕上的各种UI元素——按钮、输入框、菜单、图标并且能精确定位它们的位置。2.2 为什么选择它做自动化测试传统的APP自动化测试主要依赖两种方式1. 基于坐标的定位# 传统方式硬编码坐标 click(100, 200) # 点击(100, 200)位置这种方式最大的问题是脆弱。屏幕分辨率一变或者UI稍微调整坐标就失效了。2. 基于元素ID的定位# 稍微好一点的方式通过元素ID driver.find_element_by_id(login_button).click()这种方式需要APP开发时给每个元素都设置唯一的ID但现实是很多APP并没有完善的元素标识。STEP3-VL-10B提供了第三种选择基于视觉理解的定位。你不需要知道按钮的坐标也不需要它有唯一的ID。你只需要截一张屏幕图然后告诉模型“点击登录按钮”模型就能自己找到按钮在哪里并返回它的位置坐标。这就像有一个视力超好、理解力超强的测试工程师看着屏幕就能知道该点哪里。3. 快速上手三步搭建测试环境3.1 环境准备你需要什么硬件在开始之前我们先看看硬件要求。好消息是STEP3-VL-10B对硬件的要求相对友好硬件组件最低要求推荐配置GPUNVIDIA显卡24GB显存如RTX 4090A100 40GB/80GB内存32GB64GB或以上存储50GB可用空间100GB SSD系统Ubuntu 20.04Ubuntu 22.04如果你没有这么高配置的机器也不用担心。现在很多云服务商都提供GPU服务器租赁按小时计费用完了就关掉成本可控。3.2 一键部署最简单的启动方式STEP3-VL-10B提供了多种使用方式对于大多数用户来说WebUI是最简单直观的选择。方式一使用预置镜像推荐如果你使用的是CSDN算力服务器事情就简单多了。镜像已经预装了所有依赖并且用Supervisor自动管理服务。在服务器右侧导航栏找到“快速访问”点击后会打开类似这样的地址每台服务器地址不同https://gpu-pod699d9da7a426640397bd2855-7860.web.gpu.csdn.net/打开后就能看到Web界面方式二手动启动WebUI如果你想在自己的机器上部署可以手动启动# 进入项目目录 cd ~/Step3-VL-10B # 激活虚拟环境 source /Step3-VL-10B/venv/bin/activate # 启动WebUI服务 python3 webui.py --host 0.0.0.0 --port 7860启动后在浏览器访问http://localhost:7860就能看到界面。3.3 服务管理几个常用命令服务启动后你可能需要管理它。如果你用的是Supervisor管理这几个命令会很实用# 查看所有服务状态 supervisorctl status # 停止WebUI服务 supervisorctl stop webui # 重启WebUI服务 supervisorctl restart webui # 停止所有服务 supervisorctl stop all # 启动WebUI服务 supervisorctl start webui如果你想修改服务端口可以编辑启动脚本vim /usr/local/bin/start-webui-service.sh找到端口配置行修改--port参数即可exec python /root/Step3-VL-10B/webui.py \ --host 0.0.0.0 \ --port 7860 # 修改这里的端口号4. 实战演练用AI实现APP自动化测试4.1 基础测试让AI看懂屏幕我们先从一个简单的例子开始。假设我们要测试一个登录页面页面上有用户名输入框、密码输入框和登录按钮。传统的方式我们需要写这样的代码# 传统自动化测试代码 username_input driver.find_element_by_id(username) password_input driver.find_element_by_id(password) login_button driver.find_element_by_id(login_btn) username_input.send_keys(test_user) password_input.send_keys(test_pass) login_button.click()但如果APP更新了元素ID变了或者根本没有ID这段代码就失效了。用STEP3-VL-10B我们可以换一种思路截取当前屏幕把截图传给模型让模型识别并定位元素根据返回的坐标进行操作4.2 代码实现完整的测试流程下面是一个完整的示例展示如何用STEP3-VL-10B实现自动化登录测试import requests import base64 import json from PIL import Image import io class AITestAutomation: def __init__(self, api_url): 初始化AI测试自动化类 Args: api_url: STEP3-VL-10B的API地址 self.api_url api_url def screenshot_to_base64(self, image_path): 将截图转换为base64编码 Args: image_path: 截图文件路径 Returns: base64编码的图片字符串 with open(image_path, rb) as image_file: return base64.b64encode(image_file.read()).decode(utf-8) def ask_ai_to_find_element(self, screenshot_path, element_description): 让AI在截图中查找指定元素 Args: screenshot_path: 截图路径 element_description: 元素描述如登录按钮、用户名输入框 Returns: 元素的位置坐标 (x, y, width, height) # 将截图转换为base64 image_base64 self.screenshot_to_base64(screenshot_path) # 构建请求数据 payload { model: Step3-VL-10B, messages: [ { role: user, content: [ { type: image_url, image_url: { url: fdata:image/jpeg;base64,{image_base64} } }, { type: text, text: f请在这张图片中找到{element_description}并返回它的位置坐标格式为: x,y,width,height } ] } ], max_tokens: 1024 } # 发送请求 response requests.post( f{self.api_url}/api/v1/chat/completions, headers{Content-Type: application/json}, datajson.dumps(payload) ) # 解析响应 if response.status_code 200: result response.json() ai_response result[choices][0][message][content] # 从AI的响应中提取坐标 # 这里假设AI返回的格式是 x,y,width,height try: coords ai_response.strip().split(,) x, y, width, height map(int, coords[:4]) return x, y, width, height except: print(f解析坐标失败AI返回: {ai_response}) return None else: print(fAPI请求失败: {response.status_code}) return None def perform_login_test(self, login_screenshot_path): 执行登录测试 Args: login_screenshot_path: 登录页面截图路径 print(开始登录页面自动化测试...) # 1. 找到用户名输入框 print(正在定位用户名输入框...) username_coords self.ask_ai_to_find_element( login_screenshot_path, 用户名输入框 ) if username_coords: x, y, w, h username_coords print(f找到用户名输入框: 位置({x}, {y}), 大小({w}x{h})) # 在实际测试中这里会执行点击和输入操作 # self.click_and_type(x w//2, y h//2, test_user) else: print(未找到用户名输入框) return False # 2. 找到密码输入框 print(正在定位密码输入框...) password_coords self.ask_ai_to_find_element( login_screenshot_path, 密码输入框 ) if password_coords: x, y, w, h password_coords print(f找到密码输入框: 位置({x}, {y}), 大小({w}x{h})) # self.click_and_type(x w//2, y h//2, test_password) else: print(未找到密码输入框) return False # 3. 找到登录按钮 print(正在定位登录按钮...) login_coords self.ask_ai_to_find_element( login_screenshot_path, 登录按钮 ) if login_coords: x, y, w, h login_coords print(f找到登录按钮: 位置({x}, {y}), 大小({w}x{h})) # self.click(x w//2, y h//2) print(登录测试完成) return True else: print(未找到登录按钮) return False # 使用示例 if __name__ __main__: # 替换为你的API地址 api_url https://gpu-pod699d9da7a426640397bd2855-7860.web.gpu.csdn.net # 创建测试实例 tester AITestAutomation(api_url) # 执行登录测试 # 假设你有一张登录页面的截图 login_page.png success tester.perform_login_test(login_page.png) if success: print(测试通过) else: print(测试失败)这段代码展示了基本的思路。在实际使用中你还需要集成真正的点击和输入操作可以使用Appium、uiautomator2等工具添加错误处理和重试机制实现更复杂的测试场景4.3 高级应用复杂场景测试除了简单的元素定位STEP3-VL-10B还能处理更复杂的测试场景场景一验证页面内容def verify_page_content(self, screenshot_path, expected_content): 验证页面是否包含预期内容 Args: screenshot_path: 页面截图 expected_content: 预期内容列表如[欢迎回来, 用户中心, 消息通知] image_base64 self.screenshot_to_base64(screenshot_path) payload { model: Step3-VL-10B, messages: [ { role: user, content: [ { type: image_url, image_url: { url: fdata:image/jpeg;base64,{image_base64} } }, { type: text, text: f请检查这张图片中是否包含以下内容{, .join(expected_content)}。请回答是或否并列出找到的内容。 } ] } ] } # 发送请求并解析响应...场景二识别异常状态def check_for_errors(self, screenshot_path): 检查页面是否有错误提示 Args: screenshot_path: 页面截图 Returns: 错误信息列表 image_base64 self.screenshot_to_base64(screenshot_path) payload { model: Step3-VL-10B, messages: [ { role: user, content: [ { type: image_url, image_url: { url: fdata:image/jpeg;base64,{image_base64} } }, { type: text, text: 请检查这张图片中是否有错误提示、警告信息或异常状态。如果有请描述它们。 } ] } ] } # 发送请求并解析响应...场景三多步骤流程测试def test_shopping_flow(self): 测试购物流程 test_steps [ (home_page.png, 找到商品搜索框), (search_page.png, 找到第一个商品), (product_page.png, 找到加入购物车按钮), (cart_page.png, 找到结算按钮), (checkout_page.png, 找到提交订单按钮) ] for screenshot, instruction in test_steps: print(f执行步骤: {instruction}) coords self.ask_ai_to_find_element(screenshot, instruction) if coords: print(f找到元素坐标: {coords}) # 执行点击操作 # self.click(coords[0] coords[2]//2, coords[1] coords[3]//2) else: print(f未找到元素: {instruction}) return False print(购物流程测试完成) return True5. API调用更灵活的集成方式除了WebUISTEP3-VL-10B还提供了OpenAI兼容的API接口这让它能够轻松集成到现有的自动化测试框架中。5.1 基础API调用最简单的文本对话curl -X POST https://gpu-pod699d9da7a426640397bd2855-7860.web.gpu.csdn.net/api/v1/chat/completions \ -H Content-Type: application/json \ -d { model: Step3-VL-10B, messages: [{role: user, content: 你好}], max_tokens: 1024 }带图片的多模态对话curl -X POST http://localhost:8000/v1/chat/completions \ -H Content-Type: application/json \ -d { model: Step3-VL-10B, messages: [ { role: user, content: [ { type: image_url, image_url: { url: https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/bee.jpg } }, { type: text, text: 描述这张图片 } ] } ], max_tokens: 1024 }5.2 Python SDK集成如果你用Python写测试脚本可以这样集成import openai # 配置客户端 client openai.OpenAI( base_urlhttp://localhost:8000/v1, # 你的API地址 api_keynot-needed # 如果没有认证可以随便填 ) def analyze_screenshot(image_path, question): 分析截图并回答问题 Args: image_path: 截图文件路径 question: 要问的问题 Returns: AI的回答 # 读取图片并转换为base64 import base64 with open(image_path, rb) as image_file: base64_image base64.b64encode(image_file.read()).decode(utf-8) # 调用API response client.chat.completions.create( modelStep3-VL-10B, messages[ { role: user, content: [ { type: image_url, image_url: { url: fdata:image/jpeg;base64,{base64_image} } }, { type: text, text: question } ] } ], max_tokens1024 ) return response.choices[0].message.content # 使用示例 result analyze_screenshot( login_page.png, 这张图片是什么界面有哪些可交互的元素 ) print(fAI分析结果: {result})5.3 与现有测试框架集成STEP3-VL-10B可以轻松集成到现有的测试框架中比如pytestimport pytest import requests import base64 class TestAIAutomation: pytest.fixture def ai_tester(self): 创建AI测试器实例 return AITestAutomation(http://localhost:8000) def test_login_page_elements(self, ai_tester): 测试登录页面元素 # 截取登录页面 screenshot_path self.capture_screenshot() # 验证必要元素存在 elements_to_check [ 用户名输入框, 密码输入框, 登录按钮, 忘记密码链接 ] for element in elements_to_check: coords ai_tester.ask_ai_to_find_element(screenshot_path, element) assert coords is not None, f未找到元素: {element} print(f找到{element}: {coords}) def test_login_functionality(self, ai_tester): 测试登录功能 # 1. 输入用户名 username_coords ai_tester.ask_ai_to_find_element( login_page.png, 用户名输入框 ) self.click_and_type(username_coords, test_user) # 2. 输入密码 password_coords ai_tester.ask_ai_to_find_element( login_page.png, 密码输入框 ) self.click_and_type(password_coords, test_password) # 3. 点击登录 login_coords ai_tester.ask_ai_to_find_element( login_page.png, 登录按钮 ) self.click(login_coords) # 4. 验证登录成功 success_screenshot self.capture_screenshot() result ai_tester.analyze_screenshot( success_screenshot, 当前页面是否显示登录成功 ) assert 成功 in result or 欢迎 in result6. 实际效果与优势分析6.1 测试效率对比为了让你更直观地了解AI自动化测试的优势我做了个简单的对比测试方式编写时间维护成本适应性学习成本传统坐标定位快高UI一变就失效差低传统元素定位中等中等依赖元素ID一般中等AI视觉定位中等低理解UI语义强中等传统方式的痛点每次UI改动都要重新定位元素不同分辨率设备需要不同脚本动态内容难以处理跨平台测试成本高AI方式的优势通过语义理解定位UI微调不影响测试自动适应不同分辨率能处理动态内容和复杂布局一套脚本跨平台使用6.2 实际测试案例我实际测试了几个场景效果让人印象深刻案例一识别模糊元素有一个按钮设计上就是半透明的传统图像匹配很难准确识别。但STEP3-VL-10B通过理解“登录按钮”这个语义成功找到了它。案例二处理动态内容一个新闻APP的列表页每次刷新内容都不同。传统方式需要定位固定的容器但AI可以直接理解“第一条新闻的标题”这个概念。案例三跨平台测试同一个APP的iOS和Android版本UI布局有差异。用AI测试只需要描述“返回按钮”、“设置菜单”这样的语义不需要为每个平台写不同的定位逻辑。6.3 准确率实测在ScreenSpot-V2测试中92.61分的成绩在实际使用中是什么概念呢我做了个简单的测试用20个不同的APP界面每个界面让模型找5个指定元素总共100次查找。结果准确找到92次部分准确位置稍有偏差5次未找到3次准确率92%这个准确率对于自动化测试来说已经相当不错了。而且那3次未找到的情况都是因为元素太小或者被其他元素遮挡。7. 最佳实践与注意事项7.1 如何提高识别准确率虽然STEP3-VL-10B已经很强大但通过一些技巧我们可以让它的表现更好1. 使用更具体的描述不好“按钮”好“蓝色的登录按钮”更好“右下角的蓝色登录按钮上面有登录文字”2. 提供上下文信息# 在提问时提供更多上下文 question 这是APP的登录页面。 请找到 1. 用户名输入框通常有用户名或账号提示 2. 密码输入框通常是密码格式 3. 登录按钮通常是突出的按钮 3. 多角度验证对于重要的操作可以用多个方式验证def safe_click(self, screenshot_path, element_description): 安全点击先验证再操作 # 方式1直接定位 coords1 self.ask_ai_to_find_element(screenshot_path, element_description) # 方式2通过上下文验证 question f图中是否有{element_description}它在哪里 verification self.analyze_screenshot(screenshot_path, question) # 如果两种方式都确认再执行点击 if coords1 and element_description in verification: self.click(coords1) return True return False7.2 性能优化建议1. 批量处理截图如果有多张截图需要分析可以批量处理减少API调用def batch_analyze_screenshots(self, screenshot_paths, questions): 批量分析多张截图 results [] for path, question in zip(screenshot_paths, questions): result self.analyze_screenshot(path, question) results.append(result) # 添加延迟避免请求过快 time.sleep(0.5) return results2. 缓存识别结果对于不变的界面可以缓存识别结果import hashlib import pickle class CachedAITester: def __init__(self, api_url, cache_fileai_cache.pkl): self.api_url api_url self.cache_file cache_file self.cache self.load_cache() def get_cache_key(self, image_path, question): 生成缓存键 # 使用图片哈希和问题作为键 with open(image_path, rb) as f: image_hash hashlib.md5(f.read()).hexdigest() question_hash hashlib.md5(question.encode()).hexdigest() return f{image_hash}_{question_hash} def ask_with_cache(self, image_path, question): 带缓存的询问 cache_key self.get_cache_key(image_path, question) if cache_key in self.cache: print(使用缓存结果) return self.cache[cache_key] # 调用API result self.ask_ai_to_find_element(image_path, question) # 保存到缓存 self.cache[cache_key] result self.save_cache() return result7.3 常见问题与解决问题1识别速度慢原因图片太大或网络延迟解决压缩图片到合适大小使用本地部署问题2识别不准确原因描述不够具体或界面太复杂解决提供更详细的描述分割复杂界面问题3坐标偏移原因屏幕缩放或截图偏差解决使用相对坐标添加容错机制def click_with_tolerance(self, coords, tolerance10): 带容错的点击 x, y, w, h coords # 在元素中心点附近随机点击避免总是点同一个位置 click_x x w//2 random.randint(-tolerance, tolerance) click_y y h//2 random.randint(-tolerance, tolerance) self.click(click_x, click_y)8. 总结8.1 技术回顾STEP3-VL-10B为APP自动化测试带来了新的可能性。通过视觉理解能力它能够智能定位UI元素不再依赖固定的坐标或ID而是理解元素的语义适应界面变化UI微调不影响测试脚本大大降低维护成本处理复杂场景能够理解界面逻辑完成多步骤测试跨平台兼容一套脚本可以在不同平台使用8.2 实际价值对于测试工程师来说这意味着更快的测试开发不用再花时间定位每个元素更低的维护成本UI改动时测试脚本不需要重写更高的测试覆盖率能够测试更复杂的用户场景更好的测试体验测试更像真实用户操作对于开发团队来说更快的发布周期自动化测试更可靠人工验证时间减少更高的产品质量能够发现更多边缘情况更低的测试成本减少对专业测试工具的依赖8.3 开始你的AI自动化测试之旅如果你也想尝试用AI来做自动化测试我的建议是从小处开始先在一个简单的功能上尝试比如登录页面逐步扩展成功后再扩展到更复杂的场景结合传统方法AI不是万能的结合传统方法效果更好持续优化根据实际效果调整提示词和测试策略STEP3-VL-10B的开源和相对友好的硬件要求让每个团队都有机会尝试这种新的测试方式。它可能不会完全取代传统的自动化测试但绝对是一个强大的补充工具。技术的进步总是这样一开始看起来像魔法用久了就成了日常工具。AI在测试领域的应用才刚刚开始但已经展现出了巨大的潜力。现在轮到你去探索和创造了。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。