Running Tests in Docker | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to run Playwright tests in a Docker container . Using containers is advantageous for running tests in environments like CI/CD servers , as they preserve the necessary configuration for successful execution. Key Concepts Docker Overview : Docker allows running applications in isolated environments called containers, which are more lightweight than virtual machines . Installation : To use Docker, download Docker Desktop from docker.com and install it on your system (Mac, Windows, or Linux). Docker vs. Virtual Machines : Unlike virtual machines that allocate fixed resources, Docker containers use host resources on demand, making them more efficient. Setting Up Playwright in Docker To run Playwright tests in Docker: Create a Dockerfile in your project root. Specify a base image recommended by Playwright. Create a working directory and copy project files into the container. Install dependencies using npm install and npx playwright install . Build the Docker image using docker build -t your_image_name . . Running Tests To execute tests inside the container: docker run -it your_image_name After running the tests, reports are generated inside the container. To access them on the host machine, use a docker-compose.yaml file to define services and volumes for report extraction. Conclusion Docker simplifies running tests in isolated environments, ensuring consistency across different systems. By creating a Dockerfile and a docker-compose file, you can effectively manage dependencies and test execution.
Video Transcript
In this lesson, we will talk about how to run playwright tests in Docker container. So using containers is very helpful when you want to run your test, for example, in CI CD server. Container helps to preserve all the configuration of the environment that is required for your framework to be successfully executed. So if you can run the container with a test on your computer, it means that this container can be successfully executed on any other computer that has a Docker engine installed. So in this lesson, I will show you how to do that. Let's get into it. So this lesson is a high level introduction into Docker concept for your future understanding how you can leverage this tool running your test in the CI CD server or any other systems. So in order to use Docker, first of all, you will need to download Docker desktop in order to be able to run Docker containers. So you need to go to the docker.com and on the main page, you will have a few options, download for Mac, for Windows or for Linux. You will need to install this binary and run it. So after you run Docker desktop on your computer, you will see a little icon of the little whale with containers, which looks really cool in my opinion, that Docker is running. And also if you click on that, you click on the dashboard, something like that. You should see the dashboard to see different settings of Docker and different volume images or containers. Right now, we don't have anything else here because we don't have any containers running or created, but we will see some of the containers later on in this dashboard. And very high level, what is actually a Docker? So I found this article online with just a high level explanation and difference between virtual machines and Docker containers. So you probably heard about virtual machines, that technically different operating systems can be running on the same computer and inside of those operating systems, you can run different applications. So this is the main concept of the virtual machine. And each virtual machine technically is reserving a certain resources of the computer, such as CPU or memory, allocating those resources and using it for the operation inside of the virtual machine. Docker container has a kind of a similar approach, but has a bunch of advantages. So it's running on the Docker engine and each Docker container runs in complete isolation. And Docker container inside also may have or may not necessarily have an operating system that it will run on. And also Docker containers are much more lightweight on using the resources. So container is not reserving certain memory or CPU in advance. It's just using those resources of the host machine on demand. So when it needs a certain number of memory or RAM or disk space, it's just get that resources from the host computer at the time of the execution. And also Docker container is easy to spin up and shut down. So when you need a certain application to run in the certain type of the configuration or operating system, it's very easy to spin up, run this container and shut down. While when you use a virtual machines, it's not that simple and easy to spin up virtual machine and then run within something of that virtual machine. Also, one of the benefit of Docker that it's very scalable solution. So if you able to run something in the container on your computer, then it's pretty much 100% guarantee that exactly the same container will be executed on any other computer that has a Docker engine. It can be other computer or CI CD server or anything else. So it's very reliable approach on running your application on other systems and managing dependencies for that application. All right, so let's go back to our application and we will run our test PW practice app inside of the Docker container. But before starting configuration, let's make a couple of adjustments to the project. So first of all, I want to remove this global timeout. It's set up for 60 seconds, but tests in Docker may run a little bit slower since it's not a native for operating system environment. So I want to remove this dependency of 60 seconds completely to avoid the failures. And also, I want to add a second settings to the framework to spin up my web server automatically when I want to run the test instead of spinning this up independently. And Playwright for that has a very nice settings that will manage this. It's called web server and I want to execute command npm run start. And I expect that my server will be hosted on the HTTP. So I'll just simply copy this URL, HTTP 4200. All right, that's it. Now we don't need to worry about running this server independently. Playwright will handle this for us. And now to verify this, all we need to do is just to run this script, page objects.chrome. And this is what we will try to run in Docker container. So I will run npm run page objects.chrome, enter. And you can see that Playwright is generating browser application bundles to start up the test application automatically. And after it will be start up, it will run the test. Okay, application is complete and it's running the test. Test number two. After test is completed, it automatically shuts down the web server. So this is what we want. And report is generated in the folders as designed. So let's run exactly the same script, but not inside of the host computer, but inside of the Docker. How we do that? We need to create a new file in the root of the project and call it Docker file. Docker file. You can see the icon change to the whale. So Visual Studio Code recognize that it will be a Docker file. Each Docker file usually start with a base image, something that we need to begin with to build our image. It start with a keyword from, and we need to find which base image we're going to use. And on the Playwright documentation, Playwright gives us a base recommended image that has all needed dependencies, such as operating system, Node.js and any other dependencies that are needed to successfully run Playwright inside of the container. So I take this as my base image, control C, going back to the project and paste it right here. And also my Playwright version should match the version that I have in the package.json. So right now, Playwright in package.json that I have is 137.1. So I match the image, exactly the same version. All right, first step is done. Now we need to make some configuration inside of the container. So container is completely blank. It doesn't have any folder structure. It doesn't have anything else. So far, it has only this base image. So let's create a new folder where we will keep our projects. And I run the command, run make directory. And let's say I call this directory app, which is application. Then I want to switch to this directory. It will be our working directory down the road after that. After that, I want to copy all the files from my host computer into container. So host computer is the place where all the files are located. Since the Docker file located in the root of our project, and I want to copy everything from the root, then I put just a dot. And then destination folder inside of the container will be dash app. This is the folder that we just created. Okay, that is done. The next step, I want to install all dependencies related to our test project. Dependencies are installed from the package.json. And I run this command, run npm install dash dash force, to make sure we will not have any dependencies conflict. And the second command that I want to run, run npx playwright install. With this command, we will install all required browsers that needed for the playwright to run the test. So it will install Chromium, Firefox, and WebKit. So that's pretty much it. Configuration is ready, and we can make a build of our container. Inside of the terminal, I type commands docker build dash t. I provide the name, how do I want to name this container? Let's say pw page object dash test. And I put the dot pointing that I want to build in this directory, and I hit Enter. And when you run this for the first time, you see that Docker is downloading right now all the required images and dependencies from the Docker container registry. You can see it's downloading right now files. You may need require a pretty good internet because it's downloaded gigabytes of information, and you need to wait while this build will be completed. Okay, now let's go into the next step. It's copying the files to the app folder, running npm install right now, the next step. Now it's running npx playwright install, and it is complete. So now in order to see if this image was created, we can type docker images. And we can see image was created, the size of 3.2 gigabytes. And it has this name as we created in configuration. So now we're ready to run this image. Before that, let me quickly delete the reports, because I want to show you later something on playwright report and test result. I want to delete those files from my host computer and delete those as well. So I expect a new reports to be created. All right, so to run this image, I type command docker run-it, and provide the name of the image. PwPageObject.test, and hit Enter. And image is running, and we entered inside of the image itself. And now we can just run the command to run the test inside of the container. Npm run page objects-chrome. And this is the command from our package.json file. Running the test, and right now test is executing inside of the container. You see the web server is building to prepare the environment to run the test. And it may take longer than you normally would run it on your host computer, because it is running in Docker, and it is kind of isolated virtual environment. And it is running the tests, test number one, test number two, and it's done. Two tests passed, and we are still inside of the container. But look at this. If I try to open this Playwright report folder or test results folder, they are empty. So no reports are generated. But actually we see the message here, NPX Playwright show report. So the trick is that report is actually is generated. But this report saved inside of the container. It's not saved on our host computer. We need somehow to get this report from the container and save it on our host computer in order to view it. You can, of course, do it through the command line, but the most convenient way to organize working with a Docker is using a Docker compose file. Docker compose is a kind of orchestrator for the Docker containers. So within a single Docker compose file, you can run multiple containers, chain these containers, prepare the sequence of execution, define the dependencies, and so on. So this is the main file how to run different containers in the same place and specify the commands. So let's create a simple Docker compose file right now to run our Docker container with Playwright test and extract the reports to the host machine after the execution. So you can see we are right now still inside of the container. You can click Ctrl D to stop the session and exit from the container. All right, so let's create a Docker compose file. I go to the root of our project and create a new file called docker-compose.yaml. And now we need to configure this file how we want to run our Docker file. Each Docker compose file always start with a version. So let's put the latest version of the Docker compose, which is 3.8 as of today. Now we need to define a services, services section. And let's create a first service and just give it a name. Let's say Playwright test. It doesn't matter what the service name will be. It's just for our reference. Then inside of our service, we want to provide an image. Image and give it any name that we want to name it. Let's say call it Playwright test. And we want to build this image based on the Docker file. Since this image does not exist in any container registry, we want to build this image. And we want to build it in the root. So we put a dot and it will be built based on the Docker file. So Docker compose file will look into our Docker file to build this image. So what else? After we build this image, we want to run the command to actually run the test. And the command will be npm run page objects Chrome, this one. And after the test is executed, we want to copy the reports from the container into the host computer. And in order to do that, we need to use a keyword volumes. So I type volumes and then I type, okay, on the host computer, I want to save data in the Playwright report folder from container, which is located app-playwright-report folder as well. So I put app because inside of the Docker file, we define that working directory will be app. So I navigate to app slash playwright report. And the files from the playwright report on the container will be copied into the playwright report folder on the host computer. And the same thing I want to do with the second folder, which is test results. So test results and app test results. Well, that's it. So now all we need to do is just run this Docker compose file. It will create a Docker image for us. It will run the command to run the test. And after the test, it will copy the test results into our computer. So to run the Docker compose, we type docker-compose up dash dash build. We provide dash dash build because we want to build a new Docker image. Let's run the test. And it's performing the build right now. Some of the files already cached from the previous runs of the Docker image. Copying the files. NPM install. Okay, it's created and right now it's running the test inside of the container. First step is to build a web server. Web server is ready and now tests are running. First test. Second test. Two tests passed. And execution is done. Report is generated. And now if we look into the folders on our host computer, now we see reports are generated. And I can open this index.html of the HTML reporter. And this is the result of the test execution. So it worked perfectly fine. All right, let's quickly summarize what we did in this lesson. Docker is a very convenient tool to run your test in isolation and use this configuration running on different computer, host machines, servers, and so on. In order to configure a Docker container, you need to create a Docker file. Inside of the Docker file, specify a base image. Usually it's provided by Playwright. Then copy project into this container and run the commands to prepare your environment and prepare your container. Then a good practice would be create a Docker compose file that will orchestrate execution of your container, where you can put your command to run your test and volumes to copy the test result from the container into a host machine. All right. Thank you guys and see you in the next lesson.