一、概述
在前端项目开发和部署中，自动化测试是非常重要的一环。而针对前端项目的自动化测试工具Karma，则需要一个Chrome浏览器实例，这对于一些服务器环境来说是不太现实的，特别是服务器不支持UI界面的情形。因此，可以使用npm包karma-xvfb-chrome-launcher，它是一款基于XVFB虚拟桌面的Chrome浏览器无headless模式的启动器，可以支持Karma进行测试。
本文将会详细介绍npm包karma-xvfb-chrome-launcher的使用方法，包括安装、配置和使用。读者可以通过本文来了解这款npm包的使用方法，从而在Karma的自动化测试中使用Chrome浏览器无headless模式。
二、安装npm包karma-xvfb-chrome-launcher
前置条件：已经安装了Node.js和Karma
安装karma-xvfb-chrome-launcher可以通过以下命令进行：
npm install karma-xvfb-chrome-launcher --save-dev
然后我们需要安装XVFB虚拟桌面支持，可以通过以下命令进行：
Debian系统：
sudo apt install xvfbCentOS系统：
sudo yum install xorg-x11-server-Xvfb
三、配置karma配置文件
在使用karma-xvfb-chrome-launcher时，需要对karma配置文件做些必要的配置。
具体配置如下：
-- -------------------- ---- ------- -------------- - ---------------- - ------------ ----------- ------------ -------- - ---------------- ------------------------ ---------------------------- -- ---------------- - ----------- - ----- --------- ------ - ---------------------- ----------------------- ----------------- -- ------- - ------ --------- ----- ----- -- -- --- -- ----- -- -- --- ------ -------- --- ----- ------ ------------------------------ - - -- --------- --------------- ---------- ------------ -------- -- -展开代码
上述内容中的customLaunchers定义了一个名为XvfbChrome的浏览器环境。而browsers则将Karma的启动浏览器设置为XvfbChrome。
除此之外，flags中的--remote-debugging-port=9222是用于启动Chrome执行自动化测试。参数值为9222，因为Karma默认使用该端口来连接Chrome浏览器，从而将测试代码注入到页面中。
四、使用karma-xvfb-chrome-launcher
在完成了上述配置之后，就可以直接运行Karma进行自动化测试了。需要注意的是，在启动Karma之前，需要在命令行中先启动XVFB虚拟桌面，否则将会抛出Chrome无法启动的异常。
在启动XVFB虚拟桌面时，需要先设置环境变量来指定可用的显示端口（1-99），可以通过以下命令进行：
export DISPLAY=:10
再运行XVFB命令：
Xvfb :10 -ac &
注意，此命令将会将XVFB运行在10号端口上。如果没有找到可用的端口，将会提示Cannot open display的错误信息。
运行完以上命令之后，即可通过以下命令启动Karma进行自动化测试：
./node_modules/karma/bin/karma start --single-run
至此，您已经成功使用npm包karma-xvfb-chrome-launcher来进行Karma的无headless模式自动化测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc47db5cbfe1ea0612195
