ruby-on-rails - 使用 xpath，定位一个给定部分 id 的 HTML 元素(可能是正则表达式)

Question

Ruby 1.9.3、Rails 3.1.10、RSpec 2.13.0、Capybara 2.2.1

我在使用嵌套表单的应用程序页面上。该表单将成员添加到队列中。如果成员已保存，则该成员的 id(在 HTML 中)为 queue_queue_members_attributes_0_user_id ，然后是 1、2 等。当我单击指向 Add New Member 的链接时通过 JavaScript，新选择框的 HTML id 类似于:queue_queue_members_attributes_1421760178806_user_id
如您所见，每个新选择框都会生成一个随机数字字符串，其中嵌套属性尚未保存。我需要知道这个 HTML 元素的 id 才能有效地使用 Capybara 进行测试。

我在将成员添加到队列的页面上。如果成员已经存在，则其选择框的 id 为 0、1 等。如果我点击“添加新成员”，新选择框的 id 是一个随机生成的数字，在本例中为 1421760178806。

原创尝试

下面是我为规范制作的辅助方法。它最初有效。然而，最近，我需要测试队列成员。当我添加一个队列成员工厂并使用新的队列工厂实例创建一个时，这个问题就开始了。因为现在我有 2 个与 xpath 查询匹配的选择框

def select_member(member)
  find(:xpath, "//select[contains(@id, '_user_id')]/option[@value='#{member.id}']").select_option
end

Failure/Error: select_member(@test_user)
Capybara::Ambiguous:
Ambiguous match, found 2 elements matching xpath "//select[contains(@id, '_user_id')]/option[@value='6647']"

通过我的更改，在通过 FactoryGirl 创建时将成员添加到队列中。这意味着我的 xpath 表达式匹配两个选择框——一个 id 为 0，另一个为 1421760178806。我只希望它匹配后一个数字(除了单个“0”之外的任何内容。)我的测试只添加一个成员，所以我是不用担心 id > 0。

第二次尝试

我找到了 this SO question最初很有帮助，直到我遇到另一个错误。

def select_member(member)
  find(:xpath, "//select[matches(@id, '[0-9]{2,}_user_id')]/option[@value='#{member.id}']").select_option
end

Failure/Error: select_member(@test_user)
Capybara::Webkit::InvalidResponseError:
INVALID_EXPRESSION_ERR: DOM XPath Exception 51

Answer 1

使用更新的 gem 迁移到 Rails 4，我能够在发布大约一个月后解决我的问题。以下内容仍应有助于 Rails 3 项目。

经过大量研究和挖掘，我发现我们的应用程序有 xpath作为默认的 Capybara 选择器。我不知道为什么，但我认为这是因为我们的观点在表格中的表格中很复杂。既然 Twitter Bootstrap 和 Rails 4 的 View 很整洁，我决定将默认的 Capybara 选择器更改为默认选项 -- :css .这让我可以 select或 fill_in基于元素的(更清洁的)id、名称或标签。

关于嵌套表单问题，我通过创建规范帮助器方法解决了它。在其中，我找到了包含表单元素的表格。使用 xpath，我在该实例中找到表的最后一行。最后一行选择充当 within do阻止 capybara 。

# xpath selector - locate last nested row within a given table id
def last_row(id)
  find(:xpath, "//table[@id='#{id}']//tbody/tr[last()]")
end

within last_row("queues") do
  # css selector - select item based on label
  select "Extension User 2", from: "Queue member"
  select "1", from: "Penalty"
end

我确信上面可以以某种方式更改为 CSS，但我对测试中的两个选择器仍然是新手。随意评论 css 选择器版本。