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.
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
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.
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",
Hello I was having the same issue - not able to launch the browser in headless mode
following worked for me
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 config - launch it with headless mode
/* 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']
}
