Help us understand the problem. What is going on with this article?

WebのUIテスト自動化 - Seleniumを使ってみる

More than 3 years have passed since last update.

Appiumを色々触っているんですが、仕組みが同じSeleniumもちょっと触ってみました。
だいぶ色々なことができそうなのでこちらも触りつつメモを取っていこうと思います。

実際の動画デモ

スクリーンショット 2014-04-20 10.53.24.png
実際にどんなことができるのか、参考動画を撮ってみました。

内容的にはネタな感じにしていますが、どんなことができるか分かってもらえるかと思いますw

Seleniumとは

Seleniumはクロスブラウザ、クロスプラットフォームのUIテストツールです。
ブラウザに表示される要素を操作し、取得して想定されうる状態になっているかをテストできます。
また、画面のキャプチャを撮ることもできます。

検索してみると有用な記事がいくつかあるので、詳細はそちらを見てください。
ここでは簡単に触ったメモや所感を書いていきます。

Seleniumの準備

Selenium自体はいくつかの言語で書くことが出来ますが、今回試したのはRubyです。
(元々Rubyやってみたいと思ってたのでついでに)

なのでまずはRubyの環境を用意します。
Macであればデフォルトで入っているのでそれを使うか、あるいはrbenvなどのバージョン管理ツールを使ってRubyをセットアップします。

コアになる機能はselenium-webdriverです。
なのでgemからこれをインストールしておきます。

gem install selenium-webdriver

chromedriverをダウンロード

selenium-webdriverからそれぞれの ブラウザ用のdriver に接続して、そこから各種ブラウザを操作する、という流れになります。
デフォルトでFirefoxは起動できるようでしたが、Chromeは自分でdriverをダウンロードしてこないといけないようです。

chromedriverのダウンロード

テストの記述

テストはとても簡単に書けるようになっています。
まずはテストコードを見てもらうと分かると思います。

require "selenium-webdriver"

# Firefox用のドライバを使う
driver = Selenium::WebDriver.for :firefox

# Googleにアクセス
driver.navigate.to "http://google.com"

# `q`というnameを持つ要素を取得
element = driver.find_element(:name, 'q')

# `Hello WebDriver!`という文字を、上記で取得したinput要素に入力
element.send_keys "Hello WebDriver!"

# submitを実行する(つまり検索する)
element.submit

# 表示されたページのタイトルをコンソールに出力
puts driver.title

# テストを終了する(ブラウザを終了させる)
driver.quit

これはFirefoxを起動し、Googleに移動したあとでqという名前のついたフォームの要素にHello WebDriver!と入力し送信する、というものです。

最後のdriver.quitによってブラウザが終了します。
テストツールではありますが、これを使うことでなにかの自動処理を書いたりもできそうですね。

要素を取得

要素の取得にはfind_elementメソッドを使います。
第一引数に検索する対象、第二引数に内容を渡します。

driver = Selenium::WebDriver.for :firefox

driver.navigate.to "http://google.com"
element = driver.find_element :tag_name, "div"

指定できるもの

タイプ 意味
:class 'ClassName'
:class_name 'ClassName'
:css 'CssSelector'
:id 'Id'
:link 'LinkText'
:link_text 'LinkText'
:name 'Name'
:partial_link_text 'PartialLinkText'
:tag_name 'TagName'
:xpath 'Xpath'

特定の要素が出てくるのを待つ

さらに、なにがしかの要素が出現するのを待って処理をする、ということもできるようになっています。

# fooという要素が現れるまで待つ
wait = Selenium::WebDriver::Wait.new(:timeout => 10) # タイムアウト10秒
wait.until { driver.find_element(:id => "foo") }

単純に目視で確認するためにwaitを挟む

これの場合は単純に、Rubyにあるsleepメソッドを使うことで実現できます。

# 5秒待ってから処理を実行する
sleep 5

element = driver.find_element(:id, "hoge")
element.click

JavaScriptを実行する

JavaScriptを実行させることもできます。
さらに実行した結果を受け取ることもできます。
以下のようにexecute_scriptメソッドに実行したいJSを書きます。

# alertを表示する
driver.execute_script "alert('hoge');"

# `loation.href`の実行結果を受け取る
url = driver.execute_script "return location.href;"
edo_m18
現在はUnity ARエンジニア。 主にARのコンテンツ制作をしています。 最近は機械学習にも興味が出て勉強中です。 Unityに関するブログは別で書いています↓ https://edom18.hateblo.jp/
http://edom18.hateblo.jp/
unity-game-dev-guild
趣味・仕事問わずUnityでゲームを作っている開発者のみで構成されるオンラインコミュニティです。Unityでゲームを開発・運用するにあたって必要なあらゆる知見を共有することを目的とします。
https://unity-game-dev-guild.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away