kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Capybara で XPath 指定をネストして DRY に書く

Capybara で E2E テストを書くときに,以下の Before のように冗長な XPath 指定を書いてしまうことがある.可読性も考えると共通化してスッキリさせたいところ.

この場合,以下のように within で冗長な XPath を切り出すことができる.1点注意点があって,ネストした XPath は find(:xpath, './/div[1]') のように . を先頭に付ける必要がある.非常にスッキリした!

Before

feature 'xxx' do
  scenario 'yyy' do
    expect(find(:xpath, '//*[@id="zzz"]/div[1]')).to have_content 'value_1'
    expect(find(:xpath, '//*[@id="zzz"]/div[2]')).to have_content 'value_2'
    expect(find(:xpath, '//*[@id="zzz"]/div[3]')).to have_content 'value_3'
    expect(find(:xpath, '//*[@id="zzz"]/div[4]')).to have_content 'value_4'
    expect(find(:xpath, '//*[@id="zzz"]/div[5]')).to have_content 'value_5'
  end
end

After

feature 'xxx' do
  scenario 'yyy' do
    within(:xpath, '//*[@id="zzz"]') do
      expect(find(:xpath, './/div[1]')).to have_content 'value_1'
      expect(find(:xpath, './/div[2]')).to have_content 'value_2'
      expect(find(:xpath, './/div[3]')).to have_content 'value_3'
      expect(find(:xpath, './/div[4]')).to have_content 'value_4'
      expect(find(:xpath, './/div[5]')).to have_content 'value_5'
    end
  end
end

関連記事

"Beware the XPath // trap" のセクションにサンプルが載っている.

github.com

Stack Overflow にも関連する質問が挙がっている.

stackoverflow.com