CLI+Skill搭建浏览器AI自动化框架，告别一切重复枯燥任务

文章CLI+Skill搭建浏览器AI自动化框架，告别一切重复枯燥任务分享给大家，欢迎收藏极客资料网，专注分享技术知识

视频版：https://www.bilibili.com/video/BV1ooDyBmE6v/

这套流程可以让AI自动操作浏览器，代替你完成一切机械重复性的工作，而且特别的省TOKEN。

很多工作流甚至全程不需要AI参与，0 TOKEN就能把自动化任务跑起来。比如可以0 TOKEN抓取电商网站评论，导出成CSV文件，自动把Markdown文章发布到x，还有对自己开发的Web APP进行AI自动化测试。我们并不需要懂浏览器的相关知识，只用自然语言就能完成这些任务。

本期视频我们使用的Agent框架是Claude Code或者Codex。

浏览器自动化方案是Playwright CLI搭配配套的Skill。

Playwright CLI是26年初微软开源的全新浏览器自动化工具。

Github首页：

https://github.com/microsoft/playwright-cli

根据官方的基准测试，playwright CLI比起传统的playwright MCP方案，差不多能够减少4倍的TOKEN消耗

工具搭建好以后，我们可以把很多固定的工作流程沉淀成skills，让AI能够又快又省的完成任务。甚至熟练后你会发现很多固定流程甚至不需要AI参与，只需要让AI编写好一个固定的脚本，就可以0 TOKEN全自动完成工作。好废话不多说，我们直接开始。

基础使用

在开始之前，我们需要先确保电脑上安装了nodejs。如果没有安装过，可以来到nodejs的官网，根据自己的操作系统下载对应的安装包

https://nodejs.org/en/download

然后我们打开一个命令行终端，输入这个命令安装playwright CLI 。安装完成，下一步我们要确保电脑上安装了Chrome浏览器，如果是edge浏览器也可以，不过最好还是推荐使用Chrome。好这样准备工作就完成了。

我们来测试一下。我们可以使用这个命令，使用Playwright CLI操作Chrome浏览器打开谷歌的官网

playwright-cli open google.com --headed

最后一个参数–headed表示使用的是有头浏览器，如果不加这个参数，Playwright默认使用的是无头浏览器。无头浏览器会在后台静默运行，虽然比较省内存，但是我们看不到浏览器的页面。所以为了方便调试，我们一般加上这个参数–headed。回车，playwright CLI自动操作Chrome打开了我们要的网页 。

我们在控制台这边可以看到，playwright CLI只是输出了一简洁的网页摘要，而没有返回整个网页的全部DOM结构 下面附带了一个网页结构的文件地址 。AI Agent如果需要更详细的网页结构信息，就可以选择读取这个快照文件，获取更详细的信息。如果不需要，就可以选择不读取。这也就是为什么Playwright CLI比起MCP更节省上下文的秘密所在，因为MCP是把网页内容全部塞进上下文，而Playwright CLI可以由AI按需读取。同样这个命令也体现了按需加载的思路，

playwright-cli screenshot

Screenshot是给浏览器截图，我们看到截屏的时候它还是以一个PNG的文件的形式存放在了电脑的本地磁盘上 ，由AI决定是否来读取，而不是像MCP那样直接把图片塞入AI的上下文。我们再介绍一个重要的参数，就是

--persistent。persistent表示把cookie、登录状态、本地存储之类的数据写到磁盘里面，下次使用的时候继续拿出来用，这样就不需要每次都重新登录了。比如这里我带着persistent执行一下

playwright-cli open google.com --headed --persistent

，因为我之前登录过，我们打开的谷歌首页就变成了已经登录过的状态了 到这里我们就介绍完了playwright CLI的基础使用。下一步我们就把它接入AI Agent。

本期视频主要使用的Agent框架是Claude code和Codex。爬爬虾之前有很多期视频介绍Codex或者Claude code了，这里我就不赘述了 。playwright CLI是一个新诞生的命令行工具，AI并不知道该如何使用这些命令，所以我们需要给AI搭配skills来一起使用。

Playright CLI作为技术底座，而skills作为说明文档，CLI加skills搭配起来使用，就可以取代传统的MCP方式，这也是最近的一个技术发展趋势。我们先新建一个项目文件夹，打开这个文件夹，打开命令行终端，我们直接输入这个命令给文件夹里面安装skills

