playwright vscode 插件源码解析

Playwright vscode插件主要功能

  Playwright是微软开发的一款主要用于UI自动化测试的工具，在vscode中上安装playwright vscode插件，可以运行，录制UI自动化测试。

  playwright vscode插件主要包括两块功能，功能一是在Test Explorer中显示项目中所有的测试文件，选择某个测试文件，可以执行这些由playwright编写的测试。功能二是Playwright webview视图，里面可以选择projects，即选择执行测试的浏览器，settings设置，选择显示浏览器，还是trace viewer，Tools目录下有Pick locator,Record new,Record at cursor菜单，点击Pick locator或者录制菜单，会启动一个浏览器，在浏览器中输入被测web应用的url，就可以开始录制了，录制的代码会写到vscode管理下的测试文件中。

Test Explorer实现原理

  那么，如何实现在Test Explorer中显示测试文件并执行的呢？查看playwright vscode插件源码，testTree and testModel文件主要负责以treeview的方式显示测试文件，testModel里面封装了运行或者调试测试的代码。settingView里面是一个webview，palaywright下面的projects，settings，tools等UI的显示，都是由settingView里面编写。playwrightTestServer.ts 和playwrightTestCLI.ts主要是实现运行，录制测试的具体逻辑。backend.ts里面是启动一个websocket服务，通过发送和监听消息来执行测试。

  关于如何通过vscode提供的treeview和testcontroller来实现Test explorer下显示测试文件的部分，可以先阅读这两篇博客，treeview使用，testcontroller使用，这两篇博客中给出了构建treeview和testcontroller的简单易懂的例子。Test explorer中显示的测试文件实现思路和上面例子大致相同，解析source code中测试文件信息，并以treeview的方式显示出来。当选择某个文件执行后，会在测试文件名称下面显示测试执行时间，测试名称等。在测试执行是，获取测试时间，执行状态等信息，组装成testItem，再添加到testcontroller中，通过testcontroller来管理整个测试的生命周期。

  测试执行的底层逻辑是什么

  上面主要介绍的playwright vscode插件的UI部分，那么底层是如何实现测试执行的呢？下面是playwrightTestCLI.ts文件中runTests方法的代码。下面code中，首先设置了一些测试执行参数，例如--headed，--workers，--trace等，然后通过__innerSpawn方法执行测试，另外还创建ReportServer，监听测试执行结果信息。__innerSpawn通过child_process.spawn 方法启动一个新的 Node.js 进程来运行 Playwright 测试。具体步骤和效果如下：

启动一个 Node.js 进程：使用 node 可执行文件和 Playwright CLI 来运行测试。
传递命令行参数：
this._model.config.cli: Playwright CLI 路径。
'test': 运行测试的命令。
'-c', configFile: 指定配置文件。
...extraArgs: 额外的命令行参数。
...escapedLocations: 要运行的测试文件或目录