Getting the values of all the CSS properties of a selected element in Selenium

Question

Suppose that I have found an element by its XPath using:

WebElement we = driver.findElement(By.xpath("some XPath"));

I know that I can get the value of a particular CSS property by we.getCssValue("some property"), but can I get the values of all the properties without having to mention their names explicitly?

Answer 1

Unfortunately

this is not possible with native Selenium API.

But using Javascript you can:

You can use some javascript support, using Seleniums' JavascriptExecutor.executeScript functionality.

The necessary js code can be found here and here(as proposed by @Mahsum Akbas)

Now here is the Java/Selenium Code that will return you a string in the form of "css-attribute01:value01; css-attribute02:value02;".

Be aware that this will return ALL css-attributes on the element.

WebElement we = driver.findElement(By.tagName("div"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
String script = "var s = '';" +
                "var o = getComputedStyle(arguments[0]);" +
                "for(var i = 0; i < o.length; i++){" +
                "s+=o[i] + ':' + o.getPropertyValue(o[i])+';';}" + 
                "return s;";

System.out.println(executor.executeScript(script, we));

You can change the script according to your needs. For example you could return a string that ONLY has all the values without the attributes. Feel free to change and experiment.

Update

If you would be interested in only the inline-styles of the element, then you can use "native" Selenium as pointed out by @JeffC in the comments:

driver.findElement(By.tagName("div")).getAttribute("style")

BUT!:

This will give you only the "inline styles" and NOT all the css-styles that are applied to an element. If you run both versions after one another and print the results you will see the immense difference.

Answer 2

Python version of using the above script to get all of the computed style properties:

from selenium import webdriver
from pprint import pprint
#require geckodriver in the directory where this script runs
driver = webdriver.Firefox()
driver.get('https://stackoverflow.com')

#Set the element object to the inbox messages icon
element = driver.find_element_by_xpath('//a[@title="Recent inbox messages"]')

#Get all of the style properties for this element into a dictionary
styleprops_dict = driver.execute_script('var items = {};'+
                                   'var compsty = getComputedStyle(arguments[0]);'+
                                    'var len = compsty.length;'+
                                    'for (index = 0; index < len; index++)'+
                                    '{items [compsty[index]] = compsty.getPropertyValue(compsty[index])};'+
                                    'return items;', element)
pprint(styleprops_dict)