在GitHub Actions中使Sinatra应用的JS RSpec适配无头Chrome

一、修复普通Chrome的DevToolsActivePort错误 #

GitHub Actions的Ubuntu运行环境没有图形界面，普通Chrome需要虚拟显示环境才能启动，同时容器环境的沙箱和内存限制也会导致会话创建失败，按以下步骤处理：

• 在Workflow中添加安装并启动虚拟显示服务Xvfb的步骤，用xvfb-run包裹测试命令：

  - name: Install Xvfb
    run: sudo apt-get update && sudo apt-get install -y xvfb
  
  - name: Run RSpec tests
    run: xvfb-run bundle exec rspec
  

• 在RSpec/Capybara的驱动配置中添加必要的Chrome启动参数，规避沙箱和内存问题：

  Capybara.register_driver :chrome do |app|
    chrome_options = Selenium::WebDriver::Chrome::Options.new(args: [
      "--no-sandbox",
      "--disable-dev-shm-usage"
    ])
    Capybara::Selenium::Driver.new(app, browser: :chrome, options: chrome_options)
  end
  

二、修复无头Chrome的JS未执行问题 #

旧版无头Chrome的兼容性较差，改用新版无头模式并补充必要参数，确保JS正常执行：

• 更新Capybara的无头Chrome驱动配置，使用--headless=new（基于真实Chrome内核，兼容性更强），同时添加启用JS和合理视口的参数：

  Capybara.register_driver :headless_chrome do |app|
    chrome_options = Selenium::WebDriver::Chrome::Options.new(args: [
      "--headless=new",
      "--no-sandbox",
      "--disable-dev-shm-usage",
      "--enable-javascript",
      "--window-size=1920,1080" # 避免视口过小导致JS渲染异常
    ])
    Capybara::Selenium::Driver.new(app, browser: :chrome, options: chrome_options)
  end
  

• 确认测试用例中没有依赖仅图形模式才有的Chrome API，新版无头模式的行为和普通Chrome几乎一致，能覆盖绝大多数JS场景。

三、Workflow额外注意事项 #

• 确保ChromeDriver版本与Chrome匹配：可以在Gemfile中添加gem 'webdrivers'，它会自动下载适配当前Chrome版本的驱动，避免版本不兼容问题。
• 运行测试前确认所有服务（比如MSSQL）已完全启动，可添加等待步骤（如sleep 10）确保数据库服务就绪。

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