capybaraでtwitter validator toolにの自動テスト

* [twitter validator tool](https://dev.twitter.com/docs/cards/validation/validator)
* [capybara](https://github.com/jnicklas/capybara)

コード
----
```ruby:twicard_test.rb
require 'rubygems'
require 'capybara'
require 'capybara/rspec'
require 'selenium-webdriver'
require 'headless'

PREVIEW_TOOL_URL = "https://dev.twitter.com/docs/cards/validation/validator"
TEST_USER        = "XXXX"
TEST_PASSWD      = "XXXX"
VIEW_URL         = "XXXX"

describe "show twitter card preview tool", :type => :feature do
  before do
    headless = Headless.new reuse: true, destroy_at_exit: false
    headless.start

    Capybara.default_driver = :selenium
    Capybara.register_driver :selenium do |app|
      profile = Selenium::WebDriver::Firefox::Profile.new
      if ENV['http_proxy']
        proxy = URI.parse(ENV['http_proxy'])
        profile["network.proxy.type"] = 1 # manual proxy config
        profile["network.proxy.http"] = proxy.host
        profile["network.proxy.http_port"] = proxy.port
        profile["network.proxy.ssl"] = proxy.host
        profile["network.proxy.ssl_port"] = proxy.port
      end
      Capybara::Selenium::Driver.new(app, :profile => profile)
    end

    visit PREVIEW_TOOL_URL
    within("#user-login") do
      fill_in 'edit-name', :with => TEST_USER
      fill_in 'edit-pass', :with => TEST_PASSWD
    end
    click_button 'edit-submit'
  end

  it "should show card" do
    visit PREVIEW_TOOL_URL

    find('div.modal-footer>button.modal-hide').click
    click_link 'Validate URLs'
    input = find('form.form-validator>input')
    input.set VIEW_URL
    input.native.send_keys(:return)

    # 生成されたカードに対して、Sample Embed Code: Standard Tagsを確認できる
    ## page.save_screenshot('screenshot.png') if page.has_selector?('i.icon-status-3')
    ## find('div.validation-open>div.validation-body').should have_no_selector('i.icon-status-3')

    imagetag = "twitter:image"
    image_url = "XXXX"
    metatags = all('div.embed-code code.metatag-1')
    metatags.each do |tag|
      tag.should have_content(image_url) if tag.has_content?(imagetag)
    end
  end
end
```

説明
----
* twitter validator toolにログインする
 * before doの内容
* プレビュー用URLを入力して、結果を表示できる手段

```ruby:twicard_test.rb
...(ログイン部分略)...
  it "should show card" do
    visit PREVIEW_TOOL_URL
 
    find('div.modal-footer>button.modal-hide').click
    click_link 'Validate URLs'
    input = find('form.form-validator>input')
    input.set VIEW_URL
    input.native.send_keys(:return)
  end
```

* twitter validator toolのtag validation部分に、エラーが出る時に、確認手段

```ruby:twicard_test.rb
...(ログインとプレビュー用URLの入力略)...
    page.save_screenshot('screenshot.png') if page.has_selector?('i.icon-status-3')
    find('div.validation-open>div.validation-body').should have_no_selector('i.icon-status-3')
end
```

 * アラート用のアイコンを説明する

|valid状態	|アイコンカラー	|HTML用class  |
|:-------------:|:-------------:|:-----------:|
|error	        |赤	        |icon-status-3|
|warning	|黄             |icon-status-2|
|normal	        |緑	        |icon-status-1|
|option（省略可)	|灰             |icon-status-0|

 * エラー発見する時に、page.save_screenshot('screenshot.png')で、エラー画面をpngで保存できて、後で確認できて、便利だと思う
* 上記のテスト内容の2部分に対して、meta tag内容(content)の確認

```ruby:twicard_test.rb
...(ログインとプレビュー用URLの入力略)...
    imagetag = "twitter:image"
    image_url = "https://s3-ap-northeast-1.amazonaws.com/tweetcard-test-tokyo/3scom_27507.jpg"
    metatags = all('div.embed-code code.metatag-1')
    metatags.each do |tag|
      tag.should have_content(image_url) if tag.has_content?(imagetag)
    end
```