First things are First

In this tutorial, You are going to learn about docker. Before you jump into the docker, I want you to know how much time it will take to learn this docker in protractor.

For me, it took almost 7 hours to make it work in my laptop, so you can think now how much patience you need to have.

I have followed many tutorials, before starting this but somehow things get outdated and will not work, so if this any of the steps in this tutorial is not working keep calm and search in google sometime it may be issue only with protractor so you give a try with selenium.

With all said, we would be going in baby steps, so I have created 50-60 images in this docker tutorial, if you feel like you do not want to waste the time then please do navigate to : List of docker commands used in this tutorial section

After writing this, i Will start watching "You Were Never Really Here" movie.

What is Docker ?

Docker is nothing but a virtual machine packed in containers, we use the docker to run our protractor Grid. Docker server as a Virtual machine with specific product like Unit with Chrome or firefox.

Most of the Companies use the docker to create their own applications just like firefox inside a container. Docker is worth a thing for cross browser testing, instead of paying more money to cloud based companies it is better to use the Docker.

I know there is too much of explanations for Docker but this this much is enough for our automation and for all.

FYi : I am using Win10 operating system for this tutorial because i have only one laptop, silly.

Install Docker for Protractor

  • Open the Docker url : https://www.docker.com/products/docker-desktop
  • download-docker-protractor
  • Download the docker according to your Operating System
  • If you are using the docker for the first time then you need to sign-up and download the Docker, it is free
  • login-to-docker-protractor
  • Fill your details on sign up page and verify the confirmation message
  • sign-up-docker-protractor
  • Click on Get docker and wait for sometime to get the Docker to be downloaded
  • get-docker-protractor
  • After downloading Open the docker exe file, it may again download few more packages
  • download-docker-package
  • You may see below image if docker exe is installed successfully
  • docker-installtion-successful-protractor
  • Press Start Icon/ win key and select Docker for Windows Option
  • start-docker-for-windows-protractor

Install Kitematic with Docker aka Docker UI

Kitematic provides the UI for the Docker, When you download docker it will be like a cli/cmd terminal, so lets download it.

But sometimes this KiteMatic may not work during those time please do use the Docker cli or Command prompt to install things.

  • Go to Dock of the right bottom side in windows operation system, you may find Triangle click it. Now you can see Docker icon, do right click on it and select Kitematic
  • kitemtic-docker-protractor
  • Click on download button to download the Docker Kitematic
  • download-kitematic-docker-protractor
  • Open the KiteMatic exe file to install it
  • install-kitematic-docker-protractor
  • Use the login id that you have created while downloading the docker
  • login-to-kitematic-docker-protractor
  • Home page of KiteMatic may look like below image
  • home-page-of-kitematic-docker
  • Search for selenium/Selenium hub, Now in the listing you can find the Hub for selenium, click on create to download it
  • download-selenium-hub-kitematic-docker
  • Similar to this you can download the node images as well.

Docker repository with CLi/Command Prompt for Protractor

Sometimes, you might face issue with installation of the image in Kitematic UI, and same issues you will face with Cli/Cmd as well

  • First and for most thing about Docker is, docker is mainly used with Linux, So We have to switch to Windows mode.

    To switch to Windows mode, Navigate to the folder where you have installed your docker using CMD/Terminal, Now if you are able to see the DockerCli file the type the below command in the CMD to switch to windows/or to other operating system.

    Its not like with one switch you will be able to go windows, it is trial and error switch and try to install, it goes till you are able to install.
  • DockerCli.exe -SwitchDaemon
    switch-image-to-windows-linux
  • For installing in Command line we must need to know the command first, and it different from image to image.
  • Navigate to : https://hub.docker.com/ and search for selenium and click the highlighted item
  • hun-repository-docker-command-line
  • Sometimes you need to install the Pull Command to install the package, this is present on the right hand side
  • docker-pull-command-selenium-hub
  • Go to Build Details Tab and choose the latest image
  • latest-docker-hub-build-protractor
  • If you have entered the right command then you might see the installation
  • install-selenium-docker-pull
  • It will take sometime based on your internet speed to complete the installation
  • selenium-docker-install-complete
  • Use the highlighted command to install the Hub
  • get-docker-image-selenium-hub-protractor
  • Copy paste the command in your CMD/Terminal
  • docker run -d -P --name selenium-hub selenium/hub
    cmd-install-docker-image-hub
  • Above command will start the Hub service
  • successful-installation-of-selenium-hub-protractor
  • Use ps command to check the service which are up
  • docker ps
    up-running-selenium-hub-docker
  • You can also check the Images which are running in the KiteMatic UI as well, you can view them on the left side
  • selenium-hub-kitematic

Selenium Node Installation in Docker for Protractor

