Use the left/right arrow keys to navigate.

Cuke + Capybara を使ってみよう

Cucumber+Capybara

自己紹介

  • 株式会社オーシーシー
  • 宮國 渡 (MIYAGUNI, Wataru)

    • Twitter : http://twitter.com/gongoZ
    • はてな : http://d.hatena.ne.jp/gongoZ
    • mixi : http://mixi.jp/show_profile.pl?id=67309
    • Github : http://github.com/gongo

Cuke, Capybara ってなに?

その前に BDD について

BDD とは

  • ビヘイビア駆動開発 (振舞駆動開発; Behavior Driven Development)

プログラムに期待される「振る舞い」や「制約条件」、 つまり「要求仕様」に近い形で、自然言語を併記しながら テストコードを記述する (via ビヘイビア駆動開発 - Wikipedia)

  • 振舞例

    Google にアクセスして、検索欄に「Cucumber」って入力したあと、
    「検索」ボタンを押せば、Cucumber について書かれた
    ページ一覧が表示されるよ!
    
まさに要求仕様!

Cucumber = Cucumber

Cucumber = BDD testing tool

$ gem install cucumber

テスト

Google で "cucumber github" を検索すると
"Ruby on Rails - cucumber  - Github" と書かれたページが得られる

これをこう書く

 

$ cat search.feature
    Feature: Search
        Scenario: Find what I'm looking for
            Given I am on the Google search page
             When I search for "cucumber github"
             Then I should see "Ruby on Rails - cucumber  - GitHub"

これをこうする

$ cucumber search.feature

これがこうなる

テスト通った!

Scenario: Find what I'm looking for
    Given I am on the Google search page
    When I search for "cucumber github"
    Then I should see "Ruby on Rails - cucumber  - GitHub"

    1 scenario (1 passed)
    3 steps (3 passed)
    0m4.825s

実際のディレクトリ構成はこんな雰囲気

|-- cucumber.yml            # 実行時設定ファイル
`-- features
    |-- search.feature      # テスト
    |-- step_definitions
    |   `-- search_steps.rb # ステップ
    `-- support
        |-- env.rb          # 環境設定

step を定義する箇所は Ruby で記述

  Given 'I am on the Google search page' do
    @browser.goto 'http://www.google.com/'
  end

  When /I search for "(.*)"/ do |query|
    @browser.text_field(:name, 'q').set(query)
    @browser.button(:name, 'btnG').click
  end

  Then /I should see/ do |text|
    @browser.text.should =~ /#{text}/m
  end

日本語でも書ける!

44カ国語をサポート

$ cucumber --i18n ja
  | feature          | "フィーチャ", "機能"                             |
  | background       | "背景"                                           |
  | scenario         | "シナリオ"                                       |
  | examples         | "例", "サンプル"                                 |
  | given (code)     | "前提"                                           |
  | when (code)      | "もし"                                           |
  | then (code)      | "ならば"                                         |
  | and (code)       | "かつ"                                           |
  | but (code)       | "しかし", "但し", "ただし"                       |

 


      前提 'Google トップページに居る' do
        @browser.goto 'http://www.google.com/'
      end

      もし /"(.*)を検索した時"/ do |query|
        @browser.text_field(:name, 'q').set(query)
        @browser.button(:name, 'btnG').click
      end

      ならば /"(.*)"と表示されている/ do |text|
        @browser.text.should =~ /#{text}/m
      end
  

機能: 検索する
  シナリオ: 検索した結果を表示
      前提 Google トップページに居る
      もし "cucumber github"を検索した時
      ならば "Ruby on Rails - cucumber  - GitHub"と表示されている

  

 

  前提 'Google トップページに居る' do
    @browser.goto 'http://www.google.com/'
  end

  もし /"(.*)を検索した時"/ do |query|
    @browser.text_field(:name, 'q').set(query)
    @browser.button(:name, 'btnG').click
  end

  ならば /"(.*)"と表示されている/ do |text|
    @browser.text.should =~ /#{text}/m
  end

 

機能: 検索する
  シナリオ: 検索した結果を表示
      前提 Google トップページに居る
      もし "cucumber github"を検索した時
      ならば "Ruby on Rails - cucumber  - GitHub"と表示されている

Cucumber = Capybara

Capybara = Web Application testing tool

$ gem install capybara

Capybara の特徴

  • 公式では Rack Application 用と書いてるが、別に Rack じゃなくても無問題
  • Xpath, Javascript, AJAX対応

二つの Driver

  • selenium-webdriver

    実際にブラウザを動かしながらテストを行う

  • culerity(celerity)

    HtmlUnit (Java) と Cucumber (Ruby) をつなげる役割(JRuby)
    headless browser (UIなし) でテストを行う。

実演

Cucumber+Capybara

まとめ

Cucumber + Capybara のよさ

  • commit する度に目で HTML 読むのめんどい時はこれ!
  • 見た目的にインパクト抜群。テストをやった気にもなる(やる気アップ)
  • culerity 使えば cron で毎晩ひっそり動かして、その日の分のテストを勝手に!

    • Selenium 版で夜な夜な画面が勝手に・・てのもあり
  • UnitTest を Rspec で、そこで不足な部分を Cucumber で!

Cucumber + 別の WebApps Tools もある

Watir

Firefox、Safari、IE 等に対応した headless なテストができる

Webrat

Rails とかと組み合わせやすいメソッドとかいろいろ

ものによって JavaScript 対応非対応があるので

  • 文字だけ見たい場合は Webrat (動作軽快)
  • Ajax や JavaScript などは Capybara (多少重い)

終了

  • 今日使った資料

    http://gongo.github.com/javakuche/100612/slide.html
    
  • cucumber の feature もろもろ

    http://github.com/gongo/gongo.github.com/tree/master/javakuche/100612