geckodriver 和 ChromeDriver 之间的不同 CSS 结果

Question

我在我的 Capybara 测试中验证 CSS 属性时遇到问题，每个网络驱动程序都以不同的格式返回选择器值。

在我的项目中，一个页面包含一个具有 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 行输出网络驱动程序在测试运行s 时看到的内容。

当我运行使用 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 的作者为什么他们的 return 值不同，但这可能是因为规范松散 - https://www.w3.org/TR/webdriver/#get-element-css-value - 他们只是选择return 两个不同但有效的值。

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

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

另一种选择是对 have_css 匹配器使用 style 过滤器，并且一次完成所有操作

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

geckodriver 和 ChromeDriver 之间的不同 CSS 结果

Different CSS results between geckodriver and ChromeDriver

css

selenium-webdriver

selenium-chromedriver

capybara

geckodriver