支持私有云部署
AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


30行代码让DeepSeek做Web自动化测试

发布日期:2025-03-25 06:55:22 浏览次数: 1583 来源:测试沉思录
推荐语

快速实现Web自动化测试的高效工具,DeepSeek与Browser-use结合,开启自动化测试新篇章。

核心内容:
1. AI技术与Web自动化测试的融合趋势
2. Browser-use的工作原理及其技术栈
3. 实操教程:安装依赖和配置API密钥

杨芳贤
53A创始人/腾讯云(TVP)最具价值专家

(一)背景


在AI技术快速发展的今天,大模型与自动化工具的深入融合正在重塑传统工作流程。作为质量保证的重要技术手段,Web自动化测试在企业落地过程中却始终面临着脚本编写工作量大、用例维护成本高的问题。Browser-use应运而生,通过将Playwright浏览器控制框架与LLMs的自然语言理解能力相结合,开创性地实现了"自然语言驱动浏览器操作"的自动化范式,通过自然语言描述任务即可让DeepSeek等先进模型完成网页导航、元素操作、数据提取等全流程任务,为软件测试工程师提供了零门槛的智能自动化测试解决方案。


(二)什么是Browser-use


Browser-use 是一个开源的网页自动化库,其核心目标是通过标准化接口让LLMs(如GPT-4、Claude、DeepSeek等)与网页交互,从而执行复杂的浏览器任务。它结合了浏览器自动化工具(如Playwright)和LLMs的推理能力,允许用户通过自然语言描述的指令实现对浏览器的自动化操作。

Browser-use 的典型应用场景包括数据采集、自动化测试、在线订票、企业信息检索等,尤其适合需要高频操作网页的任务。

Browser-use采用的技术栈为:

1)Observation:页面解析层,采用DOM解析+截图辅助的非视觉+视觉方案。

  • DOM解析(HTML + XPath):Browser-use通过底层框架(如Playwright)获取当前页面的完整HTML结构,并提取文本、元素属性等关键信息。

  • 截图辅助:在某些情况下(如验证码识别、动态图形验证),纯HTML解析可能无法直接获取信息,此时系统会自动或按需生成页面截图,并将截图作为辅助输入传递给视觉模型

2)Thought:核心决策层,分析Observation提供的页面信息并生成操作指令。

Browser-use基于LangChain构建,官方建议采用gpt-4o作为主模型,但目前也支持任何LangChain兼容的模型(如Claude 3.5、Llama 3.1等),包括DeepSeek等国产或第三方模型。(提示:Web Agent对大模型推理与结构化输出能力要求很高,低参数的开源模型,如果不经过针对性的微调,可能无法直接在这里使用)

3)Action:指令执行层,微软开发的Playwright作为浏览器控制框架直接与浏览器交互完成自动化任务。Playwright作为新一代高性能UI自动化测试框架,提供低延迟、高稳定性的浏览器控制能力,支持快速页面加载和元素操作。


(三)实操教程


1. 安装依赖

Python 3.11+,安装browser-use、playwright及DeepSeek依赖:

pip install browser-use playwrightplaywright install  # 安装浏览器内核

2. 配置API密钥

在项目根目录创建.env文件,添加DeepSeek API密钥:

DEEPSEEK_API_KEY=sk-your-key-here


3.代码实现

from langchain_openai import ChatOpenAIfrom browser_use import Agentimport asyncio, osfrom dotenv import load_dotenv# 加载环境变量load_dotenv()async def main():    # 初始化DeepSeek V3模型    llm = ChatOpenAI(        base_url='https://api.deepseek.com/v1',        model='deepseek-chat',          api_key=os.environ.get('API_KEY')  # 替换为实际API密钥    )    # 创建Agent并定义UI测试任务    agent = Agent(        task="""        1. 访问新浪官网首页(https://www.sina.com.cn/)        2. 点击导航栏的“时尚”菜单        3. 列出“最新”板块中前十条新闻的标题和发布时间,        用json格式返回结果,示范格式如下:        [ { title: '时尚板块最新新闻标题1', publish_time: '3月3日 13:20'}]        """,        llm=llm,         use_vision=False  # 禁用视觉模式,依赖DOM解析    )    # 执行任务后输出结果    result = await agent.run()    print("\n======== 测试结果 ========")    print(result.final_result())asyncio.run(main())

(四)运行结果


