playwright录制脚本原理

 Paywright录制工具UI

  在上一篇博客中介绍了如何从0构建一款具备录制UI测试的小工具。此篇博客将从源码层面上梳理playwright录制原理。当打开playwright vscode插件时，点击录制按钮，会开启一个新浏览器，如下图所示，在新开浏览器页面上，有录制，查看等按钮。

  查看vscode的源码，会看到有个recorder的folder，该folder下由react构建了一个应用的UI，执行npm run dev，在5173端口启动这样一个web应用，web应用的UI如下图所示，可以看到里面的录制按钮等和上图vscode插件大家的相同。从这里可以推断，recorder里面用react构建的componen被嵌入到了开启的浏览器中。

 通过上一篇博客的介绍，我们知道，实现录制功能的核心原理是是在浏览器中注入了脚本，通过监听用户行为，并将用户行为转换为playwright的语法，从而实现录制脚本的能力。

Playwright的脚本注入

  查看playwright得source code，在playwright-core/src/server/injected目录下就是注入脚本相关的内容。查看injected/recorder/recorder.ts脚本，在该脚本中在interface RecordTool中定义了大量操作页面元素的方法，例如onClick，onInput等。

  在recorder.ts中，在document对象上添加了很多listener，如下图所示：

  具体每个listener完成了哪些逻辑呢？以onInput为例子，下面的onInput方法的部分代码，可以看到，首先是获取Input的目标对象target，再依次判