Capybara Webkit，找到特定的 li 元素，单击删除按钮并检查特定的 li 元素是否丢失

Question

我想测试简单的删除 jquery/ajax ，使用 capybara-webkit。

用户在 <li> 内点击删除按钮，之后该元素应该会消失。

我的 html 看起来像这样：

<div class="artist-songs">
    <h3 tabindex="-1" id="song_h" class="song_h">Songs:</h3>
    <ol id="song-list">
        <li class="song">
            <span>The Plug</span>
            <span>
                -
                2000
                -
            </span>
            <span>Downtempo</span>
            <button name="button" type="submit" data-artist-id="5" data-song-id="14" class="delete del_song">Delete</button>
        </li>

我决定用这样的测试生成模型：

feature 'Testing song methods', js: true do
  let(:test_artist) { create :artist, name: 'Band' }

  let!(:song1) { create :song, title: 'Song 1', year: 1987, genre: 'Hip Hop', artist: test_artist }
  let!(:song2) { create :song, title: 'Song 2', artist: test_artist }
  let!(:song3) { create :song, title: 'Song 3', artist: test_artist }
  let!(:song4) { create :song, title: 'Song 4', artist: test_artist }


  scenario 'Delets first song' do
    visit artist_path(test_artist.id)
  end
end

我了解了如何测试简单操作的基本概念，但是我不确定如何编写测试，所以我确定删除的是正确的 <li> 元素，而不是随机元素。

因此例如 "Song 1" 仅被删除。

Answer 1

要测试删除 song1 你可以做类似的事情

scenario 'Delete song 1' do
  visit artist_path(test_artist.id)
  within('#song-list') do
    find(:css, 'li.song', text: song1.title).click_button('Delete')
    expect(page).not_to have_css('li.song', text: song1.title) # RSpec
    # page.assert_no_selector(:css, 'li.song', text: song1.title) # if not using RSpec
end

注意：如果 Capybara.default_selector == :css（默认）

，则可以省略 :css 参数

如果您要在测试中处理很多 li.song 元素，您还可以定义一个自定义选择器，例如

Capybara.add_selector(:song) do
  xpath { |title| XPath.css('li.song')[XPath.string.n.is(title)] }
end

这意味着您可以这样做

find(:song, song1.title).click_button('Delete')
expect(page.not_to have_selector(:song, song1.title)

Capybara Webkit，找到特定的 li 元素，单击删除按钮并检查特定的 li 元素是否丢失

Capybara Webkit, find specific li element, click delete button and check if the specific li element is missing

ruby

capybara

capybara-webkit

ruby-on-rails-5