Gitlab CI + Angular JS + Protractor E2E test cases

Hello, community!
I’m in need of your help,

What I’m using

  • I’ve setup Gitlab CI to my Project which is using Angular JS, I’m trying to run test cases through Protractor ( E2E test ), which is internally using Selenium and Web Driver manager.

  • I’m using Debian machine.

What my intension
I want to use Gitlab CI, which should run my test cases and deploy my code on remote server.
If test cases are failed it shouldn’t deploy on my server.

What I’ve achieved
As I’m new to Gitlab CI, it took some time to setup gitlab-ci.yaml file, after so many struggles with the help of @stefanvangastel, I’m able to deploy my code on the server through Gitlab CI.
To run test cases I’ve used xvfb to open browsers and able to run test cases through Gitlab CI

Problem
Facing issues if I start web driver manager as backend ( Using $ webdriver-manger start & ), I’m not able to stop it, while I’m trying to run test cases again, it’s showing webdriver manager or Address already in use.

  • Not moving to next job, still in pending state.
    YAML file
    stages:
    - test
    - build
    - deploy

    test:
    stage: test
    script:
    - xvfb-run -a webdriver-manager update
    - xvfb-run -a webdriver-manager start &
    - xvfb-run -a protractor test/conf.js
    - xvfb-run -a webdriver-manager shutdown
    - curl -s -L http://localhost:4444/selenium-server/driver?cmd=shutDownSeleniumServer > /dev/null 2>&1

    build:
    stage: build
    script: echo “Building the app”

    before_script:

    install ssh-agent

    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
    # run ssh-agent
    - eval $(ssh-agent -s)
    # add ssh key stored in SSH_PRIVATE_KEY variable to the agent store
    - ssh-add <(echo "$SSH_PRIVATE_KEY")
    # disable host key checking (NOTE: makes you susceptible to man-in-the-middle attacks)
    # WARNING: use only in docker container, if you use it with shell you will overwrite your user's ssh config
    - mkdir -p ~/.ssh
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    
    # try to connect to GitLab
    - ssh -T git@10.0.0.***
    - echo pwd
    - pwd
    # Change the directory to webstation directory
    - cd /var/www/html/tap
    
    # Create folder with the name as current branch, if it not exists
    - mkdir -p $BRANCH
    
    # Gave read and write permissions
    - chmod 755 $BRANCH
    
    # Change the directory to current branch
    - cd $BRANCH
    

    variables:
    BRANCH: sprint-1

    deploy_staging:
    stage: deploy

    script:
    
    # Clone a git repo if it does not exist, or pull into it if it does exist
    - >
      if [ ! -d .git ];
      then
          git clone -b $BRANCH git@10.0.0.150:osmosys/tap-portal.git . 
      else
          git pull origin $BRANCH ;
      fi;
      
    # To know the status and branch
    - git status
    - git branch
    
    # Setup basic installations 
    - npm install 
    - bower install
    
    # Running grunt prod by passing grunt option
    - grunt prod --production
      
    # command to run 
    environment:
      name: dev
      url: http://10.0.0.**/tap/$BRANCH/src
    # deploy job will run only for branches that start with sprint- and master, whereas all branches will be skipped.
    only:
    - /^sprint-.*$/  
    - master`
    

xt by 4 spaces indent preformatted text by 4 spacesoy job will run only for branches that start with sprint- and master, whereas all branches will be skipped.

only:

  • /^sprint-.*$/
  • master

Gitlab CI - terminal



Need

  • Could any please help me out.
  • Give me any reference project, which could solve my problem.
  • If possible provide me a good YAML file

Similar References

Are you capable of using Docker? You dont need to use a docker ci runner, just have docker available on the machine you are running your jobs on.

This is my entire e2e protractor section, it assumes:

  • A protractor.conf.js or whatever you name it is present
  • This conf file is configured with a BASE_URL that is accessible by the browser(s) running inside the hortonworks/docker-e2e-protractor container.
  • This also means you have to setup a running environment of the app you want to test, I use a container for that too so (removed this in the file below) I start a container with my app running in it, I call it app-to-test and link it to the protractor container; The BASE_URL in my protractor.conf.js points to http://app-to-test/ and by linking them together the protractor container resolves that hostname.
protractor-tests:
  stage: test
  script:
    #####################################################################################################################
    # This assumes a protractor.conf.js (or whatever you call it) is present and is configured to point to a BASE_URL 
    #####################################################################################################################
    # Remove any containers left running after fails:
    - docker rm -f protractor-runner || true
    # Run a the protractor image 
    - docker run -i --rm --name protractor-runner -v ${pwd}/tests:/protractor/project hortonworks/docker-e2e-protractor protractor.conf.js
    # Clean up pulled image (remove this line if you have only 1 runner or runners using this image often)
    - docker rmi -f hortonworks/docker-e2e-protractor

Thanks for the reply @stefanvangastel
I’m not familiar with Docker, right now we are using Shell executor.

I think a quick look into it would really help you along, you can compare Docker (and the container I named) to a very small and all-in-one VM containing everything you need.

In this case xvfb, selenium, chrome and firefox. Its awesome, just pass in your protractor config file and it will run your tests.

PS: Modified my example earlier to match the description on https://hub.docker.com/r/hortonworks/docker-e2e-protractor/

Thanks @stefanvangastel, I will go through the example.

I have similar need for using Gitlab CI.

Here is how it work in my case, hope this can help.

gitlab-ci-angular-webapp