When I run my Capybara tests, I am facing a challenge with validating CSS properties as each webdriver returns the selector value in a different format.
In one of my project pages, there is an element with a CSS property background-color specified in hexadecimal. Here's an example of the CSS:
#selected-colour-red {
background-color: #ff0000;
However, when the tests execute, the webdrivers seem to be looking for the RGB equivalent instead of the hexadecimal value. To deal with this inconsistency, I analyze and convert the values to the corresponding RGB so that the RSpec matcher can compare against what the webdriver sees:
And(/^I should see the color "(.*?)"$/) do |color|
case color
when 'red'
rgb_color = 'rgb(255, 0, 0)'
when 'green'
rgb_color = 'rgb(0, 255, 0)'
when 'blue'
rgb_color = 'rgb(0, 0, 255)'
selected_color = page.find(:css, 'div#colors-grid div#selected-color-' + color)
pp selected_color.style('background-color') # debug - inspect the webdriver's returned property
expect(selected_color.style('background-color')).to have_content(rgb_color)
end
The line with pp prints out the actual value seen by the webdriver during the test.
Tests using geckodriver pass because the expected and observed values match:
And I should see the text "The selected color is <color>" # features/colors.feature:14
Examples:
| color |
{"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
On the other hand, chromedriver tests fail due to the returned CSS property being in rgba format:
And I should see the text "The selected color is <color>" # features/colors.feature:14
Examples:
| color |
{"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/colors.rb:47:in `/^I should see the color "(.*?)"$/'
features/colors.feature:17:13:in `I should see the color "red"'
...
3 scenarios (3 failed)
15 steps (3 failed, 3 skipped, 9 passed)
0m2.051s
I aim to avoid writing driver-specific code as it becomes challenging to maintain.
- Should I use a regular expression as a matcher in the expectation?
- Is there a way to change the representation format of RGB values in chromium or firefox?
- Can the test be written in a manner that explicitly matches the hexadecimal value in the CSS?
- Why do the drivers interpret this value differently?