Selenium UI tests in Docker Containers

Salam alaikum in this video we'll learn how to run selenium UI tests inside docker containers typically we run those UI tests inside virtual machines so we spin up those virtual machines we configure them and start all the required drivers then we launch the tests but this option turns to be a little bit difficult and hard to maintain because virtual machines are a bit hard so we have an easier option or more light option which is using containers and fortunately for us here selenium the development team they have created a docker container that contains all the selenium drivers and required tools in order to run UI tests inside those containers we can even view what is happening inside those containers we can see the actions happening on the webdriver so to start with here our main documentation of course is the selenium open source their code is actually open source so it's available on github and then I have created an article about these videos so contains maybe more details than what I will be explaining in this video so go to check it it's available on media then if you are still a new with UI tests I recommend that you check one of my videos that I have created before about how to create UI tests and how to run them here I have used it dotnet and today we will see a demo on how to run a selenium UI tests and containers and the source code of this demo with all the scripts is available on my github account on this page so to start with here I want to explain a bit the architecture of what we'll be doing today so I'll switch to my OneNote and here actually when we want to run selenium on containers we have let's say two main options first option is to have one container that have all the dependencies and selenium they have created that container and it's available on docker hub so you can use it and so this container contains all the dependencies so that's our first option we could have just one container containing all the dependencies so this is going to be our selenium container and by the way that container is called selenium debug container so so this means that hear from our up or our UI tests should connect to that selenium container okay and this is so that container if we run it on our local machine that could be something like a localhost then 4 4 4 4 that's the default port number used by selenium to connect to the webdriver then we should add WD / help ok that's the first option we have only one container that will run all of our UI tests this is good if we have a few UI tests something like less than 10 you in UI test and those tests doesn't take so long to run so using just one container is really the most simple is the simplest solution but now what if I have dozens of or hundreds or even thousands of UI tests and they want to run those tests on multiple containers and I want to run those tests on different versions of Chrome and not only Chrome I want to run my tests on Chrome I want to test them also on Mozilla Firefox browsers also so what I can do here is that they can create what you call agreed selenium grid and that grid will contain lots of containers with different configurations different browsers for our Firefox and a chrome and different versions of each browser okay so that the architecture of that grid would be something like this will have those different containers so let's say here we have container for for selenium for Chrome version 80 for example and then we'll have another one for Chrome v79 for example and you might have some other containers that will run for example Firefox with different versions and for Chrome 80 we might have something like here let's say 20 container of this instance and chrome 79 maybe we need only nine containers for example for Firefox we can create let's say 13 containers and our UI tests will target those different containers we won't target them directly but you should go through let's say a controller that's the hub so I'll draw that here the selenium help is the container that will already connect to those different containers and our app needs to connect to the selenium hub the default exposed port address for the selenium hub is again the port 4 4 4 ok so we can use that same address to connect to the selenium help so how where do we run all of those containers so here we can run those containers on our local machine for development purposes and here we'll see how to do that using docker compose but later if you want to run those as part of our CI CD pipeline or we want to automate this we want to run it on the cloud then here we can run it on kubernetes for example and we will see a sample kubernetes teamö file for deploying all and configuring loose this grid so let's get started with the code as I have mentioned the source code is available on github and I have downloaded that code and my development machine so here are switch to visual studio and let's take a look to the sample test that I have created here so first of all here we have the task for initializing the test so what I'm doing here is that I'm specifying the options that I want to use so here I say I want to use I want to use a chrome I want to run my tests on Chrome a browser and then later I'm using this option for to get the remote web driver URL what that is so typically when we run the Y tests and the local machine without using containers we use the web driver drop driver by default will connect to your local machine but if you want to connect to another web driver then here we use the remote web driver so the remote web driver will take that the address for the container that we want to connect to okay in my case the address so I can put it in my code but that address might change if I want to run those and put a note on my machine or then I want to connect to a container on kubernetes so for that I have used it the run settings file run settings file is the configuration file for our UI tests or for we can even use it with unit tests also a rent aggression tests so it contains a set of configurations an XML file and here I have a key value pair call it parameter name remote web driver URL and here I have put the local host address for my container okay and here not I have commented some other values that we'll be using later so the remote web driver will take that URL and then it will connect to the driver for for that you for that container then once the configuration was done successfully we move to the test and here this is just a sample test so it will maximize the browser window then it will navigate to the URL which is here my YouTube page do you wait for two seconds for the page to show up and then it will check if that page have been have my name displayed on it okay it's just a sample test now we want to run this test inside a docker container using the first option that I have explained it which is the standalone selenium container so if we go if you go to the github page for selenium you will find that here and there rip okely dokely selenium they have ready publish it lots of containers but runs selenium so we have containers for to run Chrome and Firefox and we have here some other options which are containers to as standalone so this is the version that contains all the configuration and instead alone we have another version action which is standalone but optimize it for debugging what this means this means is that we can't connect to this container through VNC in order to view what is happening inside the code and what is happening with with the browser so I'll be using this image to run my contain my UI tests so for that I switch to vs code and from vs code I run that container so it's the Quran then I exposed the port number for selenium and then I expose a second port number which will be used by VNC in order to connect to the VLC and slide that container then I put the container name right here which is standalone chrome debug okay now my container is running let's make sure docker PS and here it is running on port 4 4 4 4 ok now I want to connect to this container so coming back to my UI test and make sure that here in run settings I have Mike on my remote URL connecting to that localhost and here I'm adding the port number with the / WT / hat that is where we should connect and selenium once that's done now I'm ready to run my UI test so for that I'll go to here where I have the test Explorer and then I click T back here I have added a breakpoint in order to stop a test to make sure my test runs successfully once my tests are starting here I go actually to connect to the container using VNC so for that I will start DNC and I connected to the power 5 9 0 0 which use the second port that they have expose it here it's asking for the password and by default its secret s-e-c r ET it will open this window and you see here from within VNC you can see that the Chrome browser have started right here and it's stupid right there and it writes here chrome is being controlled by automated test software this is the user interface coming from inside the container itself ok so even in containers we can run graphical applications like Chrome and coming back to vs code I find that here I hit the breakpoint so I'd go to continue running right here and then I come back quickly to VNC to see what's happening inside my container so here it's navigating to my YouTube page it will show the page it will check that my name is displayed right here if that is the case then will my test will succeed and that's what happen it right here great so this was our first test that runs inside the container here we have used the standalone debug container but now we want to use the state the option test case which is using the selenium grid so to do that I'll use the docker compose file so I have prepared a docker compose file for that reason and it's available also on the github repo so here I have the composed file ok so here we have three services first one is the hub ok and then we have the different browsers that we want to connect to so we have the Chrome browser and we have written we'll run two replicas of this container and we we'll run three replicas of firefox container okay and all of them they connect to the hub because the hub is the one that will control or will dispatch the UI tests across those a worker containers so let's now see how that works so I go back to my command window right here and make sure that should stop the already running containers name here and here B&C tells me the connection was gracefully closed it because they have stopped it the container okay fine now I got to start my docker compose file by using the command docker - compose up this will take a few seconds and then we see that the hub is started then the Chrome then Firefox containers once that's done now I can go to connect or to run my 8/8 against this selenium help make sure here you have the power 4444 expose it okay so this means I don't need to change the remote URL here because it will stay connected to my local host 4444 and now I can go to run my UI test again so it's running differently here from this nice icon and Bs click on the bag this will start the test for now we won't see the visual stuff as we saw earlier but we can do that actually if we if you specify that and the docker compose we want to use the we want to use the node Chrome debug version ok so from here we can connect to this chrome node if you want I have already done that so again I can start VNC and see what is happening start VNC connect to my local host type the password which is secret and here I see the browser started running if I go back to vs code and click continue from here I can see that now again my test will open the YouTube page and will check if the name if the label exists great and at the end my tests passes cool so this is the option for running the grid using docker compose we have run at those different containers on our local machine ok we said that also we can run this agreed inside kubernetes so how to do that here I have added the Yama the kubernetes GML manifest files which will deploy those different containers if we could do it with docker compose then of course we can also do it with kubernetes so here we have multiple deployment files so first deployment will deploy the selenium hub image ok container will expose the power 4 4 4 4 then another deployment for the selenium node grow ok along with specifying the number of the replicas that we want to create and a third deployment for the firefox browser here we want to say for example - Firefox browsers then of course we need to add the service that that will be used to connect my UI tests ok and the service here again it exposes the poor 4444 great here I have specified that the type should be load balancer in order for me to connect to my cluster from outside the cluster ok so that they can launch the tests from my local machine so from here if you want to deploy those different containers and connect to them then we can deploy it into kubernetes then we just need to change the remote URL to use the public available URL in kubernetes and before finishing this video I want to leave you with the with this page right here so if you go to the IP address of your grid help you open the - slash grid slash console from here you will see the different connected nodes okay the different worker nodes that are connected here you can see I have my firefox browser connected and you can see my chrome connected and you can also read the configuration for that browser okay great so make sure to check the different containers available for docker help selenium okay and also - if you want to get more information but from the official documentation of selenium you can go to selenium dot AF and from here we get more information with more samples that was all for this video please make sure to view my other videos on YouTube channel where here I post videos about anything DevOps containers and kubernetes so thank you and see you in next videos

Channel: Houssem Dellai

Views: 36,407

Keywords: kubernetes, devops, azure devops, azure, aks, k8s, docker, container, ci/cd, continuous integration, continuous deployment, selenium

Id: q-HQ_jDURyk

Length: 21min 7sec (1267 seconds)

Published: Tue Dec 31 2019