Selenium IDEで作ったテストコードをDocker化したSeleniumでE2Eテスト

## 概要

Docker環境を作ることで大体どの環境でもDocker化したシステムが動作できるのはとても魅力的だと思います。

QAエンジニアをやっているとテスターさんに[Selenium IDE](https://www.selenium.dev/selenium-ide/)を導入してもらって、テスト要件やテストケースをもとにテスト操作することで自動的にでテストコードができるので便利です。
このときできたテストコードは、調整が必要なのでそのままE2Eテストとして扱うのは難しいですが、全部使えないとしても一部のテスト（認証関連や全ページ遷移の確認など）はそのまま運用できるぐらい効率の良いやり方だと思います。
ですが、できたテストコードをテスターさんがSelenium IEDを起動してテストの実行を手動作業することになるのでちょっと非効率になります。

　　　<img width="350" alt="スクリーンショット 2021-08-27 12.20.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/405a95e3-05e4-451e-26a9-54586e50593d.png">

そこで今回は、上記のイメージズのようにSeleniumを実行できる環境をDockerで作って、定期実行させることでE2Eテスト環境がコスパ良くできると考え、その方法をまとめます。

また、Dockerじゃなくても他のやり方として、JenkinsにSeleniumを実行するような環境をあるのであればそっちを活用してもいいと思います。


### ゴール

今回は、タイトルの通り「Selenium IDEで作ったテストコードをDocker化したSeleniumでE2Eテスト」できる環境を作れるところまでとなります。


## 環境

次の環境がセットアップできたらどのPCでも大丈夫です。
あとは、お好みでエディタが入っていると作業しやすいです。

- Docker
- Docker Compose
- Selenium IDE



## Selenium IDE

先にテストコードを作っておきましょう。
セットアップや途中でDockerが動かない状況が起きたとしても、最悪Selenium IDEでE2Eテストできるので。

例として今回は、Googleにアクセスして「qiita」を検索して、トップにヒットして`qiita.com`にアクセスしてマイページまで正常にアクセスできるのか確認するテストを作ってみました。
Selenium IDEの入門的な話は割愛するので、他の記事を参考にしてください。

まずは、Selenium IDEのプロジェクトを作っていきます。
<img width="220" alt="スクリーンショット 2021-08-27 12.40.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/433b89fd-e1c7-f896-5515-7a4088fd5275.png"> <img width="220" alt="スクリーンショット 2021-08-27 12.42.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/44c9b172-4281-851c-8a60-0ad2a2367881.png"> <img width="220" alt="スクリーンショット 2021-08-27 12.43.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/b48d1c8b-9c9a-8ddc-8b37-22819dd1b69a.png">

作成すると早速レコーディングが始まるのでテストしたい操作を登録していきます。
<img width="220" alt="スクリーンショット 2021-08-27 12.44.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/7cb6b7f8-598e-ba7e-4b0a-19f94f6ba239.png"> <img width="220" alt="スクリーンショット 2021-08-27 12.45.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/08224553-2364-1125-dec9-b7764c83536d.png"> <img width="220" alt="スクリーンショット 2021-08-27 12.46.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/fd5ede56-bce2-1ff8-ef18-6989558ea45a.png">

登録が終わったらSelenium IDEのアイコンからエディタを開いて、登録したテストを保存します。
<img width="400" alt="スクリーンショット 2021-08-27 12.47.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/eb31a4be-990f-45a9-b379-fd6d2bf03ecb.png"> <img width="250" alt="スクリーンショット 2021-08-27 12.48.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/611e2c8a-a9fd-bd57-ffdb-7e499696688a.png">

保存したテストを右クリックからテストコードをダウンロードして、最後にプロジェクトを保存（Ctr＋s）すればSelenium IDEの作業は一旦終わりです。
<img width="220" alt="スクリーンショット 2021-08-27 12.49.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/9737c879-3a23-44ef-1e49-85a704654f21.png"> <img width="220" alt="スクリーンショット 2021-08-27 12.49.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/b39a691b-3bce-8b1b-a5ee-23ba9d614356.png"> <img width="240" alt="スクリーンショット 2021-08-27 12.50.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/cf81bd8b-e622-53c1-82cf-4589913de1e4.png">


## Docker

次にSeleniumのDocker環境を作っていきます。
Dockerに関しても入門的な話は割愛するので、他の記事を参考にしてください。

`/src`に先ほどダウンロードしたテストコード（test_202108qiitauserpagecheck.py）を配置します。



```dockerfile:Dockerfile
# https://q-three.com/archives/1031
# ベースイメージはpython:3.7
FROM python:3.7
USER root

# 環境変数設定
ENV PYTHONIOENCODING utf-8
ENV TZ='Asia/Tokyo'

# workdirの設定
WORKDIR /opt/

# 作業ディレクトリ作成
RUN mkdir /opt/src
RUN mkdir /opt/data

# apt-getのアップデートなど
RUN apt-get -y update
RUN apt-get -y clean
RUN apt-get -y autoremove
RUN apt-get -y upgrade
RUN apt-get install -y apt-utils unzip
RUN pip install --upgrade pip

# Japanese Localization
RUN cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

# google-chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add && \
      echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | tee /etc/apt/sources.list.d/google-chrome.list && \
      apt-get update && \
      apt-get install -y google-chrome-stable

# ChromeDriver
ADD https://chromedriver.storage.googleapis.com/92.0.4515.107/chromedriver_linux64.zip /opt/chrome/
RUN cd /opt/chrome/ && \
      unzip chromedriver_linux64.zip

# python package
RUN pip install selenium && \
      pip install bs4 && \
      pip install oauth2client

ENV PATH /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/opt/chrome

# コンテナ起動時に実行するコマンドを設定
CMD [ "python", "/opt/src/test_202108qiitauserpagecheck.py" ]
```

```yml:docker-compose.yml
version: '3'
services:
  selenium:
    container_name: "selenium"
    build: ./
    volumes:
      - ./src:/opt/src
      - ./data:/opt/data
    ports:
      - "5001:5001"

```


### selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version $VERSION_CODE

[【Python/Selenium】ChromeDriverバージョンエラー対処法](https://yuki.world/python-chrome-driver-version-error/)

でまとめられているようにDocker環境を作っている最中にこのエラーに遭遇しました。
原因は、ChromeDriverをインストールする際に指定しているリンクがバージョンコードも指定していて、このバージョンをWebDriverがサポートできていないことらしいです。

https://chromedriver.storage.googleapis.com/index.html

にてダウンロードできるWebDriverのバージョンを確認できますが、このエラーに後に

> Current browser version is xxx.xxx.xxx.xxx

のように対応できるバージョンが指定するかのように表示されて、このバージョンが`chromedriver.storage.googleapis.com`になかったりします。
そのときは、一つ古いバージョンをダウンロードすることでエラーが解消できました。


### 参考記事

- [Docker+Pythonを使ってスクレイピング環境を構築する](https://boardtechlog.com/2020/07/programming/dockerpython%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B%E3%80%90mac%E3%83%BBwind/)
- [Docker 内で Chrome とSelenium を使ったスクレイピング実行環境を構築してみた](https://q-three.com/archives/1031)
- [第662回　Docker+Selenium ServerでWebブラウザ自動操作環境を作る](https://gihyo.jp/admin/serial/01/ubuntu-recipe/0662)



## まとめ

これで、Selenium IDEで作ったテストコードをDocker化したSeleniumでE2Eテストできる環境ができました。
ですが、これで終わりではなく、

- テストした結果をどのように可視化しないとE2Eテストの運用はできない
- テストコードを手動配置ではなく自動的に共有することで全自動化したいい

などの課題があるので、試行錯誤中なので完成したら改めてこの記事を更新しようと思います。
DockerよりもJenkinsにSeleniumを実行するような環境があれば、正直そっちの方がいいと思いますw