Bootstrap class 打破了 Circle 上的 Capybara 规范

Question

我在 React 中有一个无状态组件，returns 这个：

return (
  <div>
    <button
      className="btn btn-default"
      onClick={handleClick}
      type="submit"
    >
      {selectedAll ? "Deselect All" : "Select All"}
    </button>
  </div>
);

由于未知原因，添加 btn btn-default 破坏了 Circle CI 上的一些 Capybara 规范。 Capybara 只会抛出一些普通的非随机错误，例如 selector not found，没有什么不清楚的。当地一切都是绿色的。如果重要的话，我使用 selenium-webdriver 和 SitePrism。

我检查了这些案例：

className="btn btn-default" - 失败
className="mysterious-error" - 通过（空class）
className="mysterious-error btn btn-default" - 失败
className="btn" - 失败
将 id 添加到包装 <div> - 失败
使用 <a className="btn" ... > - 失败

我认为下一步是分解 Bootstrap btn class，但这看起来很乏味，因为它与 BS 的其余部分紧密结合，所以也许你有有更好的主意吗？

跟进：

经过调查，我确定导致 Circle 失败的原因是两个 div 之间的空白，这与失败的规格完全无关。此外，我使用哪个 css 属性来增加边距并不重要：display 和 margin 都会增加它并导致失败。

@twalpole，总是相同的六个规格失败，如前所述，它们位于网站的完全不同的区域，并且错误相当标准。让我给你看一个：

describe "Remove Filter button" do
  context "when it is clicked" do
    before do
      filters.select_category(1, "Organisation")
      filters.select_matcher(1, "contains")
      filters.select_value(1, "Looney Toons")
    end

    it "removes correct filter line" do
      filters.add_filter
      expect(filters).to have_selector("div.filter-line-1")
98    expect(filters).to have_selector("div.filter-line-2")
      filters.remove_filter_line(2)
      expect(filters).to have_selector("div.filter-line-1")
      expect(filters).to_not have_selector("div.filter-line-2")
    end
  end
end

失败：

2) Use filters Remove Filter button when it is clicked removes correct filter line
     Failure/Error: expect(filters).to have_selector("div.filter-line-2")
       expected to find css "div.filter-line-2" but there were no matches
     # ./spec/features/filters_spec.rb:98:in `block (4 levels) in <top (required)>'

Answer 1

默认情况下，Capybara 仅查找页面中可见的元素。从您的描述来看，应用到按钮的样式听起来可能导致 div.filter-line-2 元素超出其包含元素的范围，因此不可见或与另一个元素重叠。您可以通过告诉 have_selector 忽略可见性来确认

期望（过滤器）.to have_selector（"div.filter-line-2"，可见：：全部）

如果测试成功（确认问题是元素不可见），那么根据元素变得不可见的原因，您可以尝试增加 Circle 的屏幕分辨率设置等操作 CI and/or window 尺码。

Answer 2

额外的边距是将元素移动到顶部，以便固定导航栏部分覆盖操作按钮。单击此按钮会导致在页面上设置正确的选择器。 Shame Capybara 在点击按钮时默默地失败了，它甚至返回 "ok"。这修复了错误：

page.execute_script "window.scrollTo(0,0)"

Bootstrap class 打破了 Circle 上的 Capybara 规范

Bootstrap class breaks Capybara specs on Circle

geometry

capybara

reactjs

twitter-bootstrap-3