Playwright MCP原理以及与Midscene.js的区别

Posted on Edited on

Playwright-MCP原理

Playwright有一个page._snapshotForAI方法，为html生成如下格式的字符串，基于html的aria也就是语义生成的，每个节点有个ref，ref是唯一的，元素的实现是通过这个ref来实现。

以下是通过page._snapshotForAI方法为 https://playwright.dev/ 生成的部分字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- generic [ref=e2]:
  - region "Skip to main content":
    - link "Skip to main content" [ref=e4] [cursor=pointer]:
      - /url: "#__docusaurus_skipToContent_fallback"
  - navigation "Main" [ref=e5]:
    - generic [ref=e6]:
      - generic [ref=e7]:
        - link "Playwright logo Playwright" [ref=e8] [cursor=pointer]:
          - /url: /
          - img "Playwright logo" [ref=e10] [cursor=pointer]
          - generic [ref=e11] [cursor=pointer]: Playwright
        - link "Docs" [ref=e12] [cursor=pointer]:
          - /url: /docs/intro
        - link "API" [ref=e13] [cursor=pointer]:
          - /url: /docs/api/class-playwright
        - button "Node.js" [ref=e15] [cursor=pointer]
        - link "Community" [ref=e16] [cursor=pointer]:
          - /url: /community/welcome

缺点

  1. 假如网站内容多，生成的snapshot就很大，与大模型交互的所需要的token就多，会存在费用高，token数限制的问题。
  2. 假如网站没做好aria无障碍，可能会存在识别精度低的问题。

与Midscene.js的区别

  1. 定位准确度
    整体差不多，Playwright-MCP为每个节点生成ref，基于ref定位，而Midscene.js基于视觉大模型获取boundingBox，然后进行范围匹配，都是通过大模型语义识别。

  2. 可定位区域
    Playwright-MCP支持整个网站，Midscene.js基于可视区域，假如有个按钮在弹窗下面，Midscene.js就无法识别了。

  3. 定位速度
    Playwright-MCP较快，两个case 5s内完成了，但Midscene.js基于视觉大模型，速度较慢，本地试了下平均一个请求5-10s。

  4. 测试报告
    Midscene.js有完善的用例报告回放，Playwright-MCP需要自己去接入或者实现一套。