RSpec功能测试中链接无法渲染问题求助

首先得明确：save_and_open_page是输出页面的HTML源码，不管元素是否在视口中可见；而save_and_open_screenshot是截取浏览器当前视口中实际可见的内容，所以你遇到的问题核心是：链接在DOM里存在，但在截图时处于不可见状态，或者页面资源/样式还没完全渲染完成。

结合你的代码和技术栈（Turbolinks + Bootstrap响应式样式），给你几个针对性的解决方案：

1. 调整测试窗口的视口尺寸（最可能的原因） #

你的侧边栏CSS在md断点以下（屏幕宽度<992px）会被设置为margin-left: -200px隐藏起来，而Capybara默认的测试窗口尺寸可能偏小（比如移动端尺寸），导致侧边栏没出现在视口中。

在测试里手动设置桌面级的窗口大小，确保页面处于Bootstrap的md及以上断点：

# 在访问页面之前添加这段代码
before do
  # 设置窗口为1200px宽（大于md断点的992px）
  page.driver.browser.manage.window.resize_to(1200, 800)
  visit entries_path
end

2. 处理Turbolinks的加载延迟 #

Turbolinks的页面加载机制可能会让Capybara的默认等待逻辑失效——DOM已经加载，但样式还没完全应用，或者Turbolinks的异步加载还没完成。

方法一：访问页面时禁用Turbolinks #

# 在visit时加上turbolinks: false参数
visit entries_path, turbolinks: false

方法二：等待Turbolinks加载完成 #

visit entries_path
# 等待Turbolinks的当前访问完成
page.execute_script("return Turbolinks.controller.currentVisit.completed")
# 再执行截图
save_and_open_screenshot

3. 等待链接元素可见后再截图 #

Capybara的默认等待是检查元素是否存在，但截图需要元素可见。可以先断言链接可见，再触发截图：

# 替换成你实际的月份格式，比如month.strftime('%b-%Y')的结果
expect(page).to have_link('Jan-2024', visible: true)
save_and_open_screenshot

这样能确保Capybara等待元素完全显示在视口中后再截图。

4. 强制显示侧边栏（如果需要测试移动端场景） #

如果你的测试必须在移动端视口下运行，可以通过JS强制给侧边栏添加visible类，让它显示出来：

visit entries_path
# 强制显示侧边栏
page.execute_script("document.getElementById('sidebar').classList.add('visible')")
save_and_open_screenshot

为什么延长sleep没用？ #

sleep只是固定等待时间，但如果页面的样式渲染、Turbolinks加载是异步的，固定sleep可能赶不上实际加载节奏，不如用Capybara的原生等待机制或者针对Turbolinks的等待逻辑靠谱。

内容的提问来源于stack exchange，提问作者8vius