docker-seleniumでE2Eテスト環境構築【Python】

こんにちは。サイオステクノロジーの木村です。

今回は docker-selenium を使用してE2Eテスト環境を構築する方法について簡単にご紹介します。
Webブラウザを操作するテストスクリプトの作成には Python を使用します。

1 docker-selenium とは
- 1.1 Selenium
- 1.2 docker-selenium
2 ディレクトリ構成・ファイルの作成
3 動作確認

docker-selenium とは

Selenium

Webアプリケーションのブラウザの操作を自動化し、Webアプリケーションのテストを実施するためのフレームワーク

docker-selenium

SeleniumをDocker 環境で動かせるイメージのこと。詳細はこちら
複数のブラウザで並行して自動テストを実行する SeleniumGrid を構築するための Grid Hub や Grid Node のイメージもありますが、今回は、以下の Chrome がインストールされた Standalone イメージを使用します。
selenium/standalone-chrome-debug
※ -debug というイメージには VNC サーバも付いているため、画面を確認することができます。

ディレクトリ構成・ファイルの作成

以下の構成で、ディレクトリ・ファイルを作成します。

root
 ├── docker-compose.yml
 └── test-app
     ├── Dockerfile
     └── src
          └── testapp.py

docker-compose.yml


version: '3'
services:
  selenium:
    container_name: selenium-chrome
    image: selenium/standalone-chrome-debug:3.141.59-20210929
    ports:
      - 4444:4444
      - 5900:5900
    shm_size: "2gb"
  test-app:
    container_name: test-app
    build: ./test-app
    volumes:
      - ./test-app:/opt/app
    tty: true

4444ポート：Selenium サーバに接続するポート

5900ポート：VNC サーバに接続するポート

Dockerfile

Python を使用したテストスクリプトを動かす環境を作成するため、以下のように Dockerfile を作成します。


FROM python:3.8

ENV PYTHONIOENCODING utf-8

WORKDIR /opt/app

RUN pip install selenium

テストスクリプト（testapp.py）

testapp.py というファイル名でテストスクリプトを作成します。
以下のスクリプトでは、当ブログサイトにアクセスして、「docker」で記事を検索し、検索結果よりタイトルを取得し出力します。また、検索結果の画面キャプチャも取得します。


from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
import os

if __name__ == '__main__':
    # Selenium サーバへ接続
    driver = webdriver.Remote(
        command_executor="http://selenium:4444/wd/hub",
        options=webdriver.ChromeOptions()
    )
    driver.implicitly_wait(10) #seconds

    # 当ブログサイトにアクセス
    driver.get("https://tech-lab.sios.jp/")

    # 検索ボックスに docker と入力して検索
    driver.find_element(By.NAME, "s").send_keys("docker" + Keys.RETURN)

    # 検索結果取得
    result_elems = driver.find_elements(By.CLASS_NAME, "entry-title.mh-posts-list-title")

    # 検索結果よりタイトルを出力
    for elem in result_elems:
        print(elem.text)

    # 検索結果の画面キャプチャを取得し保存
    FILENAME = os.path.join(os.path.dirname(os.path.abspath(__file__)), "img1.png") #ファイル名
    w = driver.execute_script("return document.body.scrollWidth;")
    h = driver.execute_script("return document.body.scrollHeight;")
    driver.set_window_size(w,h)
    driver.save_screenshot(FILENAME)

    driver.quit()