Is it possible to test css property of some element, defined in external css file, using Selenium Webdriver and C#?

Question

How can I test css properties of any web-page element, which is defined in external css file. If I had, for example:

<div id="some-div" style="opasity: 10;"></div>

I could just take the value of style attribute, BUT I have all css properties defined in external ccs files. How can I test such elements and their properties?

Answer 1

Use IWebElement.GetCssValue

There is a method for getting the computed css style. I believe in c# it is the IWebElement.GetCssValue method.

Note that in the documentation for this method in ruby and java says the following. I assume it applies to c# even though it is not mentioned.

Note that shorthand CSS properties (e.g. background, font, border, border-top, margin, margin-top, padding, padding-top, list-style, outline, pause, cue) are not returned, in accordance with the DOM CSS2 specification - you should directly access the longhand properties (e.g. background-color) to access the desired values.

Example (ruby)

Since I have only done selenium-webdriver in ruby, I can only give a ruby example (idea is the same though the api is slightly different):

require "selenium-webdriver"

driver = Selenium::WebDriver.for :firefox
driver.navigate.to "http://yourpage.com"

element = driver.find_element(:id, 'id')
puts element.css_value('color')