NodeJS docker image to run Angular test in gitlab-ci - gitlab-ci

I have a small Angular app which I am try to build using gitlab-ci and node docker image, when I try to run the test using the command npm run test it fails with the following error :
ERROR [launcher]: No binary for Chrome browser on your platform. Please, set "CHROME_BIN" env variable.
gitlab-ci.yml
stages:
- build
variables:
NPM_CONFIG_REGISTRY: https://test.com/xx/api/npm/npm-all
build:
stage: build
image: node:12.9
script:
- npm install
- npm run build:prod
- npm run test
tags:
- DOCKER
In the above code npm run test executes ng test as configured in the package.json
I was able to run the build but when I run the test it looks for a chrome browser, I also tried running the test in a headless way using the below command but resulted in the same error :
ng test --no-watch --browsers=ChromeHeadless
How do I add the chrome feature to this build ?

Either install Chrome by yourself or try an existing Docker image that already includes it.

Related

Self-hosted GitLab Runner with shell executor can’t find npm

I’m configuring a very simple CI job. GitLab Runner is running on my own server, the specific runner for this project has been registered, with the shell executor, as I want to simply run shell commands.
stages:
- build
build:
stage: build
script:
- npm install
- npm run build
artifacts:
paths:
- "public/dist/main.js"
only:
- master
The job fails at the first command, npm install, with npm: command not found. I just installed npm and node via npm. If I SSH on my server and run npm -v, I can see version 8.5.5 is installed. If I sudo su gitlab-runner, which I suppose is what GitLab Runner is running as, npm -v works just as well.
I installed npm while gitlab-runner was already running. So I ran service gitlab-runner restart, thinking that it had to reevaluate its PATH, but it didn’t fix the issue.
I fixed it by simply adding this command before npm install: . ~/.bashrc.
I’m not sure why gitlab-runner didn’t properly read .bashrc before, even though I restarted it. Maybe it’s not supposed to? That would be contrary to what’s said in the GitLab CI runners docs.
N.B.: A key element in me being able to debug this was to clone the repo on a folder on my server, cd into it, and run gitlab-runner exec shell build after any (local) change to .gitlab-ci.yml. Skipping the whole commit + push + wait was a huge time (and sanity) saver.

yarn serve in background

I'm trying to configure gitlab CI/CD for cypress e2e testing on my vue app which uses yarn for package management. cypress documents are all written for npm cypress gitlab ci/cd configuration tutorial
# start the server in the background
- npm run start:ci &
# run Cypress tests
- npx cypress run --browser firefox
is there a way to start server in background for yarn? like running yarn serve but in background.
There is an issue with the command yarn serve&. It will still give you this screen when done compiling:
I found a way to work around this through pm2 and this command
pm2 start yarn --interpreter bash --name api -- start

Vue Cypress and Gitlab CI/CD

I am currently trying to get my E2E tests running on Gitlab with their CI/CD platform.
My issue at the moment is that I cannot both my dev server and cypress to run at the same time so that the E2E tests can run.
Here is my current .gitlab-ci.yml file:
image: node
variables:
npm_config_cache: "$CI_PROJECT_DIR/.npm"
CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress"
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- .npm
- cache/Cypress
- node_modules
stages:
- setup
- test
setup:
stage: setup
image: cypress/base:10
script:
- npm ci
# check Cypress binary path and cached versions
# useful to make sure we are not carrying around old versions
- npx cypress cache path
- npx cypress cache list
cypress:
stage: test
image: cypress/base:10
script:
# I need to start a dev server here in the background
- cypress run --record --key <my_key> --parallel
artifacts:
when: always
paths:
- cypress/videos/**/*.mp4
- cypress/screenshots/**/*.png
expire_in: 7 day
In Cypress's official GitHub page, there is an example .gitlab-ci.yml for running Cypress in continuous integration.
It uses command npm run start:ci & for running dev server in the background.
So, your .gitlab-ci.yml might look like this:
⋮
cypress:
image: cypress/base:10
stage: test
script:
- npm run start:ci & # start the server in the background
- cypress run --record --key <my_key> --parallel
⋮
Or use this utility to start the server, wait for an URL to respond, then run tests and shut down the server https://github.com/bahmutov/start-server-and-test

