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，再依次判断Input的具体属性，例如时textarea，或者select，或者checkbox等。根据判断的结果返回不同的内容。

 生成locator

 下面是playwright中生产locator的一个function，可以看到通过注入脚本injectedScript._evaluator.begin()开始，这段代码的主要作用是为指定的HTML元素生成一个或多个唯一的CSS选择器，并返回相关的选择器和匹配的元素列表，以便用于自动化测试或其他需要唯一定位元素的场景。首先是初始化，开始评估选择器生成过程，启用ARIA缓存。如果选项中包含 forTextExpect，则会尝试为目标元素生成一个带有文本的选择器。否则，首先尝试在目标元素的父元素或影子宿主中找到符合特定角色（如按钮、链接等）的元素。然后根据是否允许多个选择器，生成一个或多个选择器，可能包含或不包含文本和CSS ID。生成locator结束后，使用Set去重生成的选择器列表，确保唯一性。最后返回结果。可以看到，为了生成合理的locator，playwright进行很多逻辑处理来保证生成locator的唯一性和合理性。

export function generateSelector(injectedScript: InjectedScript, targetElement: Element, options: GenerateSelectorOptions): { selector: string, selectors: string[], elements: Element[] } {injectedScript._evaluator.begin();beginAriaCaches();try {let selectors: string[] = [];if (options.forTextExpect) {let targetTokens = cssFallback(injectedScript, targetElement.ownerDocument.documentElement, options);for (let element: Element | undefined = targetElement; element; element = parentElementOrShadowHost(element)) {const tokens = generateSelectorFor(injectedScript, element, { ...options, noText: true });if (!tokens)continue;const score = combineScores(tokens);if (score <= kScoreThresholdForTextExpect) {targetTokens = tokens;break;}}selectors = [joinTokens(targetTokens)];} else {targetElement = closestCrossShadow(targetElement, 'button,select,input,[role=button],[role=checkbox],[role=radio],a,[role=link]', options.root) || targetElement;if (options.multiple) {const withText = generateSelectorFor(injectedScript, targetElement, options);const withoutText = generateSelectorFor(injectedScript, targetElement, { ...options, noText: true });let tokens = [withText, withoutText];// Clear cache to re-generate without css id.cacheAllowText.clear();cacheDisallowText.clear();if (withText && hasCSSIdToken(withText))tokens.push(generateSelectorFor(injectedScript, targetElement, { ...options, noCSSId: true }));if (withoutText && hasCSSIdToken(withoutText))tokens.push(generateSelectorFor(injectedScript, targetElement, { ...options, noText: true, noCSSId: true }));tokens = tokens.filter(Boolean);if (!tokens.length) {const css = cssFallback(injectedScript, targetElement, options);tokens.push(css);if (hasCSSIdToken(css))tokens.push(cssFallback(injectedScript, targetElement, { ...options, noCSSId: true }));}selectors = [...new Set(tokens.map(t => joinTokens(t!)))];} else {const targetTokens = generateSelectorFor(injectedScript, targetElement, options) || cssFallback(injectedScript, targetElement, options);selectors = [joinTokens(targetTokens)];}}const selector = selectors[0];const parsedSelector = injectedScript.parseSelector(selector);return {selector,selectors,elements: 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: MouseEvent) {consumeEvent(event);let target: HTMLElement | null = this._recorder.deepEventTarget(event);if (!target.isConnected)target = null;if (this._hoveredElement === target)return;this._hoveredElement = target;let model: HighlightModel | null = null;let selectors: string[] = [];if (this._hoveredElement) {const generated = this._recorder.injectedScript.generateSelector(this._hoveredElement, { testIdAttributeName: this._recorder.state.testIdAttributeName, multiple: false });selectors = generated.selectors;model = {selector: generated.selector,elements: generated.elements,tooltipText: this._recorder.injectedScript.utils.asLocator(this._recorder.state.language, generated.selector),tooltipFooter: selectors.length > 1 ? `Click to select, right-click for more options` : undefined,color: this._assertVisibility ? '#8acae480' : undefined,};}if (this._hoveredModel?.selector === model?.selector)return;this._hoveredModel = model;this._hoveredSelectors = selectors;this._recorder.updateHighlight(model, true);}

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

启动浏览器

   在util/protocol-types-generator目录下的index.js文件中，可以看到调用了playwright.launch()方法可以加载启动不同的浏览器，例如chromium，firefox，webkit等。这里调用的还是playwright-core中的chromium包来launch浏览器的。

  继续查看源代码，可以看到，在playwright-core/server/chromium目录下，有很多代码，这里就是playwright自己实现的管理整个浏览器生命周期的代码。

  以上就是playwright实现录制的大致过程。当调用playwright的功能录制到页面内容后，再调用vscode插件的textedit对象，将生成的内容写入当前打开的测试文件中即可。playwright是一个非常强大的工具，源代码相对比较复杂，如果要快速理解如何通过注入脚本实现录制功能，可以参考上一篇博客，他们在实现思路上是一致的。上一遍博客直接调用puppeteer来启动浏览器，playwright是完全自己实现了浏览器整个生命周期管理，会更加复杂一些。