integrate puppeteer in gitlab with gitlab-ci.yml

Im currently working on e2e test in Chrome Puppeteer. I am at the stage where it would be ideal to integrate my tests in the development process.

What I want to accomplish is the following: my tests run automated before every deploy to production. If they succeed deployment goes through, if they fail deployment is canceled.

I use a pipeline on gitlab to automate my deployment process. So my main question is how can I integrate my puppeteer tests into the gitlab-ci.yml file?

This might be a bit of a hack but mine are running like this:

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

That super long list of libraries are the ones that the puppeteer needs to launch chrome. Ideally you would have a ready docker image but all the premade ones I found did not work for me.

When getting ready for prod you should build your own image that takes from node and installs the dependencies itself.

How to setup Chrome Headless on GitLab CI with Puppeteer & Docker, One of GitLab's selling points is its powerful Continuous Integration… The jobs are configured in a .gitlab-ci.yml file which should be placed� For an overview, see Introduction to GitLab CI from a recent GitLab meetup. How GitLab CI/CD works. To use GitLab CI/CD, all you need is an application codebase hosted in a Git repository, and for your build, test, and deployment scripts to be specified in a file called .gitlab-ci.yml, located in the root path of your repository.

We had the same problem, you need to run the stage on an docker image that provides puppeteer:

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

UI testing using Puppeteer and Gitlab CI | by Viktor Šul�k, To break down this pipeline in gitlab-ci.yml file — build step “build” installs Node application packages and “test” launches Puppeteer UI test� It’s incredibly easy to use and powerful, you can design your CI pipeline in a file called .gitlab-ci.yml at the root directory of your control repo. GitLab will automatically interpret it whenever there are changes in your repo code, and try to use GitLab CI runners (agents running on, typically, separated servers where are run the actual CI

The easiest way to accomplish this is by using a docker image with Puppeteer preinstalled.

This is what your .gitlab-ci.yml` should look like:

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

I recommend using buildkite/puppeteer over alekzonder/puppeteer, since it comes with the latest LTS version of node and alekzonder/puppeteer doesn't.

integrate puppeteer in gitlab with gitlab-ci.yml, This might be a bit of a hack but mine are running like this: test: image: node: latest stage: run script: - apt-get update - apt-get install -yq� Understanding the .gitlab-ci.yml File. GitLab CI looks for a file called .gitlab-ci.yml within each repository to determine how it should test the code. The repository we imported has a gitlab-ci.yml file already configured for the project. You can learn more about the format by reading the .gitlab-ci.yml reference documentation

Try this

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

with package config

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

How to Set Up a Continuous Integration Pipeline with GitHub , Lately I've added continuous integration to my blog using Puppeteer for end to As my CI platform, I chose Github Actions, as it is super easy to work with. Basically, actions allow you to create workflows using plain yaml� Configuring .gitlab-ci.yml (This Post) Troubleshooting GitLab and GitLab CI #1- Understanding the .gitlab-ci.yml file. The .gitlab-ci.yml file is a YAML file that you create on your project’s root. This file automatically runs whenever you push a commit to the server. This triggers a notification to the runner you specified in #3, and then it

pre-build docker image which contains puppeteer's , gitlab-ci.yml and yarn.lock match, if not -> bail; Check if we already have an image for that puppeteer version, if yes, we do� GitLab CI (Continuous Integration) service is a part of GitLab that build and test the software whenever developer pushes code to application. GitLab CD (Continuous Deployment) is a software service that places the changes of every code in the production which results in every day deployment of production.

Tip of the Week 14, gitlab-ci.yml at the root directory of your control repo. GitLab will automatically interpret it whenever there are changes in your repo code, and try� In GitLab, go to the new project page, select the CI/CD for external repo tab, and then click GitHub. Paste the token into the Personal access token field and click List Repositories. Click Connect to select the repository. In GitHub, add a .gitlab-ci.yml to configure GitLab CI/CD. GitLab will: Import the project. Enable Pull Mirroring

Using Continuous Integration for puppet, Add a gitlab-ci.yml file to the root of your repository to give instructions to the CI. Test setup. I've improved the test setup quite� On any push to your repository, GitLab will look for the .gitlab-ci.yml file and start jobs on Runners according to the contents of the file, for that commit. Because .gitlab-ci.yml is in the repository and is version controlled, old versions still build successfully, forks can easily make use of CI, branches can have different pipelines and

Comments
  • A bit tricky but that fixed the problem for me; I was having: ERROR [launcher]: Cannot start Chrome using karma.
  • I've installed every libs, but got this error: ERROR:nacl_helper_linux.cc(310)] NaCl helper process running without a sandbox! Most likely you need to configure your SUID sandbox correctly. I launched Chrome with --no-sandbox.