Rails系统测试报错：Function rgb缺少$green参数

错误信息 #

Error: Function rgb is missing argument $green. on line 1 of stdin >> 7280]{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-op ------------------------------------------^

当前环境配置 #

• Chrome与Chromedriver版本：131.0.6778.108
• 操作系统：Windows 11
• 相关Gem版本：

  capybara (3.40.0)
  ruby 3.3.3p89
  rails (7.0.7)
  

• application_system_test_case.rb文件内容：

  require 'test_helper'
  
  class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
    # driven_by :selenium, using: :firefox, screen_size: [1920, 1080]
    driven_by :selenium, using: :chrome, screen_size: [1920, 1080]
  
    setup do
      Selenium::WebDriver::Chrome.path = 'D:/chrome-win64/chrome.exe' # Chrome可执行文件路径
      Selenium::WebDriver::Chrome::Service.driver_path = 'C:/Users/jdonado/proyectos/helpdesk/bin/chromedriver.exe' # Chromedriver路径（如需）
    end
  end
  

排查与解决方向 #

1. 修复Tailwind CSS语法兼容性问题
   报错指向的rgb(107 114 128/var(--tw-border-op))是Tailwind的空格分隔式rgb语法，但Sass等预处理工具会将其识别为自身的rgb()函数调用（要求逗号分隔参数），导致参数缺失报错。可通过两种方式处理：

   • 在tailwind.config.js中开启legacyRgb选项，强制生成逗号分隔的rgb格式：

     // tailwind.config.js
     module.exports = {
       future: {
         legacyRgb: true,
       },
       // 其他配置项
     }
     

   • 直接将代码中的空格分隔rgb语法替换为逗号分隔格式，比如rgb(107, 114, 128/var(--tw-border-op))

2. 重新编译测试环境资产
   确保测试环境下CSS已正确编译，无未处理的语法残留：

   • 执行预编译命令：rails assets:precompile RAILS_ENV=test
   • 清理资产缓存：rails assets:clobber RAILS_ENV=test

3. 验证Chrome驱动配置
   虽然报错源于CSS，但可确认驱动配置是否正常：

   • 当前Chrome与Chromedriver版本匹配，可跳过版本校验
   • 尝试注释掉setup块中的手动路径配置，让系统自动查找驱动文件，排除路径配置异常问题

内容的提问来源于stack exchange，提问作者Johan Donado B.