Not a repeat of: How do you test if a div has a certain css style in rspec/capybara?
because those answers don't work for my case.
I have a webform with a preview; as you change certain parts of the web form, the previews update, and I want to check for this in my tests - so I really do need to check the styling that is applied to a div. Specifically, I'm updating the background-color of certain divs, and I want to check that this has happened.
Any ideas?
To my knowledge, Capybara does not have an API for getting the computed style of an element. However, since you are using Selenium-Webdriver, you can drop down to the Selenium element and use the style method.
For example, consider the following page which has a div element whose style is updated via javascript:
<html>
<body>
<div id="red_div">
background applied by javascript
</div>
<script>
document.getElementById("red_div").style.background = "red";
</script>
</body>
</html>
You can get the computed style of the div by using the style (or css_value) method of the underlying Selenium element:
red_div = page.find(:css, '#red_div')
puts red_div.native.style('background-color')
#=> "rgba(255, 0, 0, 1)"
Note:
native is the method to get the underlying Selenium element of a Capybara node.style may vary across browsers. For example, for background-color, I believe IE would actually give you "red".you can use execute_script, hope this help.
expect(page.execute_script("return window.getComputedStyle($('your-class-or-id')[0]).color").to eq('rgb(255, 255, 255)')
You can use element.style to get computed styles:
element.style('color', 'font-size') # Returns a hash
