ttps://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 screenshotScreenshot是给浏览器截图我们看到截屏的时候它还是以一个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方式这也是最近的一个技术发展趋势。我们先新建一个项目文件夹打开这个文件夹打开命令行终端我们直接输入这个命令给文件夹里面安装skillsplaywright-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帮我们创建了skillAI帮我们创建了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脚本 0TOKEN0成本就完成了任务还取得了相同的效果好我们来总结一下这套浏览器自动化的流程 。在准备阶段我们先安装nodejsplaywright 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的内容粘贴进去找到所有的这种照相机的这种小图标的位置先按退格键删除掉小图标然后在图片文件夹里面找到图片先复制出来按CtrlV再粘贴进去。这个小icon的数量跟图片的数量是相等的我需要它按顺序替换。好我们开始。AI为我们打开了浏览器创建了一个新的草稿把html格式的文章粘贴进去了然后它开始为我们一张张的上传图片把原来的占位符删除掉然后一张张的替换成真正的图片。我们看到它正在一张张的帮我们自动化的替换整个过程非常的顺利。我让AI把从头开始的全流程整理成一个skill然后放到项目目录以后我只要给你一个文章就能自动发布。AI帮我们固化了一个skill。AI为我们编写好了技能生成了这些配套的脚本然后这个skills就可以覆盖自动发稿的全流程。以后我只要给他一个文章路径告诉他使用这个skill自动发布它就能自动的帮我把这个文章发布上去非常的棒这个skill的源代码我已经上传到了Github的这个仓库下面GitHub - tech-shrimp/x-article-auto-publisher-skill: Skill: 自动把markdown格式文章发布到X · GitHub感兴趣的观众朋友们可以来参考试一下。不过我这个是Windows电脑的如果是其他操作系统可以让AI参考这个skill来改一下。相信按照我这套流程大家都可以编写出属于自己的skill。AI 自动化测试我们这套浏览器自动化流程一个重要的应用就是对自己写的Web APP进行自动化测试。比如这里我开发了一个简历润色美化的网页APP。接下来我输入指令阅读代码把从注册开始的主体流程写一个中文的测试文档然后再用playwright CLI打开网页根据你的测试用例完成测试。AI通过阅读代码学习到了这个项目的功能然后确认了主体流程。接下来它开始编写测试文档。测试文档编写好了这里包含第一步做什么第二步做什么第三步做什么然后AI使用Playright CLI打开了浏览器它自动点击了注册按钮创建了测试账号完成了登录。它创建了一份测试简历并且上传上来了完成了主体流程的测试。测试结
ill搭建浏览器AI自动化框架，告别一切重复枯燥任务
ttps://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 screenshotScreenshot是给浏览器截图我们看到截屏的时候它还是以一个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方式这也是最近的一个技术发展趋势。我们先新建一个项目文件夹打开这个文件夹打开命令行终端我们直接输入这个命令给文件夹里面安装skillsplaywright-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帮我们创建了skillAI帮我们创建了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脚本 0TOKEN0成本就完成了任务还取得了相同的效果好我们来总结一下这套浏览器自动化的流程 。在准备阶段我们先安装nodejsplaywright 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的内容粘贴进去找到所有的这种照相机的这种小图标的位置先按退格键删除掉小图标然后在图片文件夹里面找到图片先复制出来按CtrlV再粘贴进去。这个小icon的数量跟图片的数量是相等的我需要它按顺序替换。好我们开始。AI为我们打开了浏览器创建了一个新的草稿把html格式的文章粘贴进去了然后它开始为我们一张张的上传图片把原来的占位符删除掉然后一张张的替换成真正的图片。我们看到它正在一张张的帮我们自动化的替换整个过程非常的顺利。我让AI把从头开始的全流程整理成一个skill然后放到项目目录以后我只要给你一个文章就能自动发布。AI帮我们固化了一个skill。AI为我们编写好了技能生成了这些配套的脚本然后这个skills就可以覆盖自动发稿的全流程。以后我只要给他一个文章路径告诉他使用这个skill自动发布它就能自动的帮我把这个文章发布上去非常的棒这个skill的源代码我已经上传到了Github的这个仓库下面GitHub - tech-shrimp/x-article-auto-publisher-skill: Skill: 自动把markdown格式文章发布到X · GitHub感兴趣的观众朋友们可以来参考试一下。不过我这个是Windows电脑的如果是其他操作系统可以让AI参考这个skill来改一下。相信按照我这套流程大家都可以编写出属于自己的skill。AI 自动化测试我们这套浏览器自动化流程一个重要的应用就是对自己写的Web APP进行自动化测试。比如这里我开发了一个简历润色美化的网页APP。接下来我输入指令阅读代码把从注册开始的主体流程写一个中文的测试文档然后再用playwright CLI打开网页根据你的测试用例完成测试。AI通过阅读代码学习到了这个项目的功能然后确认了主体流程。接下来它开始编写测试文档。测试文档编写好了这里包含第一步做什么第二步做什么第三步做什么然后AI使用Playright CLI打开了浏览器它自动点击了注册按钮创建了测试账号完成了登录。它创建了一份测试简历并且上传上来了完成了主体流程的测试。测试结
![英雄联盟终极工具箱：5分钟快速掌握League Akari的完整使用指南 [特殊字符]](http://pic.xiahunao.cn/yaotu/英雄联盟终极工具箱：5分钟快速掌握League Akari的完整使用指南 [特殊字符])
 获取与实战)
双梁正问题 【 torch 实战】（Python代码实现）)
