无法使用 WSL 在 Angular 项目中启动 ChromeHeadless，适用于 Mac

Question

我正在使用适用于 Linux 的 Windows 子系统（Windows 10、Ubuntu 18.04 LTS）。我将在下面列出所有其他相关版本。

这个设置在我的 Mac 机器上工作，没有flags添加karma.conf.ts如下所示的阵列。

到目前为止，我已经看过：

Headless Chrome 将测试速度降低了 10 倍

Ubuntu：无法启动 ChromeHeadless

Google Chrome 75.0.3770.80 HEADLESS 不再在 Docker 容器内工作

“重建”纱线使用 npm rebuild --update-binary

角 6 的业力测试

预期行为 启动 ChromeHeadless 并运行测试

当前行为yarn test按我通常的方式 运行会导致此错误：

02 10 2019 09:13:03.598:ERROR [launcher]: ChromeHeadless stdout:
02 10 2019 09:13:03.608:ERROR [launcher]: ChromeHeadless stderr: Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
Failed to generate minidump.
02 10 2019 09:13:03.623:DEBUG [temp-dir]: Cleaning temp dir /tmp/karma-5419534
 21% building 99/100 modules 1 active ...ngenio/packages/web-app/src/styles.scss02 10 2019 09:13:03.699:INFO [launcher]: Trying to start ChromeHeadless again (2/2).
02 10 2019 09:13:03.702:DEBUG [launcher]: BEING_CAPTURED -> RESTARTING
02 10 2019 09:13:03.715:DEBUG [launcher]: RESTARTING -> FINISHED
 22% building 100/101 modules 1 active ...project/packages/web-app/src/styles.scss02 10 2019 09:13:03.801:DEBUG [launcher]: Restarting ChromeHeadless
02 10 2019 09:13:03.803:DEBUG [launcher]: FINISHED -> BEING_CAPTURED
02 10 2019 09:13:03.804:DEBUG [temp-dir]: Creating temp dir at /tmp/karma-5419534
02 10 2019 09:13:03.814:DEBUG [launcher]: google-chrome --user-data-dir=/tmp/karma-5419534 --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-background-timer-throttling --disable-renderer-backgrounding --disable-device-discovery-notifications http://localhost:9876/?id=5419534 --headless --disable-gpu --remote-debugging-port=9222
 27% building 144/145 modules 1 active ...project/packages/web-app/src/styles.scss02 10 2019 09:13:05.142:DEBUG [launcher]: Process ChromeHeadless exited with code null and signal SIGILL
02 10 2019 09:13:05.147:ERROR [launcher]: Cannot start ChromeHeadless
        Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
Failed to generate minidump.
02 10 2019 09:13:05.159:ERROR [launcher]: ChromeHeadless stdout:
02 10 2019 09:13:05.171:ERROR [launcher]: ChromeHeadless stderr: Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
Failed to generate minidump.
02 10 2019 09:13:05.187:DEBUG [temp-dir]: Cleaning temp dir /tmp/karma-5419534
 34% building 205/206 modules 1 active ...project/packages/web-app/src/styles.scss02 10 2019 09:13:05.679:ERROR [launcher]: ChromeHeadless failed 2 times (cannot start). Giving up.
02 10 2019 09:13:05.680:DEBUG [launcher]: BEING_CAPTURED -> FINISHED
02 10 2019 09:13:13.587:DEBUG [karma-server]: List of files has changed, trying to execute
02 10 2019 09:13:13.588:WARN [karma]: No captured browser, open http://localhost:9876/

然后ctrl+c……

An unhandled exception occurred: Cannot destructure property `error` of 'undefined' or 'null'.
See "/tmp/ng-GhKvib/angular-errors.log" for further details.

该文件/tmp/ng-GhKvib/angular-errors.log包含An unhandled exception occurred: Cannot destructure property错误of 'undefined' or 'null'.。

业力配置

// karma.conf.ts

module.exports = (config) => {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    client: {
      clearContext: false,
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/ng2angle'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_DEBUG,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    browserDisconnectTimeout: 10000,
    browserDisconnectTolerance: 3,
    browserNoActivityTimeout: 60000,
    flags: [
      '--disable-web-security',
      '--disable-gpu',
      '--no-sandbox',
      '--disable-features=NetworkService',
      '--proxy-server="direct://"',
      '--proxy-bypass-list=*',
      '--disable-dev-shm-usage',
    ],
    singleRun: false,
    restartOnFileChange: true,
  });
};

yarn test运行的命令是ng test --karmaConfig=karma.conf.ts.

版本

yarn=1.19.0
angular-cli=8.3.2
karma=4.1.0
karma-chrome-launcher=2.2.0
tsc=2.7.2

编辑

最终，我为此放弃了使用 Linux，而使用 Mac。在karma-chrome-launcherrepo 中观看我的问题以获取将来可能的修复。

Answer 1

要成功运行，请按照以下步骤操作

\n

方法1：如果我们在wsl中下载chromium版本（debian）并安装，大部分问题都会得到解决，我们可以运行ChromeHeadless

\n

第1步：安装必要的包

\n

sudo apt-get update\n\nsudo apt-get install -y curl unzip xvfb libxi6 libgconf-2-4\n

\n

第 2 步：安装铬

\n

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb\n\nsudo apt install ./google-chrome-stable_current_amd64.deb\n

\n

如果问题仍然存在，请按照方法2

\n

方法 2：要在任何环境中运行基本的 Selenium UI 测试，我们需要一个浏览器和一个控制浏览器的驱动程序。因此，我们必须使 Windows\xe2\x80\x99s Chrome 浏览器和 chromedriver 可从 WSL 访问。

\n

第 1 步：在 Windows 上链接 Chrome 浏览器

\n

sudo ln -sf \'/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe\' /usr/bin/google-chrome \n

\n

步骤 2：在 Windows 上链接 chromedriver

\n

sudo ln -s /mnt/c/Users/username/node_modules/chromedriver/lib/chromedriver/chromedriver.exe /usr/bin/chromedriver\n

\n

步骤3：更改CHROME_BIN（环境变量的默认值）

\n

export CHROME_BIN=\'/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe\'\n

\n

如果问题仍然存在，请按照方法3

\n

方法 3：这将有助于在 Ubuntu 上运行 puppetetteer，所以让我们安装必要的软件包：

\n

sudo apt-get install 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\n

\n

\n
• 查看我的 GitHub 解决方案链接
\n
• GitHub
\n

\n