对扩展程序进行 E2E 测试的踩坑记录

[lmk123]

一开始打算用 Selenium，但是我发现它的文档全没了，甚至连 v3 的文档也找不到了，只能放弃。

然后使用了 Jest + Puppeteer，成功创建了第一个测试：

test('安装划词翻译后，会打开一个欢迎页面', (done) => {
  browser.on('targetcreated', (target) => {
    expect(target.url()).toBe('https://hcfy.app/docs/guides/welcome')
    done()
  })
})

搭建过程参考了以下两个链接：

• Using with puppeteer - Jest
• Chrome Extensions | Puppeteer

但是 Puppeteer 的 API 有点底层了，写起测试来不太顺畅，而且 jest-puppeteer 本身有很多小 bug，比如我遇到的就有 expect-puppeteer 没有生效的问题。

后来想改为使用最近很火的 Cypress，但是搜不到 Cypress 要如何加载浏览器扩展，唯一一个看起来可以正常加载的 Cypress 插件是五年前的 npm 包：cypress-browser-extension-plugin，我连尝试的欲望都没有。

翻了一圈，感觉 Cypress 并没有支持浏览器扩展，遂放弃。

最后，我又试了下 Playwright，初步尝试是很符合我的口味的：

• 第一方 TypeScript 支持
• 可以同时用多个浏览器运行测试（虽然浏览器扩展程序能且只能用 Chrome 跑）
• 功能齐全，不用自己搭配 Jest 之类的工具

然后我也成功按照官方的文档（见 Chrome Extensions | Playwright）写了浏览器扩展的测试：

import { test, expect } from './fixtures'

test('安装划词翻译后，划词翻译会打开欢迎页面', async ({ context }) => {
  await new Promise<void>((resolve) => {
    // 从这里的事件名就能感受到 Playwright 的 API 要比 Puppeteer 更适合用来写测试
    context.on('page', (target) => {
      expect(target.url()).toBe('https://hcfy.app/docs/guides/welcome')
      resolve()
    })
  })
})

但是，这个测试放在 GitHub Actions 里跑的时候却报错了：

Looks like you launched a headed browser without having a XServer running.
Set either 'headless: true' or use 'xvfb-run <your-playwright-app>' before running Playwright.

在解释这个问题之前，需要先说明一下，那就是 Chrome 只能在 headless: false 的情况下才能加载浏览器扩展程序，这一点我是知道的，但是用 Puppeteer 的时候是没有报这个错的，这就很奇怪了。

我先后尝试了：

• 使用 Playwright 官方提供的 container 来跑，但仍然报错
• 给测试命令加上 xvfb-run，即 xvfb-run npm run test，但是这样会导致初始化 BrowserContext 的时候迟迟没有响应，最终超出了 30 秒的测试超时限制
• 将 GitHub Actions 的运行环境改成 windows，但这有两个坏处，遂放弃：
  • windows 的运行环境运行一分钟等于运行 ubuntu 两分钟
  • 我的项目是在 macOS 上开发的，要让它跑在 windows 上需要做一些适配，比如 rm -rf 这类命令得用 shx 包一下之类的

所以目前我最终还是决定先用 Puppeteer 了。

这里面有一个问题我得研究一下，就是为什么 Puppeteer 可以而 Playwright 不可以，我记得 Playweight 就是包装了 Puppeteer 来着。

更新：找到原因了。headless: false 的 Puppeteer 在 GitHub Actions 里运行也是会报错的：Missing X server or $DISPLAY，之前之所以没报错是因为我用了 Nx 的 cloud，在我本地运行测试时把本地的测试结果缓存了，然后在 GitHub Actions 里的时候 Nx 检测到文件代码没变过，就直接把在本地缓存的测试结果给打印出来了，并没有真的运行测试 😂

这对我来说也算是个好消息，我可以用 Playwright 了，先只在本地测吧。