スタイル・エッジ技術ブログ

士業集客支援/コンサルティングのスタイル・エッジのエンジニアによるブログです。

Seleniumでフォームのテスト

f:id:styleedge_tech:20191129154106j:plain
Photo by Aaron Burden on Unsplash

こんにちは、スタイル・エッジLABOのTMです。
普段はPHPでのシステムの開発・保守やサイトの運用保守をしています。

ところで、お問い合わせフォームなどのフォームのテストって大変ですよね。
気が付いたらメールが届かなくなってるとか怖いですよね。 フォームのテストを今回は Selenium でやってみたいと思います。

環境の構築

今回はMacPython 3.6.5、対象ブラウザは Chrome での環境構築です。
WindowsPythonのバージョンが違ってても基本的なことは変わらないと思います。

まずは Selenium のインストールです。

pip install selenium

Selenium から Chrome を動かすために ChromeDriver をインストールします。
Selenium では操作するブラウザに対応した Webdriver が必要です。
今回は対象ブラウザが ChromeなのでこちらのダウンロードページからPCにインストールされている Chrome にあった ChromeDriver をダウンロードします。
今回はプログラム中に ChromeDriver へのパスを指定しますが、任意の場所に配置してPATHを通しても良いです。

Seleniumでテスト

対象のフォーム

名前とメールアドレスとコメントを入力出来るフォームです。 sendボタンを押すと入力した内容がメールで送られます。 HTMLはだいたいこんな感じです。

<!DOCTYPE html>
<html>
    <head>
        <title>お問い合わせ</title>
    </head>
    <body>
        <form>
            <h1>お問い合わせ</h1>

            <div>
                名前<br>
                <input type="text" name="name" id="contact_name" />
            </div>
            <div>
                メールアドレス<br>
                <input type="text" name="email" id="contact_email" />
            </div>
            <div>
                お問い合わせ内容<br>
                <textarea name="message" id="contact_message"></textarea>
            </div>
            <div>
                <input type="submit" name="send" value="send" class="btn contact-btn" />
            </div>
        </form>
    </body>
</html>

テストプログラム

フォームに入力した内容がメールに記載されて届くか確認します。 このフォームは確認画面がないものとします。

# -*- coding: utf-8 -*-
import time
from selenium import webdriver

driver = webdriver.Chrome('chromedriverのパス')

driver.get('フォームのパス')

name = driver.find_element_by_name('name')
name.send_keys('テストユーザー')

email = driver.find_element_by_name('email')
email.send_keys('test@example.com')

message = driver.find_element_by_name('message')
message.send_keys('test messagae\n改行のテスト')
time.sleep(1)

submit = driver.find_element_by_name('send')
submit.click()

driver.quit()

sleepで入力した内容を目で確認出来るようにしてます。
name属性を指定して要素を取得して、値を設定してます。

f:id:styleedge_tech:20190719191842p:plain
プログラムで記載した値が入っている

入力した内容がメールで届いているか確認出来れば、今回のテスト成功です。

まとめ

送信のテストだけしましたが、エラーメッセージの確認も出来ます。
Chromeだけの確認でしたが、他のブラウザでのテストも可能です。
とはいえ、
このような画面が絡むテストは大変脆いです。HTMLの変更によってすぐにテストは失敗したりします。
そのようなテストはすぐに放置されて、皆が無視するようになってしまいます。
そのようにならないように日々テストを維持していく必要があります。

さいごに

スタイル・エッジLABOでは、一緒に働く(テストをメンテしたりとか)仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!
株式会社スタイル・エッジLABO採用サイト