FreeBSD(without X)で快適ブラウザテスト計画【turnip(capybara, rspec), poltergeist(phantomjs)】

明けましておめでとうございます。
今年も皆様にとって良い年となりますように！そんな年初めのネタは、X無しのサーバでブラウザテストをする話です。

使うライブラリは、

rspec (3.1.0)
capybara (2.4.4)
turnip (1.2.4)
poltergeist (1.5.1)
phantomjs (1.9.8)

です。ちなみに、OSは FreeBSD 10 p15。 Ruby は 2.1.5 です。

環境整備

まずは、pkg (FreeBSD のパッケージ管理システム) や gem(Rubyのパッケージ管理システム)を使い
必要そうなものをインストールします。
(rbenvを使いローカルに ruby環境を作っているので、gem のインストールはユーザ権限で行っています)

$ sudo pkg instal phatomjs
$ gem install poltergeist
$ gem install turnip

$ sudo pkg instal phatomjs

$ gem install poltergeist

$ gem install turnip

ちなみに、rpec とか capybara は、上記パッケージの前提パッケージなので一緒に入ります。

poltergeist の実験

Web で情報探すと、Rails を前提にしているモノが多く、
なかなか poltergeist を前提にしたサンプルが見当たりません。

しかたないので、ドキュメントとかみつつサンプル作成します。

#!/usr/bin/env ruby
# coding: utf-8
require 'capybara/poltergeist'

# regist poltergeist
Capybara.register_driver :poltergeist do |app|
        Capybara::Poltergeist::Driver.new app, {
                :js_errors => false,
                :timeout => 1000
        }
end

session = Capybara::Session.new(:poltergeist)
session.visit 'http://www.yahoo.co.jp/'
session.click_on 'Yahoo!ブックマーク'
session.save_screenshot "screenshot.png"
puts session.html

#!/usr/bin/env ruby

# coding: utf-8

require 'capybara/poltergeist'

# regist poltergeist

Capybara.register_driver :poltergeist do |app|

Capybara::Poltergeist::Driver.new app, {

:js_errors => false,

:timeout => 1000

}

end

session = Capybara::Session.new(:poltergeist)

session.visit 'http://www.yahoo.co.jp/'

session.click_on 'Yahoo!ブックマーク'

session.save_screenshot "screenshot.png"

puts session.html

あとは、

$ ruby poltergeist_without_rspec.rb

1	$ ruby poltergeist_without_rspec.rb

で実行！
結果…ちゃんと Yahoo!ブックマークの HTML が出力されました…！

…が、

スクリーンショット'(screenshot.png)にお豆腐がたくさん（□　←こればっかり）
日本語が文字化けていました（・ω・｀）

poltergeist の日本語対応(失敗編)

日本語フォントを入れれば良いと聞き、

$ sudo pkg install ja-font-ipa

1	$ sudo pkg install ja-font-ipa

でフォントをインストールしてみました。でも、日本語は表示されません。

調べてみると、dejavu フォントがあると ipaフォントよりも優先されてしまうと書いてあったので、dejavu フォントを削除して実行してみましたが、駄目でした。

次は、ロケールを変えれば良いという情報にたどり着き、

$ LANG='en_US.UTF-8' ruby  poltergeist_without_rspec.rb

1	$ LANG='en_US.UTF-8' ruby poltergeist_without_rspec.rb

で実行してみたところ、日本語が表示されました。
しかし、この挙動は正常な挙動に見えません…。もう少し解決策を模索します。

poltergeist の日本語対応(解決編)

poltergeist が使用している phantomjs がさらに使用している QtWebkit が、
日本語のfamily名を扱えないことがわかりました（フォーラムで問題提起されていたので、そのうち対策されるかも）。
実際、ipaフォントは family名に日本語を含むので、別のフォントを試しにインストールしてみました。

$ sudo pkg remove ja-font-ipa
$ sudo pkg install ja-font-migmix

1 2	$ sudo pkg remove ja-font-ipa $ sudo pkg install ja-font-migmix

そして、先ほどのスクリプトを実行…

$ ruby poltergeist_without_rspec.rb

1	$ ruby poltergeist_without_rspec.rb

無事にスクリーンショットに日本語が表示されました。

Turnipを試す

Turnip について調べてみると、やはり Rails前提の情報が多く見つかります。
今回は Rails前提にしたくなかったので、適当にサンプルを作って動作を確かめてみます。

.
├── .rspec
└── spec
    ├── features
    │　　 └── sample.feature
    ├── spec_helper.rb
    ├── steps
    │　　 └── sample_steps.rb
    └── turnip_helper.rb

├── .rspec

└── spec

├── features

│　　 └── sample.feature

├── spec_helper.rb

├── steps

│　　 └── sample_steps.rb

└── turnip_helper.rb

以下、それぞれのファイルの中身

--color
--format documentation
-r turnip/rspec

--color

--format documentation

-r turnip/rspec

# 空

# 空

require 'capybara'
require 'capybara/poltergeist'

# poltergeist を使うように設定
Capybara.register_driver :poltergeist do |app|
        Capybara::Poltergeist::Driver.new app, {
                :js_errors => false,
                :timeout => 1000
        }
end

# step を読み込む
Dir.glob('spec/**/*_steps.rb').each {|f| load f, true}

require 'capybara'

require 'capybara/poltergeist'

# poltergeist を使うように設定

Capybara.register_driver :poltergeist do |app|

Capybara::Poltergeist::Driver.new app, {

:js_errors => false,

:timeout => 1000

}

end

# step を読み込む

Dir.glob('spec/**/*_steps.rb').each {|f| load f, true}

step 'Poltergeist設定' do
  unless $browser
    $browser = Capybara::Session.new(:poltergeist)
  end
end

step 'Yahoo!を表示' do
  $browser.visit 'http://www.yahoo.co.jp/'
end

step 'ブックマークページへ移動' do
  $browser.click_on 'Yahoo!ブックマーク'
end

step 'ブックマークページである' do
  expect($browser).to have_title('Yahoo!ブックマーク')
end

step 'Poltergeist設定' do

unless $browser

$browser = Capybara::Session.new(:poltergeist)

end

step 'Yahoo!を表示' do

$browser.visit 'http://www.yahoo.co.jp/'

end

step 'ブックマークページへ移動' do

$browser.click_on 'Yahoo!ブックマーク'

end

step 'ブックマークページである' do

expect($browser).to have_title('Yahoo!ブックマーク')

end

Feature: Turnip + Poltergeist テスト
        Background:
                Given Poltergeist設定
        Scenario: Yahoo!ブックマークへ移動する
                Given Yahoo!を表示
                When ブックマークページへ移動
                Then ブックマークページである

Feature: Turnip + Poltergeist テスト

Background:

Given Poltergeist設定

Scenario: Yahoo!ブックマークへ移動する

Given Yahoo!を表示

When ブックマークページへ移動

Then ブックマークページである

あとは、.rspec のあるディレクトリで

$ rspec

$ rspec

と実行すれば、テストが実行できます。

ちなみに、spec_helper.rb と turnip_helper.rb は、rspec(with turnip) を実行するとデフォルトで読み込まれるファイルです。読み込まれる順序は turnip_helper が先で、その次に spec_helper でした。

テストは ruby で書きますが、Webアプリとは完全に独立してかけますので、いろんなWebテストに活用できそうですね…！