【2022-51】jest with puppeteer

window_ye

已于 2022-12-20 16:55:08 修改

阅读量383

点赞数

CC 4.0 BY-SA版权

分类专栏：测试文章标签： node.js

于 2022-12-20 16:54:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41379244/article/details/128387170

测试专栏收录该内容

3 篇文章

订阅专栏

jest

jest配置选项说明

jest.preset选项设置三方模块名，三方模块中需要包含指定类型的文件

我们项目执行e2e时preset的选项是jest-puppeteer（此模块的作用是预设了一些参数值），通过jest-puppeteer.config.js文件可以重写预设中的一些参数配置。

jest with puppeteer

如果引入jest-puppeteer预设

jest-pptr会初始化pptr.launch配置

// jest-environment-puppeteer/lib/readConfig.js

const DEFAULT_CONFIG_CI = (0, _mergeDeep.default)(DEFAULT_CONFIG, {
  launch: {
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-background-timer-throttling', '--disable-backgrounding-occluded-windows', '--disable-renderer-backgrounding']
  }
});

async function readConfig() {
  const defaultConfig = process.env.CI === 'true' ? DEFAULT_CONFIG_CI : DEFAULT_CONFIG;
  const hasCustomConfigPath = !!process.env.JEST_PUPPETEER_CONFIG;
  const configPath = process.env.JEST_PUPPETEER_CONFIG || 'jest-puppeteer.config.js';
  //...
}

初始化一些(默认为1)pptr.Browser实例

// jest-environment-puppeteer/lib/global.js

if (config.connect && config.connect.browserWSEndpoint) {
    wsEndpoints = [config.connect.browserWSEndpoint];
} else {
    browsers = await Promise.all(Array.from({
    	length: browsersCount
    }).map(() => openBrowser(puppeteer, config)));
    wsEndpoints = browsers.map(browser => browser.wsEndpoint());
}

测试代码中，jest会注入pptr.Page和pptr.Browser对象，代码中可以直接使用

https://jestjs.io/docs/puppeteer

因此用户无需自己再通过launch加载浏览器

我们项目在使用jest-puppeteer预设的情况下，代码中又自行加载浏览器，这样做的坏处就是启动了多个浏览器，额外占用服务资源，因此我们项目的这种使用场景下完全可以去除jest-puppeteer预设

Best Pretices

我们项目目前使用jest-puppeteer的部分是e2e，通过预设初始puppetter的一些加载配置和环境。

因为puppeteer模块中包含的chrome在服务器中总是下载失败，所以我们在pipeline中引入了缓存机制，具体做法就是缓存了很久之前某台pipeline机器中的node_modules，然后存储在了ftp server，每次pipeline的时候下载到服务器，然后覆盖本地的node_modules，然后以此来保证e2e的正常运行。

上述方案解决了puppeteer包下载困难问题，但是随着其他repo的pipeline也需要支持e2e，其他pipeline机器如果环境与当初缓存时的机器配置不一致，e2e往往也不能如愿进行。

除了这点，缓存的依赖包每次下载解压也非常耗时，当然这个可以通过本地缓存解决。

经过近期对pptr的了解，我们可以把测试中所有puppeteer的依赖调整成puppeteer-core，这样可以保证模块可以正常下载，项目编译也正常进行。

puppeteer-core/lib/cjs/puppeteer/revisions.js中指明了要求的chrome版本
国内Chome镜像：https://registry.npmmirror.com/binary.html?path=chromium-browser-snapshots/Linux_x64/

然后我们可以把puppeteer内置的chome拷贝到pipeline机器指定位置，测试文件中launch的时候指定executablePath，这样e2e也能正常进行。

如果需要新增pipeline机器，那么基础环境中关于pptr的配置包括如下两步

chome的运行依赖安装

for Ubuntu

apt-get update && apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1  libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget xvfb x11vnc x11-xkb-utils xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic x11-apps

for Centos

yum install -y alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 gtk3.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 libXtst.x86_64 pango.x86_64 xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-fonts-cyrillic xorg-x11-fonts-misc xorg-x11-fonts-Type1 xorg-x11-utils libdrm mesa-libgbm && yum update nss -y

拷贝chrome到服务器指定位置