When I run cypress as npm run cypress run build fails

I have installed cypress using npm as npm install cypress --save-dev .
I used the same command in .gitlab-ci.yml file
When i run the command npm run cypress run locally , IDE opens and when i double click the spec.js file , then the tests run.
But I i use the same command on the gitlab pipeline , it says
cypress open "run"
It looks like this is your first time using Cypress: 4.1.0
[07:45:16] Verifying Cypress can run /osmc/ux/framework-acceptance-tests/cache/Cypress/4.1.0/Cypress [started]
[07:45:18] Verifying Cypress can run /osmc/ux/framework-acceptance-tests/cache/Cypress/4.1.0/Cypress [completed]
Opening Cypress...
and build fails .
Am i missing anything here ?
It's because it's opening the test runner, which is used locally via npx cypress open.
From that output it looks like you're running npx cypress open run, which isn't a real command and will open the runner
In CI you need to use npx cypress run, which will run tests without user interaction. https://docs.cypress.io/guides/guides/command-line.html#How-to-run-commands
Your gitlab.yml file should accomodate for the npm installations.
One example is as below. Meanwhile also please check the test/run command for your specs under package.json file. use the same command to trigger the test in pipeline.
stages:
- test
test:
image: cypress/browsers:node12.14.1-chrome85
stage: test
script:
npm i
npm run start:ci &
npx cypress run
You should have your .gitlab-ci.yml with:
stages:
- test
cypress-test:
image: cypress/browsers:node16.14.0-slim-chrome99-ff97
stage: test
script:
- npm ci
- npx cypress run

Gitlab continuous integration testing with Selenium

I am working on a project to build, test and deploy an application to the cloud using a .gitlab-ci.yml
1) Build the backend and frontend using pip install and npm install
build_backend:
image: python
stage: build
script:
- pip install requirements.txt
artifacts:
paths:
- backend/
build_frontend:
image: node
stage: build
script:
- npm install
- npm run build
artifacts:
paths:
- frontend
2) Run unit and functional tests using PyUnit and Python Selenium
test_unit:
image: python
stage: test
script:
- python -m unittest discover
test_functional:
image: python
stage: test
services:
- selenium/standalone-chrome
script:
- python tests/example.py http://selenium__standalone-chrome:4444/wd/hub https://$CI_BUILD_REF_SLUG-dot-$GAE_PROJECT.appspot.com
3) Deploy to Google Cloud using the sdk
deploy:
image: google/cloud-sdk
stage: deploy
environment:
name: $CI_BUILD_REF_NAME
url: https://$CI_BUILD_REF_SLUG-dot-$GAE_PROJECT.appspot.com
script:
- echo $GAE_KEY > /tmp/gae_key.json
- gcloud config set project $GAE_PROJECT
- gcloud auth activate-service-account --key-file /tmp/gae_key.json
- gcloud --quiet app deploy --version $CI_BUILD_REF_SLUG --no-promote
after_script:
- rm /tmp/gae_key.json
This all runs perfectly, except for the selenium tests are run on the deployed url not the current build:
python tests/example.py http://selenium__standalone-chrome:4444/wd/hub https://$CI_BUILD_REF_SLUG-dot-$GAE_PROJECT.appspot.com
I need to have gitlab run three things simultaneously:
a) Selenium
b) Python server with the application
- Test script
Possible approaches to run the python server:
Run within the same terminal commands as the test script somehow
Docker in Docker
Service
Any advice, or answers would be greatly appreciated!
I wrote a blog post on how I set up web tests for a php application. Ok PHP, but I guess something similar can be done for a python project.
What I did, was starting a php development server from within the container that runs the web tests. Because of the artifacts, the development server can access the php files. I figure out the IP address of the container, and using this IP address the selenium/standalone-chrome container can connect back to the development server.
I created a simple demo-project, you can check out the .gitlab-ci.yml file. Note that I pinned the selenium container to an old version; this was because of an issue with an old version of the php webdriver package, today this isn't needed anymore.