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是完全自己实现了浏览器整个生命周期管理，会更加复杂一些。