RSpec 功能规范中未呈现的链接答案

【问题标题】：Links not rendering in RSpec feature specRSpec 功能规范中未呈现的链接
【发布时间】：2018-05-29 21:56:03
【问题描述】：

以下代码应该呈现一些链接，但是当在 RSpec 中执行功能规范以对其进行测试时，在执行 save_and_open_screenshot 时链接不存在，即使经过长时间的睡眠，它们仍然不会出现。执行save_and_open_page 确实显示链接存在。

%nav#sidebar
  = form_with url: entries_path, local: true, method: :get do |f|
    = f.text_field :search
    = button_tag type: 'submit' do
      %i.fas.fa-search
  %ul.nav.flex-column.pb-5.mb-5
    - months.each do |month|
      %li.nav-item
        .nav-link{class: (current_page?(entries_path(month: month.to_date)) && 'active')}
          = link_to month.strftime('%b-%Y'), entries_path(month: month.to_date)

侧边栏上的 CSS：

@import 'bootstrap'
@import 'fontawesome'

#sidebar
  padding: 10px 0 30px 0
  border-right: 1px solid #ddd
  width: 200px
  border-radius: 0 0 0 4px
  transition: margin .3s

  @include media-breakpoint-down(md)
    position: absolute
    top: 0
    bottom: 0
    z-index: 9
    margin-left: -200px

    &.visible
      margin-left: 0

  .nav-link
    @extend .d-flex
    @extend .align-items-center
    height: 40px
    padding: 0 30px

    &.active
      position: relative
      font-weight: bold

我也在这个项目中使用 turbolinks，不知道这是否会以任何方式干扰规范中链接的呈现。

【问题讨论】：

由于 HTML 中存在链接，但在屏幕截图中不可见，这意味着它们正在通过 CSS 隐藏 - 内容在什么级别消失，即 - #sidebar 元素是否可见截图？表格呢？等——找出隐藏的最高级别元素是什么，并检查其上的 CSS。
您可能还想暂时切换到运行 chrome non-headless，这样您就可以观看测试运行，并在您认为链接应该是时暂停测试来检查浏览器开发者控制台中的页面可见的。此外，在您之前的问题得到解答后删除它们有点违背 SO 的想法，因为它会带走其他人以后可能需要的知识。
如果链接在save_and_open_page 中可见，则链接存在于页面上。您可能需要更改选择器/匹配器以声明链接。
@ThomasWalpole 我删除了上一个问题，因为它是错误的并且还没有答案。如果它有任何答案，我就不会这样做。我会试试你的建议，谢谢。

标签： ruby-on-rails rspec bootstrap-4 capybara

【解决方案1】：

@include media-breakpoint-down(md) 部分中的 margin-left: -200px 看起来可能是罪魁祸首。给定特定的屏幕尺寸（无法确定您发布的内容是什么），侧边栏将隐藏在屏幕的左边缘（因此不可见）。您可能需要为正在运行的测试正确设置浏览器的窗口大小。

【讨论】：