。

此篇博客将从源码层面上梳理playwright录制原理。

当打开playwright

vscode插件时#xff0c;点击录制按钮#xff0c;会开启一个新浏览器#xff0c;如下图所示#xff0c;在新开浏览器页…

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得source

code在playwright-core/src/server/injected目录下就是注入脚本相关的内容。

查看injected/recorder/recorder.ts脚本在该脚本中在interface

RecordTool中定义了大量操作页面元素的方法例如onClickonInput等。

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

具体每个listener完成了哪些逻辑呢以onInput为例子下面的onInput方法的部分代码可以看到首先是获取Input的目标对象target再依次判断Input的具体属性例如时textarea或者select或者checkbox等。

根据判断的结果返回不同的内容。

生成locator

下面是playwright中生产locator的一个function可以看到通过注入脚本injectedScript._evaluator.begin()开始这段代码的主要作用是为指定的HTML元素生成一个或多个唯一的CSS选择器并返回相关的选择器和匹配的元素列表以便用于自动化测试或其他需要唯一定位元素的场景。

首先是初始化开始评估选择器生成过程启用ARIA缓存。

如果选项中包含

forTextExpect则会尝试为目标元素生成一个带有文本的选择器。

否则首先尝试在目标元素的父元素或影子宿主中找到符合特定角色如按钮、链接等的元素。

然后根据是否允许多个选择器生成一个或多个选择器可能包含或不包含文本和CSS

ID。

生成locator结束后使用Set去重生成的选择器列表确保唯一性。

最后返回结果。

可以看到为了生成合理的locatorplaywright进行很多逻辑处理来保证生成locator的唯一性和合理性。

export

generateSelector(injectedScript:

InjectedScript,

{injectedScript._evaluator.begin();beginAriaCaches();try

{let

targetElement.ownerDocument.documentElement,

options);for

parentElementOrShadowHost(element))

{const

generateSelectorFor(injectedScript,

element,

closestCrossShadow(targetElement,

button,select,input,[rolebutton],[rolecheckbox],[roleradio],a,[rolelink],

options.root)

generateSelectorFor(injectedScript,

targetElement,

generateSelectorFor(injectedScript,

targetElement,

id.cacheAllowText.clear();cacheDisallowText.clear();if

(withText

hasCSSIdToken(withText))tokens.push(generateSelectorFor(injectedScript,

targetElement,

hasCSSIdToken(withoutText))tokens.push(generateSelectorFor(injectedScript,

targetElement,

(hasCSSIdToken(css))tokens.push(cssFallback(injectedScript,

targetElement,

generateSelectorFor(injectedScript,

targetElement,

[joinTokens(targetTokens)];}}const

selector

injectedScript.parseSelector(selector);return

injectedScript.querySelectorAll(parsedSelector,

options.root

targetElement.ownerDocument)};}

finally

{cacheAllowText.clear();cacheDisallowText.clear();endAriaCaches();injectedScript._evaluator.end();}

定义在injectedScript.js中的generateSelector方法实际在recorder.ts中被调用。

下图是recorder.ts中onMouseMove方法的完整代码。

可以看到通过注入脚本playwright获取到了目标对象event将event作为参数传入方法中在生成selector部分就是通过injectedScript.generateSelector生成的。

onMouseMove(event:

this._recorder.deepEventTarget(event);if

null;if

target)return;this._hoveredElement

target;let

this._recorder.injectedScript.generateSelector(this._hoveredElement,

testIdAttributeName:

this._recorder.state.testIdAttributeName,

multiple:

generated.elements,tooltipText:

this._recorder.injectedScript.utils.asLocator(this._recorder.state.language,

generated.selector),tooltipFooter:

selectors.length

model?.selector)return;this._hoveredModel

selectors;this._recorder.updateHighlight(model,

true);}

上面大致解释了playwright如何通过注入脚本的方式来录制脚本接下来看看playwright是如何启动浏览器的。

启动浏览器

在util/protocol-types-generator下有很多代码这里就是playwright自己实现的管理整个浏览器生命周期的代码。

以上就是playwright实现录制的大致过程。

当调用playwright的功能录制到页面内容后再调用vscode插件的textedit对象将生成的内容写入当前打开的测试文件中即可。

playwright是一个非常强大的工具源代码相对比较复杂如果要快速理解如何通过注入脚本实现录制功能可以参考上一篇博客他们在实现思路上是一致的。

上一遍博客直接调用puppeteer来启动浏览器playwright是完全自己实现了浏览器整个生命周期管理会更加复杂一些。