运行日志中可以看到非常清晰的agent分步推理过程和执行步骤:

INFO     [agent] ? Starting task:         1. 访问新浪官网首页(https://www.sina.com.cn/)        2. 点击导航栏的“时尚”菜单        3. 列出“最新”板块中前十条新闻的标题和发布时间,        用json格式返回结果,示范格式如下:        [ { title: '时尚板块最新新闻标题1', publish_time: '3月3日 13:20'}]        INFO     [agent] ? Step 1INFO     [agent] ? Eval: Unknown - Starting the taskINFO     [agent] ? Memory: Starting the task. 0 out of 10 steps completed.INFO     [agent] ? Next goal: Navigate to the Sina homepageINFO     [agent] ?️  Action 1/1: {"go_to_url":{"url":"https://www.sina.com.cn/"}}INFO     [controller] ?  Navigated to https://www.sina.com.cn/INFO     [agent] ? Step 2INFO     [agent] ? Eval: Success - Navigated to the Sina homepageINFO     [agent] ? Memory: 1 out of 10 steps completed. Next step is to click on the 'Fashion' menu in the navigation bar.INFO     [agent] ? Next goal: Click on the 'Fashion' menu in the navigation barINFO     [agent] ?️  Action 1/1: {"click_element":{"index":52}}INFO     [controller] ?️  Clicked button with index 52: 时尚INFO     [agent] ? Step 3ERROR    [browser] Failed to update state: 'None'INFO     [agent] ? Eval: Success - Clicked on the 'Fashion' menuINFO     [agent] ? Memory: 2 out of 10 steps completed. Next step is to extract the titles and publish times of the top 10 news articles in the 'Latest' section.INFO     [agent] ? Next goal: Extract the titles and publish times of the top 10 news articles in the 'Latest' sectionINFO     [agent] ?️  Action 1/1: {"extract_content":{"goal":"Extract the titles and publish times of the top 10 news articles in the 'Latest' section"}}INFO     [controller] ?  Extracted from page: ```json{  "titles_and_publish_times": [    {      "title": "太超前!预制换季穿搭,解锁早春的第一件外套",      "publish_time": "3月3日 13:20"    },    {      "title": "地母系和秋风感美人的穿搭秘籍,你get了吗?",      "publish_time": "3月3日 13:17"    },    {      "title": "“衬”来“衬”去,适合春天的衬衣叠穿!",      "publish_time": "3月3日 13:14"    },    {      "title": "韩女今年挚爱宽松呼吸感?穿出独特松弛氛围!",      "publish_time": "3月3日 13:08"    },    {      "title": "牛仔配牛仔?全身牛仔look只会让你更时髦!",      "publish_time": "2月24日 14:41"    },    {      "title": "徐娇出圈的国风穿搭,行走的马面裙种草机!",      "publish_time": "2月24日 14:36"    },    {      "title": "梨形身材救星?黑色长靴的扬长避短大法!",      "publish_time": "2月24日 14:30"    },    {      "title": "动物纹穿搭,优雅和性感都是信手拈来!",      "publish_time": "2月24日 14:26"    },    {      "title": "气温变化大穿什么?这个春天从“长裤”穿起!",      "publish_time": "2月17日 14:59"    },    {      "title": "《哪吒2》带火的中式穿衣!中国人有自己的老钱风",      "publish_time": "2月17日 14:54"    }  ]}```INFO     [agent] ? Step 4INFO     [agent] ? Eval: Success - Extracted the titles and publish times of the top 10 news articles in the 'Latest' sectionINFO     [agent] ? Memory: 3 out of 10 steps completed. The task is now complete.INFO     [agent] ? Next goal: Complete the taskINFO     [agent] ?️  Action 1/1: {"done":{"text":"[{\"title\": \"太超前!预制换季穿搭,解锁早春的第一件外套\", \"publish_time\": \"3月3日 13:20\"}, {\"title\": \"地母系和秋风感美人的穿搭秘籍,你get了吗?\", \"publish_time\": \"3月3日 13:17\"}, {\"title\": \"“衬”来“衬”去,适合春天的衬衣叠穿!\", \"publish_time\": \"3月3日 13:14\"}, {\"title\": \"韩女今年挚爱宽松呼吸感?穿出独特松弛氛围!\", \"publish_time\": \"3月3日 13:08\"}, {\"title\": \"牛仔配牛仔?全身牛仔look只会让你更时髦!\", \"publish_time\": \"2月24日 14:41\"}, {\"title\": \"徐娇出圈的国风穿搭,行走的马面裙种草机!\", \"publish_time\": \"2月24日 14:36\"}, {\"title\": \"梨形身材救星?黑色长靴的扬长避短大法!\", \"publish_time\": \"2月24日 14:30\"}, {\"title\": \"动物纹穿搭,优雅和性感都是信手拈来!\", \"publish_time\": \"2月24日 14:26\"}, {\"title\": \"气温变化大穿什么?这个春天从“长裤”穿起!\", \"publish_time\": \"2月17日 14:59\"}, {\"title\": \"《哪吒2》带火的中式穿衣!中国人有自己的老钱风\", \"publish_time\": \"2月17日 14:54\"}]","success":true}}INFO     [agent] ? Result: [{"title": "太超前!预制换季穿搭,解锁早春的第一件外套", "publish_time": "3月3日 13:20"}, {"title": "地母系和秋风感美人的穿搭秘籍,你get了吗?", "publish_time": "3月3日 13:17"}, {"title": "“衬”来“衬”去,适合春天的衬衣叠穿!", "publish_time": "3月3日 13:14"}, {"title": "韩女今年挚爱宽松呼吸感?穿出独特松弛氛围!", "publish_time": "3月3日 13:08"}, {"title": "牛仔配牛仔?全身牛仔look只会让你更时髦!", "publish_time": "2月24日 14:41"}, {"title": "徐娇出圈的国风穿搭,行走的马面裙种草机!", "publish_time": "2月24日 14:36"}, {"title": "梨形身材救星?黑色长靴的扬长避短大法!", "publish_time": "2月24日 14:30"}, {"title": "动物纹穿搭,优雅和性感都是信手拈来!", "publish_time": "2月24日 14:26"}, {"title": "气温变化大穿什么?这个春天从“长裤”穿起!", "publish_time": "2月17日 14:59"}, {"title": "《哪吒2》带火的中式穿衣!中国人有自己的老钱风", "publish_time": "2月17日 14:54"}]INFO     [agent] ✅ Task completedINFO     [agent] ✅ Successfully

(五)效果展示与解读


1. 首先,Agent解读任务信息并拆解出第一步操作:

{"go_to_url":{"url":"https://www.sina.com.cn/"}}

接到指令的playwright会自动打开浏览器并导航至新浪首页(刚开始有短暂的白屏,需耐心等一小会儿)

图片.png


2. Browser use解析HTML并识别出页面上的各种可定位的元素,给每个元素一个编号。然后Agent在元素中找到“时尚”菜单对应的编号为52,生成下一步点击指令:

{"click_element":{"index":52}}

图片.png

3.playwright点击“时尚”菜单,页面跳转至新浪时尚专栏页面:

图片.png

4.Browser use继续解析HTML并识别出页面上的各种可定位的元素, 在页面中查找“最新”板块中前十条新闻,并提取新闻标题和发布时间,然后生成下一步指令:

{"extract_content":{"goal":"Extract the titles and publish times of the top 10 news articles in the 'Latest' section"}}

图片.png

5.最终返回符合要求的json格式化输出(可以和网页界面上对比一下,结果是完全准确的!!!)

[    {      "title": "太超前!预制换季穿搭,解锁早春的第一件外套",      "publish_time": "3月3日 13:20"    },    {      "title": "地母系和秋风感美人的穿搭秘籍,你get了吗?",      "publish_time": "3月3日 13:17"    },    {      "title": "“衬”来“衬”去,适合春天的衬衣叠穿!",      "publish_time": "3月3日 13:14"    },    {      "title": "韩女今年挚爱宽松呼吸感?穿出独特松弛氛围!",      "publish_time": "3月3日 13:08"    },    {      "title": "牛仔配牛仔?全身牛仔look只会让你更时髦!",      "publish_time": "2月24日 14:41"    },    {      "title": "徐娇出圈的国风穿搭,行走的马面裙种草机!",      "publish_time": "2月24日 14:36"    },    {      "title": "梨形身材救星?黑色长靴的扬长避短大法!",      "publish_time": "2月24日 14:30"    },    {      "title": "动物纹穿搭,优雅和性感都是信手拈来!",      "publish_time": "2月24日 14:26"    },    {      "title": "气温变化大穿什么?这个春天从“长裤”穿起!",      "publish_time": "2月17日 14:59"    },    {      "title": "《哪吒2》带火的中式穿衣!中国人有自己的老钱风",      "publish_time": "2月17日 14:54"    }  ]

(六)技术解析


1.模型配置

通过ChatOpenAI类兼容DeepSeek API,指定base_url和模型名称(如deepseek-chat)。use_vision=False表示仅解析DOM结构,适合非视觉依赖的自动化操作。这里主推理模型的DeepSeek需要是 V3而非R1,因为R1没有function call的能力。


2.任务指令设计

任务描述需符合自然语言逻辑,分步骤明确操作目标(如点击、滚动、数据验证)。Agent会自动分解任务为“观察-决策-执行”循环。

执行过程:

a. Agent会依次完成以下操作:打开浏览器并导航至指定URL

b. 解析页面元素(通过DOM选择器或文本匹配)

c. 执行点击、滚动等交互动作

d. 提取数据并进行逻辑判断


3.结果输出与断言

final_result()返回结构化数据,符合提示词中的定义,适合进一步进行解析和断言。比如,可以使用python的assert做如下断言:

#json解析res = json.loads(result.final_result())assert len(res) == 10, f"实际获取新闻数量不足,预期10条,实际{len(result.final_result())}条" for news_item in res:  # 检查前十条        assert 'title' in news_item, "新闻条目缺少标题字段"        assert 'publish_time' in news_item, "新闻条目缺少发布时间字段"        assert news_item['title'].strip(), "新闻标题内容为空"        assert news_item['publish_time'].strip(), "发布时间内容为空"

(七)进阶优化


1.自动失败重试

UI自动化测试总是不稳定怎么办?没关系,可以添加异常处理逻辑,如页面加载失败自动重试:

agent = Agent(    task="...",    llm=llm,    max_failures = 3, # 失败时自动重试次数	retry_delay = 10,  #重试间隔时间)

2.自定义浏览器配置

playwright install命令自动下载了各种浏览器驱动。可以通过BrowserContextConfig可以自定义各种浏览器配置。

from browser_use.browser.context import BrowserContextConfig config = BrowserContextConfig(    cookies_file="path/to/cookies.json",    wait_for_network_idle_page_load_time=3.0,    browser_window_size={'width': 1280, 'height': 1100},    locale='en-US',    user_agent='Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36',    highlight_elements=True,    viewport_expansion=500,    allowed_domains=['google.com', 'wikipedia.org'],)context = BrowserContext(browser=Browser(), config=config) async def run_search():	agent = Agent(		browser_context=context,		task='Your task',		llm=llm ...)

3. 使用deepseek-r1作为planner规划者

虽然R1不能直接作为agent的主推理模型,但可以作为planner(规划者),对于任务进行高层次的分析和拆解,指导主推理模型更好地完成任务。使用方法非常简单,只需定义一个planner模型然后传入参数

planner = ChatOpenAI(        base_url='https://api.deepseek.com/v1',        model='deepseek-reasoner',        api_key=os.environ.get('API_KEY')    )       agent = Agent(        task="...",        planner_llm=planner,        llm=llm, use_vision=False    )

执行过程日志中可以看到,有R1推理过程,考虑了很多行动细节,比如首次打开页面可能会加载失败,所以需要验证页面加载成功;子菜单结构可能需要鼠标悬浮交互等等:

INFO     [agent] Planning Analysis:```json{    "state_analysis": "Browser is currently on an empty page (about:blank), first step of accessing https://www.sina.com.cn/ not yet initiated",    "progress_evaluation": "0% - Initial navigation step not completed",    "challenges": [        "Browser not yet navigated to target URL",        "Potential page loading issues after navigation",        "https://www.sina.com.cn/",bility uncertainty before page inspection"    ],    "next_steps": [        "Navigate to https://www.sina.com.cn/",        "Verify successful page load of Sina homepage"    ],    "reasoning": "The fundamental prerequisite for all subsequent actions is first loading the Sina homepage. Without completing this initial navigation step, none of the required elements (navigation bar, Fashion menu) can be accessed. Page load verification ensures stable environment for next steps."}```


(八)其他实践建议

1.复杂任务需原子化拆解,采用多agent串行/并行执行,提高任务的可控性和成功率

2.可以进一步整合pytest等测试框架,并与CI/CD流水线集成

3.可考虑与AI测试用例生成工具联动,形成端到端的一站式AI测试平台


53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询