如何找到带有特定标签的 CSS 元素

Question

这是我的检查元素 sn-p：

<div>
  <map>
    <area href="javascript:void(0)" log="miw" ... shape="poly" title="lender_marker test@example.com">
    <area href="javascript:void(0)" log="miw" ... shape="poly" title="lender_marker othertest@example.com">
  </map>
</div>

... 代表一堆我不会包含的其他标签。仅供参考，这些元素来自 JS 中的 Google Maps API V3，我正在使用这个 great tutorial 来尝试测试，除了本教程在 Selenium 中工作，我想使用 Capybara/Rspec。此外，首先使用this post 来制定选择器。

我需要在集成测试中做两件事：

1. lender_marker 的计数，与电子邮件无关
2. 使用特定电子邮件点击lender_marker

对于#1...

• 虽然我很想只计算 lender_markers 而不管电子邮件，但我想如果我什至找不到 lender_marker test@example.com 我不会担心只找到 lender_marker，因此测试就像他们一样下面重新写
• 还有变体层，所以我尝试了以下所有可能的排列

试验：

#Base test
page.should have_selector("area[title='lender_marker test@example.com']")

#First variation: change selector statement
page.assert_selector("area[title='lender_marker test@example.com']")

#Second variation: no quotes
page.should have_selector(area[title='lender_marker test@example.com'])

#Third variation: use map 
page.should have_selector("map[title='lender_marker test@example.com']")

#Fourth variation: use div 
page.should have_selector("div[title='lender_marker test@example.com']")

对于#2，我什至无法尝试，直到我首先能够找到区域对象，但我不能......

Answer 1

您的 CSS 选择器没有任何问题，这让我相信这是一个可见性问题。您参考的教程使用find_elements，它在 Selenium 中将找到与选择器匹配的所有元素。相反，当 Capybara 查找元素时，它只返回与选择器匹配的元素并且被确定为对用户可见。

换句话说，我猜测区域元素存在，但 Capybara 认为它们不可见。您可能需要触发某些东西才能使这些区域变得可见。

但是，您可以使用:visible 选项验证元素是否存在，无论可见性如何：

# Validate that a specific area exists in the DOM
page.should have_selector('area[title="lender_marker test@example.com"]', visible: false)

# Count the number of lender_markers
page.all('area[title^="lender_marker"]', visible: false).length
#=> 2

# Count the number of lender_markers with minimum in case of async loading
puts page.all('area[title^="lender_marker"]', visible: false, minimum: 2).length
#=> 2

# Validate the number of lender_markers
page.should have_selector('area[title^="lender_marker"]', visible: false, count: 2)