Question

我在React中有一个无状态组件，它返回：

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抛出一些普通的非随机错误，比如选择器未找到，没什么不清楚的。当地一切都是绿色的。如果重要的话，我会使用selenium-webdriver和SitePrism。

我检查过这些案件：

className="btn btn-default" - 失败
className="mysterious-error" - 传递（空类）
className="mysterious-error btn btn-default" - 失败
className="btn" - 失败
已将id添加到包装<div> - 失败
使用<a className="btn" ... > - 失败

我认为下一步是打破Bootstrap btn类，但这似乎很乏味，因为它与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（＆＃34; div.filter-line-2＆＃34;，visible :: all）

如果测试然后工作（确认问题是元素不可见），那么根据元素变为不可见的原因，您可以尝试增加Circle CI的屏幕分辨率设置和/或窗口大小。

Answer 2

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

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

Bootstrap类打破了Circle上的Capybara规范

2 个答案: