Playwright工作原理

 执行test时，有哪些关键步骤

  当我们用Playwright编写一段简单的test script，代码如下所示：在test case中第一段代码就是await page.goto(xxxxx)

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://www.thoughtworks.com/');
  await page.getByLabel('Insights').click();
  await page.getByLabel('Technology', { exact: true }).click();
  await page.getByLabel('Investors').click();
  await page.getByRole('button', { name: 'Earnings' }).click();
});

执行上面的代码，查看test-report，实际playwright工具在testcase前BeforeHook和AfterHook.BeforeHook中有三句代码，分别是：launch,newContext,newPage.

以chromium为例子，具体的代码如下所示：

import { chromium } from 'playwright';

(async () => {
  // Launch browser
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
 // test case step
// Close browser
  await browser.close();
})();

  执行上面的测试脚本（执行命令：npx playwright test tests/xxx.spec.ts）会看到，成功开启了一个chromium，然后成功关闭了该浏览器。说明上面的命令能调起browser，另外，所有的UI step操作，都是调用page这个对象执行的。chromium 来自playwright包。

   palywright-core中实现launch browser

查看代码会发现，chromium来自playwright-core lib中，查看chromium的代码，可以看到有connect的详细代码。这里connect chromium是使用了DevTools协议。

  这里playwright自己实现了launch 浏览器的具体代码，实际，也有一些三方包可以快速实现launch browser，例如可以通过chrome-launcher来launch浏览器。总结而言，launch browser是一个很典型的任务，可以自己写代码实现，也可以直接使用第三方包实现。

import * as ChromeLauncher from 'chrome-launcher';
    const chrome = await ChromeLauncher.launch({
        startingUrl: "https://angularjs.realworld.io/#/login",
        chromeFlags: ['--headless', '--disable-gpu', '--no-sandbox']
    });

   playwright-core的主要模块

  实际，playwright-core除了负责launch browser，管理页面外，server目录下还包括recorder，主要负责录制脚本，injected主要是注入脚本到浏览器页面中，这样才能监听页面情况，isomorphic。除了server目录，还有cli目录，主要是实现执行某个命令时，对应调用的具体方法，以保证用户输入命令时，能正确执行相关任务。另外，image_tool主要用于视觉测试部分。

   在启动浏览器中，user编写的是安装playwright语法格式写的locator，action等，当执行这些脚本是，playwright会将这些script进行转换，转换后再发送到浏览器执行。playwright-core中就有各种parser负责对locator进行转换。

 

   在isomorphic目录下，除了各种parser脚本，还有locatoreGenerators脚本，这个主要用户录制时自动生成代码，或者执行playwright codegen命令时，生成代码。locatorGenerators会根据选择不同language，生成不同的代码。具体可查看locatorGenerators.ts文件查看具体内容。

  总结而言，playwright-core是playwright的核心模块，负责浏览器的启动，页面，上下文管理，locator的转换。对于gencode模块，playwright-core还负责代码生成，会根据不同的client language生成不同的code，另外，还负责record模块，因为在浏览器中注入的脚本，所以可以监听浏览器上的行为，从而实现record的功能。