关注我~第一时间学习如何更好地使用AI。
重要的不是我们是否会被AI替代，
而是我们要比被替代的人更懂AI。
最近，Microsoft推出了官方版的playwright-mcp。
playwright是一个能够操作浏览器完成各项任务的工具，专业人士一般将其作为网络应用的测试工具，而对我们普通人来说，把它当成一个类爬虫的RPA（即Robotic Process Automation，机器人流程自动化）工具倒是蛮不错的。
其实在我关于MCP的第一篇文章中，就使用playwright实现了一个登录指定网页截图的效果。鉴于Microsoft版的工具设计与当时使用的第三方mcp有非常大的区别（这里发生了一个小插曲，大家可以在文末看个乐呵），我打算再为大家挖掘一下，如何使用playwright进行更复杂的操作。
于是，接下来我要展示的，是让模型使用playwright-mcp工具，到我指定的上交所官网上，根据我给出的股票代码，查询其发布的2024年年度报告，并把下载链接发给我。
（设备太渣，为了节省大家时间，小加了点速）
需要说明的是，我测试了很多次，都没法实现利用playwright直接下载特定文件。大家可以看到，视频中它其实已经准确地执行了点击下载链接的动作，但还是没法实现直接下载，它只能给我下载链接。
虽然配合使用迅雷等工具，点击这个链接也算自动下载了，但多少还是有点不完美。希望有知道怎么解决这个问题的朋友在留言区指导、解惑。
视频中使用的工具如下：
Microsoft官方Playwright-mcp的工具概览
话不多说，首先，带着大家简单过一下官方版的工具。（大家注意，版本非常重要，如果你使用的是executeautomation开发的mcp，它的参数是以CSS选择器为核心的，逻辑会跟微软版的不一样。对于纯小白来说，微软版用起来更简单些。）
我梳理了一下，基本上以下这几个工具就能满足咱们大部分的需求了。其中，参数和参数意义，对于我们准确控制模型的行为非常重要，大家可以在后面我的提示词中明白该怎么操作，现在可以先感受一下。
MCP配置
请大家参考下图在Cherry Studio中进行基本配置。（不熟悉基础操作的同学请参考这篇文章：Cherry Studio重大版本更新！手把手教你丝滑配置MCP服务器！）
值得一提的是，微软发布了几个版本的mcp，包括headless版、vision版。
headless版就是在参数里加一段--headless，效果就是它不会真的打开一个浏览器，而是通过程序化的方式在后台执行网页加载、渲染、交互等操作。
vision版则是在参数里加一段--vision，它的效果貌似是，如果你对页面布局，比如某个按钮元素的x、y坐标非常清楚，那么可以直接通过告知模型元素坐标的方式来精确控制行为。
本文只使用默认版本，有兴趣的朋友可以自行探索。
Playwright-mcp使用实操
1.梳理工作流
之所以要使用这种全自动化的工具，就是为了让我们从步骤固定，重复的任务中解放出来。
因此，你首先需要根据自己的需求，登录网址手动操作一遍，并且从头到尾一步步地分析记录你用鼠标点击了哪些元素、用键盘完成了什么输入。
比如在我的示例中，我要下载一个指定公司的24年年度报告的话，要做的就是以下几步：
1.打开网址；
2.输入证券代码；
3.输入年度报告等关键字；
4.选择要下载的文件；
5.点击下载按钮。
2.编写Prompt
接下来，我们就需要根据playwright的各种工具及其参数要求，来将上述工作流转化成一套系统Prompt。
为了保证操作的准确性，我使用“序号”明确操作顺序，然后直接指定模型在各步骤要使用的工具，及对应的参数要求。
因为是用自然语言描述element，所以就非常直观，大家对照着我上面那个页面截图，再看看提示词就懂了：
当用户向你发送一个证券代码后，你应该按顺序执行以下指令：
1.打开https://www.sse.com.cn/disclosure/listedinfo/announcement/；
2.使用type工具，其中element:"6位代码/简称";text:输入用户给出的证券代码；submit:true
3.使用type工具，其中element:"标题/关键字";text:2024年年度报告;submit:true
4.使用clic工具，其中element:"2024年年度报告"
5.将2024年年度报告的下载链接给我
如前文所述，我测试了很多次，都没法实现利用playwright直接下载特定文件，它只能给我下载链接，所以我直接把最后一步明确为给我连接了。
最后，把这段提示，放到Cherry Studio助手的提示词设置中（点击红框那个位置），就可以愉快地玩耍了。
小插曲
最后，再给大家讲个笑话，虽然有点不恰当，但这某种意义上也是当前AI技术飞速发展的一个缩影......
故事是这样的，playwright其实是我装的最早的一批mcp服务器之一，我的系列文章第一篇中，就演示了如何利用它来操纵浏览器截图。
当时我装的是由一个叫executeautomation的组织开发的mcp。
鉴于浏览器自动操作、RPA机器人爬取信息是一种非常有利于提升工作效率的技术，于是我想着深入学习一下playwright-mcp，看看如何利用它玩出更多的花样。
经过仔细研读文档后我发现，精细控制playwright行为的关键，就在于准确指定要操作元素的CSS选择器。
于是，我给大家写好了一套萌新也能看懂的，基于HTML标签属性，来准确控制playwright行为的教程。
接着，悲伤的事情发生了。我忽然发现，Microsoft发布了自家的官方版playwright-mcp。天真的我想着，emmm，那应该，大差不差的吧，试试官方的看看，讲不定效果更好呢~~
然而，在同样的提示词、指令，模型却出现一堆诡异操作甚至报错后，我不禁黑人问号.....
细看文档后发现，Microsoft家的官方版本，貌似采用了另一套工具，不需要复杂的CSS选择器，直接用自然语言描述即可控制playwright的行为......
显然，虽然了解点基础的HTML、CSS知识蛮好的，但肯定还是用自然语言描述需求，更有利于提高大家的工作效率。
于是，我又重写了现在这一版。
好了，以上就是本期的主要内容，祝大家玩得开心~！
—— END——
往期精华：
1.MCP使用
Cherry Studio重大版本更新！手把手教你丝滑配置MCP服务器！
Windows下通过Cherry Studio使用MCP的常见问题处理思路
想玩玩极简版AI Agent？MCP就够了！手把手教你用Cherry Studio整活~
萌新指南｜手把手教你Cherry Studio配置MCP，10分钟让大模型学会上网截图！
高德、彩云MCP全体验：让Cherry Studio化身私人小助理的喂饭版指南！
2.Workflow编排
AI工作流编排手把手指南之一：Coze智能体的创建与基本设置
AI工作流编排手把手指南之二：Coze智能体的插件添加与调用
3.Prompt设计
打工人看了流泪的Prompt设计原理，如何用老板思维让AI一次听懂需求？
不会Prompt还敢说自己会用DeepSeek？别怕！10分钟让你成为提示大神！
4.AI工具指南