Question

我正在尝试进行以下测试：

it 'remove item from cart' do
  visit cart_path
  button = page.find("a[href='/carts/#{item.id}/remove']")
  card = find_ancestor_with_class(button, '.card')
  button.click
  # check if card has been removed from page
end

这个测试被禁止工作，因为以下JS从页面中删除了卡片：

$.ajax({
  url: link,
  method: "GET",
  success: function() {
    $('#alert-modal').modal('show');
    $(button).closest(".card").remove();
  }
});

我如何验证是否已从页面中移除.card html？

Answer 1

要检查您将要执行的页面上是否显示某些内容

expect(page).to have_no_css(".card")

或

expect(page).not_to have_css(".card")

总的来说，它变成了

visit cart_path
click_link(href: "/cars/#{item.id}/remove")    
expect(page).not_to have_css(".card")

只有删除了所有.card元素后，才能生效。如果页面上仍然有其他.card元素，那么检查您希望在卡片上的文本或卡片元素上的其他属性/属性（id等），如项目描述或其他将显示为

expect(page).not_to have_css(".card", text: item.description)

如果你经常处理.card元素，你也可以编写一个自定义的Capybara选择器来使事情更容易阅读，本地化一个＆＃34;卡的CSS定义＆＃34;等

Capybara.add_selector :card do
  xpath do |content| 
    xp = XPath.css('.card')
    xp = xp[XPath.string.n.is(content)] unless content.nil?
    xp
  end
end

然后应该允许

expect(page).to have_no_selector(:card)
expect(page).to have_no_selector(:card, item.description)

等

检查是否已通过jQuery.remove（）删除了Capybara :: Node :: Element

1 个答案: