将Puppeteer与GitLab集成，使用gitlab-ci.yml

Question

我正在使用Chrome Puppeteer进行端到端测试。现在的阶段是将我的测试整合到开发流程中。

我的目标是：在每次部署到生产环境之前自动运行我的测试。如果测试成功则继续进行部署，如果测试失败则取消部署。

我使用GitLab上的pipeline来自动化我的部署过程。所以我的主要问题是如何将我的Puppeteer测试集成到gitlab-ci.yml文件中？

- Kristof Vandenbroeck

Answer 1

这可能有点取巧，但我的运行方式如下：

test:
image: node:latest
stage: run
script:
- 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
- yarn
- yarn test

这个超长的库列表是 Puppeteer 启动 Chrome 所需的。理想情况下，您应该拥有一个已准备好的 Docker 镜像，但我找到的所有现成的镜像都不能正常工作。

当准备进入生产环境时，您应该构建自己的镜像，从 Node 中获取并安装依赖项。

- Rince

---

有点棘手，但这对我解决了问题；我遇到了使用karma时的ERROR [launcher]: Cannot start Chrome。 - Ruben O. Chiavone

我已经安装了所有的库，但是出现了如下错误：ERROR:nacl_helper_linux.cc(310)] NaCl助手进程在没有沙盒的情况下运行！很可能您需要正确配置SUID沙箱。我使用 --no-sandbox 启动Chrome。 - Brick Yang

Answer 2

我们也曾遇到同样的问题，您需要在提供puppeteer的docker镜像上运行该阶段：

# run performance monitor
performanceMonitoring:
  stage: performanceMonitoring
  image: alekzonder/puppeteer
  script:
    - yarn run performanceMonitoring

- Andreas Köberle

---

这个答案已经过时了，alekzonder/puppeteer镜像已经超过2年没有更新了。 - undefined

Answer 3

使用预安装Puppeteer的Docker镜像是实现此目的最简单的方法。

以下是您的.gitlab-ci.yml文件的样式：

stages:
  - test

cache:
  paths:
    - node_modules/

.node_template:
  image: buildkite/puppeteer

tests:
  extends: .node_template
  stage: test
  variables:
    CI: "true"
  before_script:
    - echo "checking node version"
    - node -v
    - echo "installing dependencies..."
    - npm install
  script:
    - npm run test

我建议使用buildkite/puppeteer而不是alekzonder/puppeteer，因为它带有最新的LTS版本的node，而alekzonder/puppeteer则没有。

- base34

---

你能否帮我看一下我的问题？我正在创建一个可工作的gitlab.ci-yml文件时遇到了类似的问题。https://stackoverflow.com/questions/62904609/gitlab-codeceptjs-tests-were-working-fine-a-week-ago-now-they-all-cancel-befor - amnmustafa15

Answer 4

你好，我曾经遇到过相同的问题——无法在无头模式下启动浏览器

以下方法对我有效

image: node:12
stages:
   - Test

Test:
stage: ApiTest
before_script:
  - echo "installing  dependency"
  - 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
  - npm i
script:
 - echo "start the test"
 - npm test
only:
refs:
  - master
  - tags  

使用 Puppeteer 配置 - 以无头模式启动

 /* configurable options or object for puppeteer */
const opts = {
    headless: true,
    slowMo: 10,
    timeout: 0,
    args: ['--start-maximized', '--window-size=1920,1040','--no-sandbox', '--disable-setuid-sandbox'] 
}

- Mahesh Hegde

Answer 5

试试这个

variables:
  IMG_BUILD: node:latest
  IMG_TEST: trion/ng-cli-karma
  IMG_TESTING: alekzonder/puppeteer:latest
  IMG_TESTING_FINAL: node:8.9.1
  IMG_GITLAB_CI: juristr/angular-ci-build:1.0.0
  IMG_TESTING_GITLAB: alekzonder/puppeteer:latest
  IMG_TESTING_GITLAB2: buildkite/puppeteer

deploy_test:
  stage: test
  image: ${IMG_TESTING_GITLAB2}
  environment: Production
  cache:
    policy: pull
  artifacts:
    paths:
      - node_modules/
  only:
    - master
  script:
    - npm install
    - npm run test-ci

使用包配置

"test-ci": "ng test --no-watch --no-progress --browsers=ChromeHeadlessNoSandbox",

- Rabindranath ferreira