Seleniumがすごい便利

最近バイトで面白いテストフレームワークを使ったのでまとめます。久しぶりに感動しました(笑)

Selenium

• Webアプリケーションにおける総合的なテストフレームワーク
• クリック、文字入力などの動作確認をブラウザ上で自動で実際に行う
• 各言語(Java, Ruby, Python, C#)向けにライブラリが提供されている
• そのライブラリを利用し、ブラウザでどのような再現を行うか記述する

例えばtwitterトップページにおける、以下のテストケースを作成してみます。

「アカウントとパスワードを入力、ログイン状態を保存するにチェック、ログインボタンを押す」

これをSeleniumのライブラリを利用し、Rubyで書くとこのようになります。

    # twitterのトップページから
    @driver.get(@base_url + "/")
    # dom要素(#signin-email)に'account_name'と入力して
    @driver.find_element(:id, "signin-email").send_keys "account_name"
    # dom要素(#signin-password)に'password'と入力して
    @driver.find_element(:id, "signin-password").send_keys "password"
    # dom要素(div.remember-forgot)をクリックして
    @driver.find_element(:css, "div.remember-forgot > label.remember > input[name=\"remember_me\"]").click
    # ログインボタンをクリックする
    @driver.find_element(:xpath, "(//button[@type='submit'])[3]").click

こんな感じです。

サーバーを立ち上げ、このプログラムを実行すると、ブラウザ上で実際にアカウントとパスワードが入力され、ログイン状態を保存にチェックが入り、ログインボタンがクリックされます。

これだけでも面白かったんですが、Seleniumのすごいところは

ブラウザ上で行った動作を、そのままコードに自動変換してくれる

というところです。
先ほどのコードも自分で書いたわけではなく、ブラウザで普通に操作しながら生成したものです。
Excelの「マクロの記録」みたいな感じです。
一度書いてしまえば、(DOM要素を変更しない限り)コードを修正しても一瞬でテストが終わるし、
複数のブラウザで挙動を確認する場合でも同じ作業を繰り返さずに済みます。

自分、意味の無い反復作業が本当に苦手で…
テストって辛いものだと思っていたけど、こういうツールを使えば楽しそうですね。

ちなみに上のコードのままではテストケースではないですね。下のテストケースを作成してみます。

「トップページからアカウント/パスワードを入力し、ログインボタンを押す。ページが遷移するのを待って、ユーザー名が表示されたら、ツイート入力欄にSeleniumのテストと入力しつぶやくボタンを押す。結果表示用のDOM要素が現れたら、そこに正しくあなたのツイートが送信されました!と表示されているかチェックする」

これをRuby(RSpec)で出力するとこのようになります。

    @driver.get(@base_url + "/")
    # アカウントを入力
    @driver.find_element(:id, "signin-email").clear
    @driver.find_element(:id, "signin-email").send_keys "yone_public"
    # パスワードを入力
    @driver.find_element(:id, "signin-password").clear
    @driver.find_element(:id, "signin-password").send_keys "XXXXXXXX"
    # ログインボタンをクリックし、ページが遷移されるのを待つ
    @driver.find_element(:xpath, "(//button[@type='submit'])[3]").click
    # アカウント名にS.Yoneが表示されているかチェック
    verify { (@driver.find_element(:xpath, "//div[@id='page-container']/div/div/div/a/div/div/b").text).should == "S.Yone" }
    # つぶやき用テキストエリアをクリック
    @driver.find_element(:id, "tweet-box-mini-home-profile").click
    # 文字を入力
    @driver.find_element(:id, "tweet-box-mini-home-profile").clear
    @driver.find_element(:id, "tweet-box-mini-home-profile").send_keys "Seleniumのテスト"
    # つぶやくボタンを押す
    @driver.find_element(:xpath, "(//button[@type='button'])[4]").click
    # 結果表示用のナビゲーションバーが現れるのを待つ
    !60.times{ break if (element_present?(:css, "span.message-text") rescue false); sleep 1 }
    # 結果表示があなたのツイートが送信されました！かチェック
    verify { (@driver.find_element(:css, "span.message-text").text).should == "あなたのツイートが送信されました!" }

これを実行した結果が↓↓

最後だけエラー吐いてますね…
二回同じツイートを繰り返したので跳ね返されちゃったみたいです(笑)