Streamline Testing with CircleCI Pipeline and Selenium Grid

Orbs & Integrations in CircleCI

In spite of easy Account creation methodology, CircleCI offers more convenient ways to integrate with other technologies. CI/CD is also made easy by CircleCI through Orbs. Let us dive deep into what are the CircleCI orbs and Integrations.

Orbs in CircleCI

CircleCI orb is a reusable package in the YAML format that condenses repeated pieces of config into a single package.. Orbs are open-source, shareable packages of parameterizable configuration elements, including jobs, commands and executors. Apart from automation of repetitive processes, here are some of the major advantages of CircleCI Orbs:

• Seamless integration with third-party tools.
• Time savings in project configurations
• Reduction in configuration complexity
• Increase in organizational efficiency at developer and the enterprise levels

There are pre-built apps available in the registry of CircleCI but new orbs can be created according to your requirements. It also provides an orb development kit that aids in creating new orbs with ease.

Popular Orbs are : Slack, AWS(Amazon Web Services), Microsoft etc.

To ease the project configuration, you can also use the Orb Use Cases. These help in easy project configuration and setting up third-party integrations in a smooth manner.

Benefits of using CircleCI Orbs

CircleCI Orbs can greatly simplify the configuration. These Orbs cut down the number of lines of code to a high extent. To illustrate this let’s take an example:

Typical Example Configuration: Here, we are defining a testing configuration of a Node.js application. Defining the job with the required steps for testing the application v/s using the test job provided by the circleci/node orb. With orbs, you can write a parameterized configuration for once and deploy it across multiple projects.

Code with CircleCI Orb

version: 2.1
 
orbs:
  node: circleci/[email protected] #orb version
 
workflows:
  test_my_app:
    jobs:
      - node/test:
          version: <node-version>

Code without CircleCI Orb

version: 2.1
 
jobs:
  test:
    docker:
      - image: cimg/node:<node-version>
        auth:
          username: mydockerhub-user
          password: $DOCKERHUB_PASSWORD  # context / project UI env-var reference
    steps:
      - checkout
      - restore_cache:
          keys:
            - node-deps-v1-{{ .Branch }}-{{checksum "package-lock.json"}}
      - run:
          name: install packages
          command: npm ci
      - save_cache:
          key: node-deps-v1-{{ .Branch }}-{{checksum "package-lock.json"}}
          paths:
            - ~/.npm
      - run:
          name: Run Tests
          command: npm run test
 
workflows:
  test_my_app:
    jobs:
      - test

So, you can see the difference between lines of code! You can find more CircleCI Orbs in the Orb Registry.

Got 8 Mins? Watch our video on how to get started with CircleCI

Creating CI/CD pipeline with CircleCI

Pre-requisites:

Admin-level access and valid credentials for GitHub and CircleCI accounts.

Creating a new Repository

• Navigate to Github and login to your Github account.
• Create a new repository, by giving the name of your repository as hello-world. Click on Initialize this repository with a README. Finally, click on the create repository.

Setting up CircleCI

• Login to your CircleCI Account and navigate to the Project page.

  

• As you login to your CircleCI account, select the organization in which you have created a new repository, named hello-world.
• Find the project you plan to use and click on the right of it on Set Up Project.
• After selecting Set Up Project, a new dialog box appears, choose Write your own using our starter config.yml template and click on Let’s Go.

• The dialog box contains sample configs for the project. As our project is an empty repository, choose Hello World config from the dialog box.

• Based on the chosen language and framework, we can view the config.yml template in the editor. It’s documentation can be viewed in the right side of the editor.

• Now to create your first CircleCI pipeline, click on Commit and Run. This will create .circleci/config.yml in the root directory/repository with a new branch named circle-ci-setup. You can merge this branch with the master branch.
• You would see your hello-world pipeline running automatically.

Inspecting the first CircleCI Pipeline

• You would view a new screen appearing with the new pipeline in the “running” stage.

• Next, this running stage will turn into the “success” stage in case of successful execution.

  