playwright-cli install --skills

这样skills就安装完成了，它放到了我们新建的项目文件夹的目录下面 。然后我们就可以启动Claude Code，我来询问它你有哪些skills，它可以成功的读取到playwright CLI技能，这样我们就成功的把它接入了Claude code 。接下来我们来看另外一个Agent的框架，就是Codex。我们只需要在项目目录里面，把存放skills文件夹的名字从.claude改成.codex，来适配Codex、然后我们还是在这个目录里面打开Codex，在Codex里面可以输入命令/skills，我们看到这里列出了playwright CLI，在Codex里面也配置完成了 我们在Codex里面测试一下基础用法，我让它使用playwright CLI加上这两个参数打开Grok，问问今天青岛的天气怎么样

。AI成功的打开了浏览器，来到了Grok的首页，帮我们自动输入了问题，自动点击了回车，拿到了结果，最终成功打印到了控制台上，任务就完成了 。

进阶实战

我们来看一个复杂一些的例子，使用playwright CLI查看这个商品前100条评论，然后保存到一个CSV文件里面 我们看到AI还是先学习playwright cli技能，然后打开了商品页。第一次运行总是磕磕绊绊的，不过没关系，我们让它自己探索，自己寻找解决思路。AI尝试了很多方案，也浪费了不少TOKEN，我们看到这里显示用掉了41%的上下文窗口，最后成功完成了任务，帮我们获取到了这个CSV文件，成功抓取到了这么100条数据 我们有两种方式可以把这个流程总结并且保存下来，让它下一次执行变得更加丝滑，更加省TOKEN。我们先来看第一个方式，就是把这个过程保存成一个skill。这里输入提示词

创建一个新的skill，把刚才打开网站，查看评论，并且保存评论的全过程，还有遇到的坑都提炼出来，保存到这个skills里面，后面我只要让你保存评论，你就能调用这个skill完成任务。AI帮我们创建了skill，

AI帮我们创建了skill，把这个任务里面可以复用的内容都固化进了知识。这里我让他修改一下，把skill放到项目目录里面skill成功放到了项目目录下面，现在我们有两个skill了，一个是playwright CLI，还有一个就是刚才保存评论那个流程的skill。这里我先清理一下上下文，我们再用相同的任务来测试一下 有了skills的指导以后，效果就不一样了。AI充分吸取了之前的经验，没有再出现多余的动作，也没有报错，用最低的TOKEN消耗，完美的完成了任务 我们第一次让AI自己摸索，自己试错，用了41%的上下文才完成了任务，第二次有了skills的指导，只用了5%的上下文就完成了任务 通过把过程提炼总结成skills，获得了将近10倍的效率提升。

抓取评论是一个固定流程，其实并不需要AI进行智能化的控制。我们可以直接把它编写成一个固定的脚本。这里输入提示词

你把刚才所有的playwright cli命令汇总成一个脚本，执行脚本就能获取商品的前100条评论，并且保存到一个CSV文件里面。注意每一步都要有合理的延时与等待，确保任务成功。脚本写完你先测试一轮。

很快Codex为我们编写完成了脚本，它已经自己测试通过了。我们来看一下这个脚本长什么样 在我这个Windows电脑上就是这么一个Powershell的脚本 AI以编程的方式把刚才的步骤都固定下来了。比如第一步打开商品页面，第2步确认浏览器里打开的是正确的URL，第四步点击查看全部评价按钮，第六步执行这个JS脚本获取评论，最后一步把刚才的JSON数据保存成一个CSV文件。我们也来测试一下。我们打开一个命令行终端，输入这个Powershell脚本的路径，回车执行 这是一个固定的流程，中间没有AI的参与。我们看到这次不再依赖Codex了，直接执行这个Powershell脚本 0TOKEN，0成本就完成了任务，还取得了相同的效果 好我们来总结一下这套浏览器自动化的流程 。在准备阶段，我们先安装nodejs，playwright CLI还有Chrome浏览器。第二步选择你喜爱的AI Agent工具，把playwright CLI的skill安装进去。第三步给AI一个复杂的任务，让它自己摸索并且执行完。第四步让AI把刚才的执行结果提炼总结成skill，之前遇到的坑就不要再踩了。第五步重试相同的任务，AI在skills的指导下可以把TOKEN的消耗降低10倍。如果是完全固定化的流程，还可以继续进行第六步，让AI把这个过程直接编写成一个脚本。有了脚本以后，我们甚至可以直接执行这个脚本，完成任务，完全不需要AI参与，把TOKEN消耗直接降低到了0。