Yes, you can install the node just like hub but there are two kind of node, which one to chose.

  • Chrome-Node : Chrome node does not provide any UI to view the execution of the program
  • Chrome-Node-Debug : Chrome Node Debug provide an UI to see the execution of the program
  • For this tutorial purpose I would be using the Chrome with UI, i.e Chrome-Node-Debug, so search for Chrome Node Debug
  • chome-node-debug-run-details-docker
    docker run -d -P --link selenium-hub:hub selenium/node-chrome-debug
    chrome-debug-selenium-docker-installation-protractor
  • You can use the same command to check whether it got installed or not.
  • confirm-installation-chrome-node-debug-docker
  • You view the command to Invoke the Chrome Node Debug by navigating to 'How to use this section'
  • details-of-chome-node-debug-up
  • If the invocation is successful then you may see a string like this
  • chome-node-debug-up-running-docker
  • You can see the Running node in the KiteMatic UI, the name of the node changes each time
  • kitematic-node-chrome-debug-running
  • You can see the details o the hub to connect in the dark screen, Which i have copy pasted below the image
  • hub-details-fom-docker Before Connecting the Node
    
    								[Hub.start] - Nodes should register to http://172.17.0.2:4444/grid/register/
    [Hub.start] - Clients should connect to http://172.17.0.2:4444/wd/hub
    								

    After Connecting the Node

    
    								# after node installation
    [Hub.start] - Nodes should register to http://172.17.0.2:4444/grid/register/
    [Hub.start] - Clients should connect to http://172.17.0.2:4444/wd/hub
    [DefaultGridRegistry.add] - Registered a node http://172.17.0.3:5555
    								
  • To confirm the Node Connection, do visit to the given detail, the post number you can see by click on the HUB
  • localhost-selenium-grid-console
  • Click on the console like on the right side to view the connections to the Hub. You can see the details like what the nodes connected and what browsers are connected
  • grid-console-docker-selenium-protractor

VNC Viewer for Docker

As I said earlier, you may want to see the execution of the program in the given docker. You cannot view a docker just like that, we have to connect the docker with our system using some tool.

I would recommend using the VNC viewer to connect the Docker. VNC viewer helps to connect the Remote machine with Local machine.

  • Go to Google APP store and select VNC viewer or directly search in Google
  • vnc-viewer-for-chrome-docker
  • After installing you can start the VNC viewer from the Google Apps on the right top corner of the browser (square dots)
  • vnc-from-google-apps-docker
  • VNC viewer will expect the IP address and Port number of the NODE to connect, you can get it from the kitematic UI or from the ps command in CMD
  • vnc-viewer-localhost-docker-selenium-node
  • While connecting VNC may show Un-Encrypted connection, accept it
  • uncrypted-connection-docker-selenium-hub
  • The default password is secret ( all lower case), you can change it if you want to
  • secret-password-vnc-docker-selenium-node
  • Below is the UI of the Ubuntu, the UI of the Docker Image
  • new-ubuntu-vnc-selenium-node

Commands required for Docker and Protractor


// install the Hub
docker pull selenium/hub
// invoke the hub
docker run -d -P --name selenium-hub selenium/hub
// install the Node
docker pull selenium/node-chrome-debug
// invoke the node
docker run -d -P --link selenium-hub:hub selenium/node-chrome-debug
// list the running process
docker ps
// list all the running process
docker ps -a

Protractor Integration with Docker

Now lets come the important part of the tutorial, Let's integrate the protractor scripts with Docker. Be aware that it is a single line change in conf file.

Consider below protractor Test file for docker integration, this script will take screenshot of the opened page.


import{createWriteStream} from 'fs'
import { browser, by, element, ExpectedConditions} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('get Cookie test in Protractor', function() {
		browser.get("https://google.com")
		browser.getTitle().then(function(t){
			console.log("Title of Google : "+t)
		})
		// take screenshot
		browser.takeScreenshot().then(function (png) {
			var stream = createWriteStream("Chercher_tech_Screenshot.png");
			stream.write(new Buffer(png, 'base64'));
			stream.end();
		});
	});
});

Conf file that we use for execution, The only change is SeleniumAddress Parameter in the conf file. SeleniumAddress should be the one That i have highlighted in the Hub in the KiteMatic UI. hub-details-fom-docker

After Connecting the Node


# after node installation
[Hub.start] - Nodes should register to http://172.17.0.2:4444/grid/register/
[Hub.start] - Clients should connect to http://172.17.0.2:4444/wd/hub
[DefaultGridRegistry.add] - Registered a node http://172.17.0.3:5555

Now lets have the look at the conf.js file


exports.config = {
  framework:'jasmine',
  browserName:'chrome',
    seleniumAddress:'http://localhost:4444/wd/hub',
   specs: ['D:\\Protractor Demo\\JSFilesLocation\\test.js'],
}
Please do visit the VNC viewer while running the Script

Package.json with Protractor

Errors I have faced during Docker installation

  • docker: image operating system "linux" cannot be used on this platform.
    This issue happens because you have not switched the Operating system in CMD, so change Operating system using below command
    C:\Program Files\Docker\Docker>DockerCli.exe -SwitchDaemon
  • Error: ETIMEDOUT connect ETIMEDOUT 172.17.0.2:4444
    You will get this error because you might have used some IP for seleniumAddress rather than using the localhost, so seleniumAddress must be localhost then port.
    seleniumAddress:'http://localhost:4444/wd/hub',

Docker Compose in Protractor

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.

In layman terms, Compose is contains set of commands just like batch file in your windows operating system.


services:
    NameOfHub:
        image: selenium/hub
        container_name: NameOfHub
        privileged: true
        ports:
            - 4444:4444
        environment:
            - GRID_TIMEOUT=240000
            - GRID_BROWSER_TIMEOUT=240000
    NameOfNode:
        image: selenium/node-chrome-debug
        privileged: true
        depends_on:
            - NameOfHub
        ports:
            - 5900
        environment:
            - HUB_PORT_4444_TCP_ADDR=NameOfHub
            - HUB_PORT_4444_TCP_PORT=4444

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Recent Addition

new tutorial Selenium Online Training : Our next online training course for Selenium with Java starts from 17th December 2018.

You can attend first 3 classes for free, the total course fee is INR 10,000

The course time would be 8.00 PM(IST) for the first three classes

If you are interested to learn, then you can join the course by sending email to chercher.tech@gmail.com

or Register below


 
Join My Facebook Group
Join Group