geckodriver和ChromeDriver之间的CSS结果不同

Question

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

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

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

当测试运行时，网络驱动程序(无论出于什么原因，我仍然不理解(会寻找这个十六进制值的RGB等效值。因此，我的Capybara测试分析输入值，并将其转换为相应的RGB值，这样RSpec匹配器就可以将其与网络驱动程序看到的内容进行比较：

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行输出测试运行时Web驱动程序看到的内容。

当我使用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-元素css值-他们刚刚选择返回两个不同但有效的值。

不，不可能直接匹配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)?)/ } )