やりたいこと
webアプリケーションのUIテストを自動化したい
(人の手で同じようなテストを何度も行うのは避けたい...)
今回やること
今回はGoogleの検索エリアにあるテキストボックスに
任意の文字列を入力し値を比較するテストを実装してみます
動作環境
- macOS 10.15.1(Catlina)
- Chrome 78.0.3904.108（Official Build） （64 ビット）
開発環境
- Python 2.7
- Python3 3.6.2
- pytest 4.6.6
- selenium 3.141.0
- Atom
手順
1.準備(ここが一番大変だった)
2.テストコード実装
3.テストコード実行
準備
1.Python, Python3をインストール
Pythonインストールについてはprogateさんがわかりやすく書いてくださっているので、こちらを参考にしてください。
(他力本願)
Pythonの開発環境を用意しよう！（Mac）
2.pytestをインストール
pytestはPythonのテストフレームワークの一つです
unittestなど他のフレームワークと比較して、テストに失敗した原因が分かりやすいそうです
以下のコマンドをターミナルに入力します
pip install -U pytest
詳細はこちら
(他力本g)
3.seleniumをインストール
seleniumは、Webアプリケーションの画面操作を自動化するツールです
主に画面テストの自動化やWeb上での単純作業に使用します
以下のコマンドをターミナルに入力します
pip install selenium
4.ChromeDriverをダウンロード
ChromeDriverとは、Google Chromeを操作するために必要なドライバ（ソフト）です
今回はChromeを操作した結果をテストするため、ソースコードからChromeを操作するためにChromeDriverが必須です
(Chromeでない場合は別のソフトが必要になります)
こちらから
自分が使用しているChromeに合ったバージョンのChromeDriverをダウンロードします
Chromeのバージョンは以下の手順で確認できます
Chromeを開く → 「⌘+,」で設定を開く → サイドバーから「Chromeについて」を開く
5.ChromeDriverを任意の場所に移動
Macでダウンロードした場合は、「ダウンロード」にあると思います
ですが、ChromeDriverを使用するためにはソースコード上からパスを指定する必要があります
そのため、パスで指定しやすい場所に置いておくのがいいと思います
今回はわかりやすくするために、プロジェクト配下にChromeDriverを移動しておきます
(私はここで躓き2時間以上ハマりました😇)
これで準備はOKです！！
素晴らしい！！
テストコード実装
いよいよテストコードを書いていきます
1つ1つ解説していきますが、あとで完成形をまとめて記載します
1.必要なモジュールをファイルに追加します
import os
from selenium import webdriver
2.テストを実行するための関数を作成します
pytestは関数名の前にtest_と記述することでテストコードと認識し、テストを実行します。
# 関数名の前に"test_"をつける
def test_google():
print("test")
3.ChromeDriverをインスタンス化して、テスト対象を取得します
プロジェクト配下にあるchromedriverを相対パスで参照してインスタンス化します
※プロジェクト配下外にある場合、chromedriverのパスは異なります
テスト対象の取得ですが、今回のテスト対象はGoogleの検索エリアにあるテキストボックスです
def test_google():
# chromedriverをインスタンス化
driver = webdriver.Chrome('./chromedriver') # ここのパスは人によって異なる場合があります
# googleのページを取得
driver.get('https://google.com')
# 検索エリアのテキストボックスをインスタンス化
textbox = driver.find_element_by_name('q') # 'q'はテスト対象によって異なります
テスト対象のnameを知る方法はChromeの検証機能を使用して確認します
-
⌘+option+Cで検証機能を起動する - 検索エリアにカーソルを合わせる
- コード内の
nameを確認する
4.テキストボックスに任意の文字列を入力します
def test_google():
driver = webdriver.Chrome('./chromedriver') # ここのパスは任意です
driver.get('https://google.com')
textbox = driver.find_element_by_name('q')
# ここから追加する
# テキストボックスを一度クリアにする
textbox.clear()
# テキストボックスに任意の文字列を入力する
textbox.send_keys('hogehoge')
5.テキストボックスの値と正しい値を比較します
get_attribute('value')でテキストボックスの値を取得し、assertを利用して値を比較をします
def test_google():
driver = webdriver.Chrome('./chromedriver') # ここのパスは任意です
driver.get('https://google.com')
textbox = driver.find_element_by_name('q')
textbox.clear()
textbox.send_keys('hogehoge')
# ここから追加する
# テキストボックスの値と正しい値を比較する
assert textbox.get_attribute('value') == 'hogehoge'
6.Chromeを閉じます
テストを実行後にはChromeを閉じます
def test_google():
driver = webdriver.Chrome('./chromedriver') # ここのパスは任意です
driver.get('https://google.com')
textbox = driver.find_element_by_name('q')
textbox.clear()
textbox.send_keys('hogehoge')
assert textbox.get_attribute('value') == 'hogehoge'
# ここから追加する
# Chromeを閉じる
driver.close()
これで完成!!
素晴らしい!!part2
完成形
def test_google():
driver = webdriver.Chrome('./chromedriver')
driver.get('https://google.com')
textbox = driver.find_element_by_name('q')
textbox.clear()
textbox.send_keys('hogehoge')
assert textbox.get_attribute('value') == 'hogehoge'
driver.close()
テストコード実行
ターミナル上でプロジェクトファイルまで移動します
以下のコマンドを使用してテストを実行します
pytest test_google_text.py
pytestの後に実行したいテストが書かれているファイルを記述します
=============================== test session starts ================================
platform darwin -- Python 2.7.15, pytest-4.6.6, py-1.8.0, pluggy-0.13.0
rootdir: /Users/local/python_env
collected 1 item
test_google_text.py . [100%]
============================= 1 passed in 4.16 seconds =============================
注意
テスト実行中に以下のような警告が表示された場合は、Macの設定を変更する必要があります
解決策
「システム環境開発」 → 「セキュリティーとプライバシー」 → 「一般」 → 「このまま開く」
参考記事
Selenium + pytestを使ってUI自動テストを書いてみる
Selenium ＋ pytest でブラウザの自動テスト：その１ ブラウザを起動して閉じる