Categories
Automation Best Practices UI Testing Web Development

Selenium tests in Docker container. Chrome Browser in Docker too.

Selenium tests using browser in Docker

So you built a website. You even run it in Docker container. That’s perfect, but how do you test it? Do you have Selenium tests running in Docker container? Nice. Does the browser Selenium tests drive run in Docker container too? If you feel it’s too much, don’t worry. We’ll see an example with all of that covered 🙂 Keep reading to find out more.

Table Of Contents
  1. Prerequisites
  2. Demo WordPress in Docker site
  3. Selenium Tests in Docker
  4. Chrome Browser in Docker
  5. View Chrome in Docker with VNC
  6. Summary
Selenium tests in Docker explained

Prerequisites

Install on your machine:

  • docker
  • docker-compose
  • git

The tutorial assumes familiarity with basic git, docker and docker-compose commands.

Demo WordPress in Docker site

We’ll run Selenium tests on a demo WordPress site. Previously, I showed how easy it is to Create WordPress site using Docker fast and how to Point host name to WordPress in Docker. Please follow WordPress in Docker host name configurations section in order to successfully run Selenium tests in Docker demo. Next, we’ll see how to run Selenium tests in Docker container. Of course, tests will drive a browser running in Docker container as well 🙂

Selenium Tests in Docker

Let’s jump straight into the demo of Selenium tests in Docker container. 

selenium_tests_in_docker$ docker-compose up -d tests
Creating network "sample_default" with the default driver
Creating sample-db ... done
Creating sample-webserver ... done
Creating sample_browser_1 ... done
Creating sample_tests_1   ... done

Once webserver, db and browser services start and are healthy, Selenium tests run in tests service.

  • Inspect the logs of tests service:
selenium_tests_in_docker$ docker logs -f sample-tests-1
test_smth (__main__.Tests) ... ok

----------------------------------------------------------------------
Ran 1 test in 6.192s

OK
True

What does our sample Selenium test look like? In fact, it’s simple Python Selenium test:

...
BROWSER_URL = 'http://browser:4444/wd/hub'
WP_URI = 'http://docker.wp.com/'

class Tests(unittest.TestCase):
    def test_smth(self):
        options = webdriver.ChromeOptions()
        driver = webdriver.Remote(command_executor=BROWSER_URL, options=options)
        driver.get(WP_URI)
        print(driver.get_screenshot_as_file('/tmp/a.png'))
        driver.quit()

The test connects to the containerized browser and navigates to our containerized website using host name. Then, it saves the website’s screenshot to /tmp/a.png inside tests service container.

Let’s copy and inspect the screenshot. 

docker cp sample_tests_1:/tmp/a.png /tmp
firefox /tmp/a.png

Wow, our Selenium test did its job 🙂

/tmp/a.png

As a Python fan, I chose to write Selenium tests in Python. Though, you can use any language using the same URLs.

Note, that tests service uses custom tests Docker image extending Python 3.8 base image.

Its spec:

  tests:
    build:
      context: ./tests
    image: 'selenium-tests:latest'
    networks: 
      - default    
    command: ["python3", "sample_docker_test.py"]
    depends_on:
      browser:
        condition: service_healthy

and Dockerfile are straightforward:

FROM python:3.8
USER root
COPY requirements.txt requirements.txt
RUN python3 -m pip install -r requirements.txt
RUN mkdir -p workspaces/tests
COPY . workspaces/tests/
WORKDIR workspaces/tests

So far, so good. Lastly, let’s look at how we run Chrome browser in Docker container.

Chrome Browser in Docker

Usually, Selenium tests use WebDriver instance for driving a browser. That’s correct for driving a local browser. Though, Chrome Browser in our demo runs in Docker container. For that reason, the test drives the browser using RemoteWebDriver. So the browser is just another web application accessible via APIs from Selenium tests.

In fact, running Chrome in Docker is quite easy. browser service in our demo uses the official Selenium Chrome docker image.

Its spec is below:

  browser:
    image: selenium/standalone-chrome:91.0
    ports:
      - '${NO_VNC_PORT}:7900'
      - 4444:4444
    shm_size: 2g
    healthcheck:
        test: ["CMD", "curl", "-f", "http://localhost:4444"]
        interval: 30s
        timeout: 10s
        retries: 3
        start_period: 20s 
    depends_on:
      webserver:
        condition: service_healthy

Next, let’s see how to view Chrome interaction with the website using VNC.

View Chrome in Docker with VNC

So we have got a browser in Docker container as well as WordPress website. Is it possible to view the browser’s interaction with the website? Of course 🙂 In order to achieve that, I mapped 7900 port to VNC server running inside browser service container.

Navigate to http://localhost:7900/, click connect. Then, type secret as password and your should see the screen below.

Browser in Docker container via with VNC

Now, go back to the terminal and run tests again while inspecting the Selenium Grid page.

For a brief moment you should see Chrome opening our demo WordPress site. Of course, in the case of a real test suite, you’ll see Selenium tests live via VNC running inside Docker.

Summary

That’s it about running Selenium tests in Docker. As always, feel free to share and comment.

Wondering where to host your WordPress site? Siteground is highly recommended because of its great support and caching solution. ( I use it myself 🙂 ).

If you prefer fully-managed WordPress on cloud try Linode. Get 100$ credit on Linode using this link.

Bonus: Recommended Selenium courses on Pluralsight:

Sign up using this link to get exclusive discounts like 50% off your first month or 15% off an annual subscription)

Recommended books on Amazon:

You may find interesting below articles I wrote: