在 Azure 管道中，如何设置 X 显示以进行无头 Chrome 测试？

Question

在我们的 Azure Pipeline 中，我们尝试使用以下任务在 Angular 9 应用程序中运行端到端测试...

package.json 定义了这个...

  "scripts": {
    ...
    "e2e": "npm run install-puppeteer && ng e2e"
  },

但是当代理运行上述任务时，它会因“无法打开 X 显示”错误而终止......

> npm run install-puppeteer && ng test "--watch=false" "--codeCoverage=true" 





> [email protected] install-puppeteer /home/vsts/work/1/s 

> cd node_modules/puppeteer && npm run install 





> [email protected] install /home/vsts/work/1/s/node_modules/puppeteer 

> node install.js 



Chromium is already in /home/vsts/work/1/s/node_modules/puppeteer/.local-chromium/linux-818858; skipping download. 

08 12 2020 18:54:56.858:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/ 

08 12 2020 18:54:56.863:INFO [launcher]: Launching browsers Chrome with concurrency unlimited 

08 12 2020 18:54:56.866:INFO [launcher]: Starting browser Chrome 

08 12 2020 18:54:57.134:ERROR [launcher]: Cannot start Chrome 

[2099:2099:1208/185457.060113:ERROR:browser_main_loop.cc(1439)] Unable to open X display. 



08 12 2020 18:54:57.134:ERROR [launcher]: Chrome stdout: 

08 12 2020 18:54:57.135:ERROR [launcher]: Chrome stderr: [2099:2099:1208/185457.060113:ERROR:browser_main_loop.cc(1439)] Unable to open X display. 



08 12 2020 18:54:57.675:INFO [launcher]: Trying to start Chrome again (1/2). 

08 12 2020 18:54:59.035:ERROR [launcher]: Cannot start Chrome 

22 error Exit status 1 

23 error Failed at the [email protected] test script. 

23 error This is probably not a problem with npm. There is likely additional logging output above. 

24 verbose exit [ 1, true ]

一般这种事情是通过安装Xvfb来处理的。如何使用 Azure 管道做到这一点？

Answer 1

这确实是 @Hugh Lin 在评论中的答案，但为了子孙后代的利益，我创建了一个 bash 任务，它在我的存储库中运行一个脚本。脚本包含

#!/bin/bash
xvfb-run --auto-servernum --server-args='-screen 0, 1920x1080x24' npm run test -- --watch=false --codeCoverage=true

然后测试运行成功。

Answer 2

我是 DevOps 管道的新手。我遇到了同样的问题。这是我的构建端的 yaml 脚本。我需要在这个 yaml 中添加上面的行吗？谢谢

Azure Web Apps 部署操作的文档：https://github.com/Azure/webapps-deploy

更多适用于 Azure 的 GitHub 操作：https://github.com/Azure/actions

名称：构建 Node.js 应用程序并将其部署到 Azure Web App - londondatajobs

在： 推： 分支机构： - 主要的 工作流程_调度：

工作： 建造： 运行：ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Set up Node.js version
    uses: actions/setup-node@v3
    with:
      node-version: '20.x'

  - name: npm install, build, and test
    run: |
      npm install
      npm run build --if-present
      npm run test --if-present

  - name: Zip artifact for deployment
    run: zip release.zip ./* -r

  - name: Upload artifact for deployment job
    uses: actions/upload-artifact@v3
    with:
      name: node-app
      path: release.zip