Capybaraでクリックできない場合の対処法

環境


事前に見るべきリファレンス

capybara-readme-ja


事象

テストは通っているが、どうもボタンを押していない。ということが少なからずある。

Facebookのログインページのボタンだ。

f:id:hrt0kmt:20151117210805p:plain

% rspec xxtest.rb
Run options: include {:focus=>true}

All examples were filtered out; ignoring {:focus=>true}

Randomized with seed 2062

アカウント登録フロー
  Facebookでのログイン

Top 1 slowest examples (30.18 seconds, 100.0% of total time):
  アカウント登録フロー Facebookでのログイン
    30.18 seconds ./lptest.rb:42

Finished in 30.18 seconds (files took 1.64 seconds to load)
1 example, 0 failures

Randomized with seed 2062

他にもxx番目の要素が押したい時やアンカーリンクしかない時などを考慮して方法を模索する。


対策

valueやaltからクリックさせる。

# ボタン名 (valueのみ) を指定してクリック
click_button('ログイン')

# リンクのテキスト名かid名を指定してクリック
click_link('texttexttext')
first(:link, 'ログイン').click

# リンクかボタンかどちらかをクリック
click_on('Link Text')

class名やid名をクリックさせる。

# 最初の"class_name"をクリック
page.first(".class_name").click

# 最初の"id_name"をクリック
page.first("#id_name").click

# idを探してクリック
find("#id_name").click

# idを指定してクリック (idのみ)
click_link('id_name')

# 4番目の同じ名前のid (もしくはclass) を指定してクリック
page.all("#id_name")[3].click


XpathやCSSpathを指定して検証する

Developer Toolで概要の要素を右クリックしCSSXpathのパスをCopy可能。

<td class="aaa">
  <a class="bbb">編集</a>
</td>
# CSS パスよりボタンをクリック
find('#article > table > tr:nth-child(1) > td:nth-child(2) > a').click


末尾がnews/show/15に合致するリンクをXpathから探してクリックさせる。

test_link = find(:xpath, "//a[contains(@href,'news/show/15')]")
test_link.click

label-aaaの中に値が入っていることをXpathから探してチェックする。

find(:xpath, '//main/div/div[3]/section/div/div[1]').find('.label-aaa').value

label-aaaの中の値が NEW となっていることをXpathから探してチェックする。

expect(find(:xpath, '//main/div/div[3]/section/div/div[1]').find('.label-aaa')).to have_content 'NEW'

CSSPathから探して値をセットする。

find(:css, "input[id$='donation_pledge_hundreds']").set("10")


それでも Failure/Error: Unable to find xpath だったら

  • ブラウザの幅が影響してたりしないか?


結果

Facebookページの場合、click_buttonでいけた。


参考サイト

http://qiita.com/jnchito/items/607f956263c38a5fec24
http://wiki.u555.jp/index.php?Capybara
http://stackoverflow.com/questions/8338348/clicking-on-image-using-rspec-capybara
http://easyramble.com/find-html-element-with-capybara.html
http://stackoverflow.com/questions/8534365/how-to-use-fill-in-with-find-in-capybara-if-possible