• Click on Success, you will be taken to a new screen where workflows and jobs would be reflected. Here, we have run a single job (i.e.a single workflow) named welcome/run. Click on welcome/run and investigate the steps of the job.

  

• Here, an orb is used to provide defaults for the project. By using the orb, we have quick access to common configuration. The orb is circleci/[email protected]. This provides a pre-built workflow that simply greets the user.

  

• Every CircleCI pipeline is configured with a number of steps. As the circleci/[email protected] orb is used, we don’t see the custom steps as they are configured in the orb itself. The steps may be checkout, etc. These are reserved or special commands in CircleCI. The build was successful as the orb executed successfully with exit code 0. At times , there are multiple steps with multiple Docker images and a number of tests. Let’s make a demo of it next.

Read – How To Run Selenium Tests In Docker

Adding more complexity to the Build

• We will now edit our config.yml on Github.The address to which the config.yml should be saved is https://github.com/{username}/{repo}/edit/circleci-project-setup/.circleci/config.yml.

  Substitute the name of the repository and the Username and paste it to the browser. Our URL is here.


• We will be adding new functionalities in the code. Copy and paste the following code into your config.yml through Github and run the pipeline.

version: 2
jobs: # we now have TWO jobs, so that a workflow can coordinate them!
  one: # This is our first job.
    docker: # it uses the docker executor
      - image: circleci/ruby:2.4.1 # specifically, a docker image with ruby 2.4.1
        auth:
          username: mydockerhub-user
          password: $DOCKERHUB_PASSWORD  # context / project UI env-var reference
    # Steps are a list of commands to run inside the docker container above.
    steps:
      - checkout # this pulls code down from GitHub
      - run: echo "A first hello" # This prints "A first hello" to stdout.
      - run: sleep 25 # a command telling the job to "sleep" for 25 seconds.
  two: # This is our second job.
    docker: # it runs inside a docker image, the same as above.
      - image: circleci/ruby:2.4.1
        auth:
          username: mydockerhub-user
          password: $DOCKERHUB_PASSWORD  # context / project UI env-var reference
    steps:
      - checkout
      - run: echo "A more familiar hi" # We run a similar echo command to above.
      - run: sleep 15 # and then sleep for 15 seconds.
# Under the workflows: map, we can coordinate our two jobs, defined above.
workflows:
  version: 2
  one_and_two: # this is the name of our workflow
    jobs: # and here we list the jobs we are going to run.
      - one
      - two

• Commit these changes and traverse back to the CircleCI pipeline page, you will see the new pipeline running.

• Click on the new pipeline’s Success button, you will find two workflows, these jobs; One and two will be running concurrently and successfully.

  

  We have run a simple pipeline with two concurrent jobs, you can extend the functionalities of pipelines by adding different orbs and different workflows.

How To Integrate CircleCI pipeline with Online Selenium Grid

Till now you learnt about setting up the complete CircleCI pipeline but what’s the actual purpose of this setup? Well its for teams to enable automation tests at scale. CI/CD tools enable teams for faster and more efficient feedback loops. Running automated tests with a CI/CD pipeline helps in faster delivery time and teams can fix the bugs faster. As we completed the installation and created the CircleCI pipeline, we can go on to the next step of performing Selenium test automation.

Performing browser automation tests on local infrastructure is not a cost effective and scalable solution. You cannot achieve the optimum level of test coverage, performance and the ability to run rests in parallel by maintaining the local testing infrastructure. These features are much more economical and scalable on cloud based Selenium Grid.

A Cloud-based Selenium Grid allows you to run serial (and parallel) tests across multiple browsers, operating systems, and devices. TestMu AI helps in scaling your cross browser testing efforts by providing a cloud testing infrastructure to run Selenium tests on 3000+ real browsers and browser versions.

Read – What is Parallel Testing and why is it important?

If integrated with the CircleCI pipeline, you can gain a competitive edge by quicker turnaround times and accelerated product delivery. Let’s deep dive on the major steps to perform automated testing with CI/CD pipeline.

Requirements:

• A Git or Github Repository: Here, we are providing you with the repository consisting of some nightwatch tests. The URL of the repository is https://github.com/rachnaagrawal/Nightwatch-circleci-selenium.git.
• Node.js Installation: Download and install node.js and node package manager npm. The command used to install node.js in windows 10 is npm install. If already installed, update it to the latest version.
• TestMu AI Authentication Credentials: You can retrieve your authentication credentials from the TestMu AI Automation Dashboard, In the profile section of your account. Set them up as the environment variables, through the following command:

$ export LT_USERNAME=<your lambdatest username>
$ export LT_ACCESS_KEY=<your lambdatest access_key>

Creating the config.yml on Github:

• In order to integrate TestMu AI and CircleCI, you need to make slight changes in .circleci/config.yml – configuration file for your CircleCI Pipeline instance.
• The changes mainly involve adding TestMu AI Username and Access Key to connect the CircleCI pipeline to your TestMu AI Automation Dashboard.
• The Username and the Access key are set as the environment variables that are required to connect TestMu AI Selenium Grid to the CircleCI Pipeline for running the tests.
• The code for config.yml should be as the code given below:

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:8.0
 
      # Specify service dependencies here if necessary
 
    working_directory: ~/Nightwatch-circleci-selenium
 
    steps:
      - checkout
      
      - run: 
          name: "Downloading tunnel binary"
          command: |
            wget http://downloads.lambdatest.com/tunnel/linux/64bit/LT_Linux.zip
      
      - run: 
          name: "Extracting tunnel binary"
          command: |
            sudo apt-get install unzip
            unzip LT_Linux.zip
 
      - run: 
          name: "Executing tunnel binary"
          background: true
          command: |
            ./LT -user <your_lambdatest_username> -key <your_lambdatest_accesskey>
            sleep 40
      
      - run: 
          name: "Setup custom environment variables"
          command: |
            echo 'export LT_USERNAME=<your_lambdatest_username> >> $BASH_ENV
 
      - run:
          name: "Setup custom environment variables"
          command: |
            echo 'export LT_ACCESS_KEY=<your_lambdatest_accesskey> >> $BASH_ENV
 
      - run: # test what branch we're on.
          name: "Here is the LT_Username : "
          command: echo ${LT_USERNAME}       
 
      # Download and cache dependencies
 #    - restore_cache:
 #        keys:
 #          - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
 
      - run: npm install
 
#      - save_cache:
#          paths:
#            - node_modules
#          key: v1-dependencies-{{ checksum "package.json" }}
 
      # run tests!
      - run: node_modules/.bin/nightwatch -e chrome //executing tests in Bash

• The above pipeline configuration will use the image of the node. It will create an environment for TestMu AI using the Username and Access Key in the specified directory.. It will then download and unzip the binary tunnel and then run Nightwatch tests on the Online Selenium Grid.
• Integrate CircleCI Pipeline with TestMu AI to do real-time testing and automation testing.

Running the CircleCI and TestMu AI Integration Pipeline

• Login to your CircleCI Account and go to the Projects Page
• On the Projects Page, search for the required github repository. Now, click on the Set Up Project button beside your searched repository

• As you click on the Set Up Project button, A new dialog box will appear.
• Select the option “If you already have .circleci/config.yml in your repo …”. Below this option you will find CircleCI automatically has searched for the config file in your repository. Post this, click on Let’s Go.
• You can see the CircleCI pipeline running in the next window. After a few seconds, you would see the output on the window.

Viewing Tests on TestMu AI Dashboard

• Login to your TestMu AI Account.

• In the rightmost side you can see Recent Tests, you can definitely find your tests run through the circleCI pipeline in the chrome environment there.
• If you can not find your tests there, simply click on Automation from the Leftmost column.

  

• Under the Timeline Tab, you will find all your nightwatch tests run in the Chrome environment here.
• You can click on them and view the video recordings of the Tests and observe the Test more keenly.

  

This way you can easily run tests over the TestMu AI platform and observe the application or software product. For faster results you can also try parallel testing on TestMu AI Selenium Grid.