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

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

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

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

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()

動作確認

docker-compose.yml が配置されているディレクトリに移動し、以下のコマンドでビルドを実行します。

docker-compose build

以下のコマンドで、コンテナを起動します。

docker-compose up -d

以下のコマンドで、テストスクリプト実行環境のコンテナに入ります。

docker exec -it test-app /bin/bash

以下のコマンドで、テストスクリプトを実行します。

python ./src/testapp.py

テストスクリプトが実行され、検索結果のタイトルが出力されます。

また、img1.pngの名称で画面のキャプチャのファイルが保存されます。

アバター画像
About 木村 29 Articles
Azureなどのクラウドでの稼働を主としたアプリケーション開発を行なっています。
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

1人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる