const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'firefox', 'webkit']) {
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('http://whatsmyuseragent.org/');
    await page.screenshot({ path: `example-${browserType}.png` });
    await browser.close();
  }
})();

export class CRBrowser extends platform.EventEmitter implements Browser {
  readonly _defaultContext: CRBrowserContext;
  async _targetCreated() {
    ...
    const context = (browserContextId && this._contexts.has(browserContextId)) ? this._contexts.get(browserContextId)! : this._defaultContext;
    ...
  }
}

// src/server/chromium.ts
export class Chromium implements BrowserType {
  async launch() {
    // 使用local模式启动server
    const { browserServer, transport } = await this._launchServer(options, 'local');
    const browser = await CRBrowser.connect(transport!, options);
    browser.close = () => browserServer.close();
    return browser;
  }
  private async _launchServer() {
    let browserServer: BrowserServer | undefined = undefined;
    /* 1. 启动Node子进程，运行浏览器实例 */
    const { launchedProcess, gracefullyClose } = await launchProcess({ ... })
    /* 2. 准备数据通道 */
    let transport: ConnectionTransport | undefined;
    let browserWSEndpoint: string | null;
    if (launchType === 'server') {
      ...
      // server模式会获取子进程暴露出的ws端口
      const match = await waitForLine(launchedProcess, launchedProcess.stderr, /^DevTools listening on (ws:\/\/.*)$/, timeout, timeoutError);
      browserWSEndpoint = match[1];
    } else {
      // local模式会利用子进程的标准端口创建数据通道
      transport = new PipeTransport(launchedProcess.stdio[3] as NodeJS.WritableStream, launchedProcess.stdio[4] as NodeJS.ReadableStream);
      browserWSEndpoint = null;
    }
    browserServer = new BrowserServer(launchedProcess, gracefullyClose, browserWSEndpoint);
    /* 3. 返回server与transport通道，后续在browser上绑定server的close方法，使用transport通道创建Connection对象来管理所有Session会话 */
    return { browserServer, transport };
  }
}

page.$('div > span#text') // => ElementHandle
page.$$('.user-table') // => Array<ElementHandle>
page.click('#button')

document
  .querySelector('div')
  .querySelector('.form > span')
  .querySelector('input[attr=name]')

// 一个可以注入到选择器引擎实例中的函数
const createTagNameEngine = () => ({
  // 创建一个从根元素到目标元素的选择器（利用选择器选择元素的反向操作）
  create(root, target) {
    return root.querySelector(target.tagName) === target ? target.tagName : undefined;
  },
  // 返回根元素子树上的第一个匹配元素
  query(root, selector) {
    return root.querySelector(selector);
  },
  // 返回根元素子树上的所有匹配元素
  queryAll(root, selector) {
    return Array.from(root.querySelectorAll(selector));
  }
});

// src/injected/injected.ts
class Injected {
  readonly engines: Map<string, SelectorEngine>;
  // 加载所有内置与自定义选择器引擎
  constructor(customEngines: { name: string, engine: SelectorEngine}[]) {
    this.engines = new Map();
    this.engines.set('css', CSSEngine);
    this.engines.set('xpath', XPathEngine);
    this.engines.set('text', TextEngine);
    this.engines.set('id', createAttributeEngine('id'));
    ...
    for (const {name, engine} of customEngines)
      this.engines.set(name, engine);
  }

class Injected {
  // 实现顶层的元素选择方法，递归调用
  querySelector(selector: string, root: Node): Element | undefined {
    const parsed = this._parseSelector(selector);
    if (!(root as any)['querySelector'])
      throw new Error('Node is not queryable.');
    // 递归查找元素
    return this._querySelectorRecursively(root as SelectorRoot, parsed, 0);
  }
}

class Injected {
  private _querySelectorRecursively(root: SelectorRoot, parsed: ParsedSelector, index: number): Element | undefined {
    const current = parsed[index];
    root = (root as Element).shadowRoot || root;
    // 在根元素上使用当前引擎内置的query与queryAll方法查找元素
    if (index === parsed.length - 1)
      return current.engine.query(root, current.selector);
    const all = current.engine.queryAll(root, current.selector);
    for (const next of all) {
      const result = this._querySelectorRecursively(next, parsed, index + 1);
      if (result)
        return result;
    }
  }
}

// src/injected/injected.webpack.config.js
module.exports = {
  ...
  output: {
    filename: 'injectedSource.js',
    path: path.resolve(__dirname, '../../lib/injected/packed')
  },
  plugins: [
    new InlineSource(path.join(__dirname, '..', 'generated', 'injectedSource.ts')),
  ]
}
// src/dom.ts
import * as injectedSource from './generated/injectedSource';
export class FrameExecutionContext extends js.ExecutionContext {
  // 注入所有选择器引擎代码并创建引擎实例
  _injected(): Promise<js.JSHandle> {
    const selectors = Selectors._instance();
    if (!this._injectedPromise) {
      const custom: string[] = [];
      for (const [name, source] of selectors._engines)
        custom.push(`{ name: '${name}', engine: (${source}) }`);
      const source = `
        new (${injectedSource.source})([
          ${custom.join(',\n')}
        ])
      `;
      this._injectedPromise = this.evaluateHandle(source);
      this._injectedGeneration = selectors._generation;
    }
    return this._injectedPromise;
  }
  // $()方法用于选择单个元素-ElementHandle
  async _$(selector: string, scope?: ElementHandle): Promise<ElementHandle<Element> | null> {
    const handle = await this.evaluateHandle(
      // 调用injected执行元素选择
      (injected: Injected, selector: string, scope?: Node) => injected.querySelector(selector, scope || document),
      await this._injected(), selector, scope
    );
    if (!handle.asElement())
      await handle.dispose();
    return handle.asElement() as ElementHandle<Element>;
  }
}