SeleniumWebDriverを使ったE2Eテスト(ブラウザテスト?)の自動化について、PageObjectデザインパターンを使うといいよ、というのはわかったのですが、page-objectモジュールなるものがあるようです。

じつは手元にある(前任者が書いた)テストがコレを使っていて、その使い方をちゃんと理解できていなかったので調べてみました。(初歩的なことだけですが)

環境
- Windows8.1
- Ruby 2.2.2
- gem install page-objectしとく
Rubyもプログラムも未熟者なので、書き方とか改善点をご指摘いただけると嬉しいです。。。
今回はページの操作を試してみました。今回Pageオブジェクトとそれを使う側を同じファイルに書いてしまいましたが、実際のテストではRSpecを使っているのでxxx_page.rbとxxx_spec.rbになってます。
やっていること
- googleで「日本武道館」を検索する

page-objectモジュールを使わない場合

testA.rb

# coding: utf-8
require 'selenium-webdriver'

# Pageクラス
class TestAPage

  def initialize(driver)
    @driver = driver
  end

  def search_query(q)
    # 要素の特定に find_element 使う
    @driver.find_element(:name, "q").send_keys(q)
    @driver.find_element(:name, "btnK").click
  end
end

# Pageを操作する
driver = Selenium::WebDriver.for :firefox
driver.get("https://www.google.co.jp/")
search_page = TestAPage.new(driver)
search_page.search_query("日本武道館")

実行は

> ruby testA.rb

こんな感じで日本武道館を検索してくれます。(その結果、何がどうなってたらテストとしてOKと判断していいのか、というのは別な話としてw)

page-objectモジュールを使う場合

testB.rb

# coding: utf-8
require 'page-object'

# Pageクラス
class TestBPage

  # includeします
  include PageObject

  # これで要素を操作できるようになります
  text_field(:query, :name => 'q')
  button(:search_btn, :name => 'btnK')

  def search_query(q)
    self.query = q
    self.search_btn
  end
end

# Pageを操作する
driver = Selenium::WebDriver.for :firefox
driver.get("https://www.google.co.jp/")
search_page = TestBPage.new(driver)
search_page.search_query("日本武道館")

実行は

> ruby testB.rb

結果はTestAと同じになります。

まとめ

今回は要素が2つですが、実際のテストでは大量にfind_elementしなければならないことが多いです。そんな時に便利そう。

その他にtext_fieldがどんなことしてくれるのかは
http://www.rubydoc.info/github/cheezy/page-object/PageObject/Accessors#text_field-instance_method にあります。

adds four methods to the page object - one to set text in a text field, another to retrieve text from a text field, another to return the text field element, another to check the text field's existence.

text_fieldに対して「set」「get」「element取得」「存在確認」の4つのメソッドが用意されているようです。

追記：要素の操作については
https://github.com/cheezy/page-object/wiki/Elements
に詳しく書かれています。

謎なこと

page-objectモジュールを使うときに

require 'selenium-webdriver'

をしなくても動くのはなんでかな。

page-objectモジュールの使い方

page-objectモジュールを使わない場合

page-objectモジュールを使う場合

まとめ

謎なこと