Capybara::Poltergeist::InvalidSelector 在具有 id 和 class 的元素上

Question

我有这样的代码：

<td class="activities" id="3">
  <a id="3" class="btn add_activity" href="#">+</a>
</td>

我想点击 + link。生成的表单使用 javascript 打开，因此我需要 Poltergeist 才能单击它。但它 returns 一个错误：

Capybara::Poltergeist::InvalidSelector:
       The browser raised a syntax error while trying to evaluate css selector ".activities#28"

这是我的测试：

it "can open form", js: true do
  within(".activities#28") do
    click_link "+"
  end
end

那为什么找不到元素呢？

Answer 1

你这里有一些问题

您的 CSS 选择器“.activities#28”在技术上是非法的。这是因为 CSS 选择器中的 id 标识符不能以数字开头，除非它被转义。要修复您的 CSS 选择器需要变为 .activities# 8
修复后它将与您显示的 HTML 不匹配，因为显示的 HTML 的 ID 为“3”而不是“28”[=12] =]
显示的 HTML 有两个具有相同 ID（“3”）的元素。这是非法的 HTML 因为 id 在页面上必须是唯一的。您是否正在尝试存储需要绑定到页面上该元素的记录的 ID？如果是这样的话，它可能在数据属性中（这也会改变你的 CSS 选择器）——尽管多次存储相同的内容也没有多大意义。
```
<td class="activities" data-id="3">
  <a class="btn add_activity" href="#" data-id="3">+</a>
</td>
```

Capybara::Poltergeist::InvalidSelector on element with id and class