geckodriver 和 ChromeDriver 之间的 CSS 结果不同

Question

我在 Capybara 测试中验证 CSS 属性时遇到了一个问题，每个 webdriver 都以不同的格式返回选择器值。

在我的项目中，一个页面包含一个元素，该元素具有一个十六进制值的 CSS 属性 background-color。 CSS 示例如下所示：

#selected-colour-red {
    background-color: #ff0000;

当测试运行时，网络驱动程序（无论出于何种原因我仍然不明白）转而寻找这个十六进制值的 RGB 等价物。因此，我的 Capybara 测试分析输入值并将其转换为相应的 RGB 值，以便 RSpec 匹配器可以将其与 webdriver 看到的进行比较：

And(/^I should see the colour "(.*?)"$/) do |colour|
  case colour
    when 'red'
      rgb_colour = 'rgb(255, 0, 0)'
    when 'green'
      rgb_colour = 'rgb(0, 255, 0)'
    when 'blue'
      rgb_colour = 'rgb(0, 0, 255)'
  selected_colour = page.find(:css, 'div#colours-grid div#selected-colour-' + colour)
  pp selected_colour.style('background-color')   # debug - see what property the webdriver returns
  expect(selected_colour.style('background-color')).to have_content(rgb_colour)
end

pp 行输出测试运行时 webdriver 看到的内容。

当我使用 geckodriver 运行测试时，结果通过了，因为 webdriver 看到的值与测试中的值匹配：

    And I should see the text "The selected colour is <colour>" # features/colours.feature:14

    Examples: 
      | colour |
{"background-color"=>"rgb(255, 0, 0)"}
      | red    |
{"background-color"=>"rgb(0, 255, 0)"}
      | green  |
{"background-color"=>"rgb(0, 0, 255)"}
      | blue   |
3 scenarios (3 passed)
15 steps (15 passed)
0m3.205s

但是，chromerdriver 测试失败，因为返回的 CSS 属性采用不同的 rgba 格式：

 And I should see the text "The selected colour is <colour>" # features/colours.feature:14

    Examples: 
      | colour |
{"background-color"=>"rgba(255, 0, 0, 1)"}
      | red    |
      expected to find text "rgb(255, 0, 0)" in "{\"background-color\"=>\"rgba(255, 0, 0, 1)\"}" (RSpec::Expectations::ExpectationNotMetError)
      ./features/step_definitions/colours.rb:47:in `/^I should see the colour "(.*?)"$/'
      features/colours.feature:17:13:in `I should see the colour "red"'
{"background-color"=>"rgba(0, 255, 0, 1)"}
      | green  |
      expected to find text "rgb(0, 255, 0)" in "{\"background-color\"=>\"rgba(0, 255, 0, 1)\"}" (RSpec::Expectations::ExpectationNotMetError)
      ./features/step_definitions/colours.rb:47:in `/^I should see the colour "(.*?)"$/'
      features/colours.feature:18:13:in `I should see the colour "green"'
{"background-color"=>"rgba(0, 0, 255, 1)"}
      | blue   |
      expected to find text "rgb(0, 0, 255)" in "{\"background-color\"=>\"rgba(0, 0, 255, 1)\"}" (RSpec::Expectations::ExpectationNotMetError)
      ./features/step_definitions/colours.rb:47:in `/^I should see the colour "(.*?)"$/'
      features/colours.feature:19:13:in `I should see the colour "blue"'
3 scenarios (3 failed)
15 steps (3 failed, 3 skipped, 9 passed)
0m2.051s

我不想编写特定于驱动程序的代码，因为这很难维护。

• 我应该写期望使用正则表达式作为匹配器吗？
• 有没有办法改变 chromium 或 firefox 用于表示 RGB 值的格式？
• 是否可以编写测试以明确匹配 CSS 中的十六进制值？
• 为什么驱动程序以不同的方式表示此值？

Answer 1

您必须询问 chromedriver 和 geckodriver 的编写者为什么它们的返回值不同，但这可能是因为规范松懈 - https://www.w3.org/TR/webdriver/#get-element-css-value - 他们只是选择返回两个不同但有效的值.

不，不能直接匹配 CSS 中的十六进制值，因为 Capybara 无法访问。最好的解决方案是使用正则表达式，您应该使用match_style 匹配器，而不是直接调用style

expect(selected_colour).to match_style('background-color' => /rgba?\(255, 0, 0(, 1)?\)/)

另一种选择是将style 过滤器用于have_css 匹配器，然后一次性完成所有操作

expect(page).to have_css('div#colours-grid div#selected-colour-' + colour, style: { 'background-color' => /rgba?\(255, 0, 0(, 1)?\)/ } )