Open lmk123 opened 1 year ago
一开始打算用 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,初步尝试是很符合我的口味的:
然后我也成功按照官方的文档(见 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 的时候是没有报这个错的,这就很奇怪了。
headless: false
我先后尝试了:
xvfb-run npm run test
rm -rf
所以目前我最终还是决定先用 Puppeteer 了。
这里面有一个问题我得研究一下,就是为什么 Puppeteer 可以而 Playwright 不可以,我记得 Playweight 就是包装了 Puppeteer 来着。
更新:找到原因了。headless: false 的 Puppeteer 在 GitHub Actions 里运行也是会报错的:Missing X server or $DISPLAY,之前之所以没报错是因为我用了 Nx 的 cloud,在我本地运行测试时把本地的测试结果缓存了,然后在 GitHub Actions 里的时候 Nx 检测到文件代码没变过,就直接把在本地缓存的测试结果给打印出来了,并没有真的运行测试 :joy:
Missing X server or $DISPLAY
这对我来说也算是个好消息,我可以用 Playwright 了,先只在本地测吧。
一开始打算用 Selenium,但是我发现它的文档全没了,甚至连 v3 的文档也找不到了,只能放弃。
然后使用了 Jest + Puppeteer,成功创建了第一个测试:
但是 Puppeteer 的 API 有点底层了,写起测试来不太顺畅,而且 jest-puppeteer 本身有很多小 bug,比如我遇到的就有 expect-puppeteer 没有生效的问题。
后来想改为使用最近很火的 Cypress,但是搜不到 Cypress 要如何加载浏览器扩展,唯一一个看起来可以正常加载的 Cypress 插件是五年前的 npm 包:cypress-browser-extension-plugin,我连尝试的欲望都没有。
翻了一圈,感觉 Cypress 并没有支持浏览器扩展,遂放弃。
最后,我又试了下 Playwright,初步尝试是很符合我的口味的:
然后我也成功按照官方的文档(见 Chrome Extensions | Playwright)写了浏览器扩展的测试:
但是,这个测试放在 GitHub Actions 里跑的时候却报错了:
在解释这个问题之前,需要先说明一下,那就是 Chrome 只能在
headless: false
的情况下才能加载浏览器扩展程序,这一点我是知道的,但是用 Puppeteer 的时候是没有报这个错的,这就很奇怪了。我先后尝试了:
xvfb-run npm run test
,但是这样会导致初始化 BrowserContext 的时候迟迟没有响应,最终超出了 30 秒的测试超时限制rm -rf
这类命令得用 shx 包一下之类的所以目前我最终还是决定先用 Puppeteer 了。
这里面有一个问题我得研究一下,就是为什么 Puppeteer 可以而 Playwright 不可以,我记得 Playweight 就是包装了 Puppeteer 来着。
更新:找到原因了。
headless: false
的 Puppeteer 在 GitHub Actions 里运行也是会报错的:Missing X server or $DISPLAY
,之前之所以没报错是因为我用了 Nx 的 cloud,在我本地运行测试时把本地的测试结果缓存了,然后在 GitHub Actions 里的时候 Nx 检测到文件代码没变过,就直接把在本地缓存的测试结果给打印出来了,并没有真的运行测试 :joy:这对我来说也算是个好消息,我可以用 Playwright 了,先只在本地测吧。