{"id":6700,"date":"2017-09-15T01:22:21","date_gmt":"2017-09-15T05:22:21","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=6700"},"modified":"2024-10-16T16:21:46","modified_gmt":"2024-10-16T20:21:46","slug":"view-docker-container-display-using-vnc-viewer","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/view-docker-container-display-using-vnc-viewer\/","title":{"rendered":"View a Docker container’s display using VNC Viewer"},"content":{"rendered":"

It is useful to be able to view your Selenium tests running within a Docker container. This can help you to debug issues better and have more confidence in your tests. We found the ability to look at the tests especially useful when performing some complex actions like drawing, dragging, dropping, etc. To view the Docker container’s display, we setup up good old VNC<\/a> in the container and used VNC viewer<\/a> to see the display of Docker container. This blog will help you in case you too want to setup VNC Server and VNC Viewer and view the Container display.
\nNOTE:<\/strong> If you are totally new to Docker, please consider reading our previous post<\/a> first.<\/p>\n

\n

Steps to setup with VNC and view container display:<\/h3>\n

For our demo, we will use the Qxf2-pom-essential <\/a> docker base image and Qxf2 public page object model<\/a> which we have discussed as part of our previous post<\/a>. Below are the steps involved to get set up with VNC.<\/p>\n

    \n
  1. Setup and enable VNC server on the Container<\/li>\n
  2. Setup VNC viewer on your local system<\/li>\n
  3. Connect to VNC server using IP and Port Address<\/li>\n<\/ol>\n
    \n

    Step 1: Setup and enable VNC server<\/h3>\n

    To setup and enable VNC server, we need to
    \na) Install VNC server
    \nb) Expose port to connect and share display data with VNC Viewer
    \nc) Enable VNC server along with the password and display arguments details.<\/p>\n

    For this post, we are going to use a Docker file and a shell script file. This will help us to clone our Qxf2 public page object model<\/a> into the container using git, install VNC server, expose port, enable VNC and run the test.<\/p>\n

    NOTE: <\/strong> For the demo, we will use git to get our open source code inside the container. Ideally, we would prefer to use Docker volume feature to get the code inside the container. Avoid git in case you are using a private repository due to security reasons.<\/p>\n

    The Dockerfile below will run Qxf2 POM tests and view the test running across Chrome\/Firefox using VNC viewer. For more details about how to use our Qxf2-pom-essential <\/a> image for running Selenium tests refer to the blog post here<\/a>. <\/p>\n

    Pay special attention to the lines that:
    \na) installs VNC (using apt-get)<\/p>\n

    \r\nRUN pip install --upgrade pip \\\r\n        && apt-get update \\\r\n\t&& apt-get install -y git x11vnc \r\n<\/pre>\n
    b) open up port 5920<\/p>\n
    \r\n#Expose port 5920 to view display using VNC Viewer\r\nEXPOSE 5920\r\n<\/pre>\n
    Our entire Dockerfile looks like this:<\/p>\n
    #Content of the entire Dockerfile\r\n#Dockerfile built to run Qxf2 POM tests and view the test running across chrome\/firefox using VNC viewer\r\nFROM qxf2rohand\/qxf2_pom_essentials\r\nMAINTAINER Qxf2 Services\r\n\r\n#Upgrade pip, install Git & VNC \t\r\nRUN pip install --upgrade pip \\\r\n        && apt-get update \\\r\n\t&& apt-get install -y git x11vnc \r\n\r\n# Add entrypoint.sh and other available files to image\r\nADD . \/usr\/qxf2_pom\r\n\r\n#Change directory and clone Qxf2 Public POM repo\r\nRUN cd \/usr\/qxf2_pom \\\r\n\t&& git clone https:\/\/github.com\/qxf2\/qxf2-page-object-model.git \r\n\r\n#Set envirnmental variable for display\t\r\nENV DISPLAY :20\r\n\r\n#Set working directory\r\nWORKDIR \/usr\/qxf2_pom\/qxf2-page-object-model\r\n\r\n#Install requirements using requirements.txt \r\nRUN pip install -r requirements.txt \r\n\r\n#Provide read, write and execute permissions for entrypoint.sh and also take care of '\\r' error which raised when someone uses notepad or note++ for editing in Windows.\r\nRUN chmod 755 \/usr\/qxf2_pom\/entrypoint.sh \\\r\n\t&& sed -i 's\/\\r$\/\/' \/usr\/qxf2_pom\/entrypoint.sh\r\n\r\n#Expose port 5920 to view display using VNC Viewer\r\nEXPOSE 5920\r\n\r\n#Execute entrypoint.sh at start of container\r\nENTRYPOINT [\"\/usr\/qxf2_pom\/entrypoint.sh\"] \r\n<\/pre>\n
    The shell script file i.e. entrypoint.sh file below will help to configure and run the VNC server along with starting the xvfb, pulling the code from git and then running the test.<\/p>\n
    #!\/bin\/bash\r\n# entrypoint.sh file for starting the xvfb with better screen resolution, configuring and running the vnc server, pulling the code from git and then running the test.\r\nexport DISPLAY=:20\r\nXvfb :20 -screen 0 1366x768x16 &\r\nx11vnc -passwd TestVNC -display :20 -N -forever &\r\ncd \/usr\/qxf2_pom\/qxf2-page-object-model\/\r\ngit pull\r\npytest -B chrome -s -v > pytest_report.log\r\nwait\r\n<\/pre>\n
    To create an image using above dockerfile, you need to save both files at same directory and use the following command:<\/p>\n
    docker build -t new-image-name Path\/to\/Dockerfile\r\n<\/pre>\n
    \n
    Step 2.  Setup VNC viewer on your local machine<\/h3>\n
    VNC server sends\/transmit display data information over a specified port. To catch and read that data, we need to get setup with VNC viewer which acts as a client. VNC viewer is available for multiple platforms, you can download it for your platform from RealVNC<\/a> and install it.<\/p>\n
    \n
    Step 3. Connect to the VNC server using IP and Port Address<\/h3>\n
    To connect VNC viewer to VNC server, you need to know the IP address and port address.<\/p>\n
    Get IP Address:<\/strong> You need to use the following command to get IP Address.<\/p>\n
    docker-machine ip<\/pre>\n
    NOTE: <\/strong>  docker-machine ip <\/code> command won’t work on Linux. Use host name i.e. ‘localhost’ instead of IP address. <\/p>\n
    Get PORT address:<\/strong> Port address will depend on ‘docker run’ command. In step 1, we built an image which includes VNC server and our Qxf2 public pom code. When we create Docker container using the following command, it will enable display along with Xvfb, VNC server and run the test across chrome.<\/p>\n
    docker run -it -p 5920:5920 image-name-which-provided-in-step-1<\/pre>\n
    Above command connects\/maps local host port 5920 to container port 5920 and to view the running tests on display, you need to connect with VNC server quickly because once test run gets finished it will show you only black screen.<\/p>\n
    Now, we know both IP and port address. Next, we need to connect with VNC viewer using both IP and port address. To connect with VNC Viewer, you need to follow following steps.<\/p>\n
      \n
    1.  Open VNC Viewer: Look at VNC Viewer IDE in following Fig. 1. 
      \"\"<\/a>
      Fig. 1 VNC Viewer IDE<\/figcaption><\/figure><\/li>\n
    2.  To connect with VNC Server, enter IP Address\/hostname and port address in search bar. IP Address\/hostname and port address must be separated using ‘:’. For example:
      \nFor windows: docker-machine ip: port number  XXX.XXX.XX.XXX:5920<\/code>
      \nFor Linux: local host ip\/ hostname: port number localhost:5920<\/code>
      \n
      \"\"<\/a>
      Fig. 2 Enter IP address and Port number to connect with VNC server<\/figcaption><\/figure><\/li>\n
    3.  After entering IP and Port number, you will come across following encryption window shown in fig 3. 
      \"\"<\/a>
      Fig. 3 Encryption Window<\/figcaption><\/figure>
      \nClick on ‘Continue’ button on window to move ahead.<\/li>\n
    4.  Click on ‘Continue’ button, you will visit following window shown in fig 4.
      \"\"<\/a>
      Fig. 4 Enter Password to connect and view display<\/figcaption><\/figure>
      \nEnter password here to connect with VNC server and view docker container display. For above dockerfile, the password to connect VNC server is ‘TestVNC’. You can change the password by editing entrypoint.sh file before building the image.<\/li>\n
    5.  Once you get connected with VNC server successfully, you can the view the docker container dispaly your tests running on chrome as shown in fig 5. 
      \"\"<\/a>
      Fig. 5 Docker Container Display<\/figcaption><\/figure><\/li>\n<\/ol>\n
      \n
      Hope you enjoyed this post. To know more about the different ways to get your code inside the container, please stay tuned. We will post it soon.<\/p>\n
      If you are a startup finding it hard to hire technical QA engineers, learn more about Qxf2 Services<\/a>.<\/strong><\/p>\n
      \n
      QA services for startups and early-stage products by Qxf2 Services<\/h3>\n
      This article is courtesy of Qxf2’s commitment to sharing what we learn. We are among the rare breed of testers who continually learn, evolve and share our learning with the larger testing community. Expert testers who are technical as well are worth their weight in gold. They elevate any software team that works with them. In addition to top-notch technical testers, Qxf2 provides many excellent software testing services geared towards startups<\/a> that are usually not found in the market. Like front-loaded QA, fractional QA, specialized roles, catch-up services for startups that have taken on too much testing debt, etc. If you are a startup looking for QA, we encourage you to visit our website and get in touch.<\/p>\n
      \n