自动发文

我们再来看一个实战案例。最近爬爬虾把自己的视频用AI转成图文教程，然后发到各个平台上面。大部分平台发文章都比较简单，唯独有一个平台X，发文章的步骤非常的繁琐。这是我的一个Markdown格式的笔记文章 我们注意到这个文章是不能直接以Markdown格式粘贴过来的，首先这个格式会错乱，第二个问题是图片都展示不出来。然后我又测试了一下，如果使用html格式是可以粘贴的，但是又出现了一个新的问题，图片是粘贴不过来的，图片都变成了这么一个照相机的小符号 我们只能手动先把小照相机删除，然后把图片复制一下，一张张的手动粘贴过来，非常的麻烦。接下来我们就使用前面介绍的自动化流程，把这个发文章的全过程进行AI自动化。这里我还是使用Codex，

帮我编写一个Python脚本，把文章里的图片下载到本地，从001开始编号，放到这个文件夹里面，先转换成一个只使用本地图片的Markdown文章，然后运行pandoc把本地图片的Markdown文章转换成html格式。注意html格式里面每张图都应该是独立段落。

开始AI帮我们编写好了脚本，并且为我们转换好了文章，我们来看一下。图片都放到了这个images文件夹下面，而且已经把文章转换成了html格式的 好下一步我们就可以让AI来帮我们自动发文了。我们输入提示词

使用playwright CLI，先打开这个网站，创建一个新的文章，然后把这个html的内容粘贴进去，找到所有的这种照相机的这种小图标的位置，先按退格键删除掉小图标，然后在图片文件夹里面找到图片，先复制出来，按Ctrl+V，再粘贴进去。这个小icon的数量跟图片的数量是相等的，我需要它按顺序替换。

好我们开始。AI为我们打开了浏览器，创建了一个新的草稿，把html格式的文章粘贴进去了，然后它开始为我们一张张的上传图片，把原来的占位符删除掉，然后一张张的替换成真正的图片。我们看到它正在一张张的帮我们自动化的替换，整个过程非常的顺利。我让AI把从头开始的全流程整理成一个skill，然后放到项目目录，以后我只要给你一个文章，就能自动发布。AI帮我们固化了一个skill。AI为我们编写好了技能，生成了这些配套的脚本 然后这个skills就可以覆盖自动发稿的全流程。以后我只要给他一个文章路径，告诉他使用这个skill自动发布，它就能自动的帮我把这个文章发布上去，非常的棒 这个skill的源代码我已经上传到了Github的这个仓库下面

https://github.com/tech-shrimp/x-article-auto-publisher-skill

感兴趣的观众朋友们，可以来参考试一下。不过我这个是Windows电脑的，如果是其他操作系统，可以让AI参考这个skill来改一下。相信按照我这套流程，大家都可以编写出属于自己的skill。

AI 自动化测试

我们这套浏览器自动化流程，一个重要的应用就是对自己写的Web APP进行自动化测试。比如这里我开发了一个简历润色美化的网页APP 。接下来我输入指令

阅读代码，把从注册开始的主体流程写一个中文的测试文档，然后再用playwright CLI打开网页，根据你的测试用例完成测试。

AI通过阅读代码学习到了这个项目的功能，然后确认了主体流程。接下来它开始编写测试文档。测试文档编写好了，这里包含第一步做什么，第二步做什么，第三步做什么 然后AI使用Playright CLI打开了浏览器，它自动点击了注册按钮，创建了测试账号，完成了登录。它创建了一份测试简历，并且上传上来了，完成了主体流程的测试。测试结论是通过 。

我们也可以要求AI编写更多的测试用例，使用playwright CLI进行全自动的测试。还可以使用OpenClaw这种带定时任务的Agent框架，让它定时对我们的系统进行测试。一旦我们修改出来了bug，AI就能全自动的发现并且告诉我们，省去了很多的人工测试成本，对我们开发网页APP会很有帮助。好这就是本期视频全部内容了，感谢大家点赞支持，我们下期再见。

文章来源:https://www.cnblogs.com/tech-shrimp/p/19860693
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！