How to get all css-styles from a dom-element using Selenium, C#

Question

My task is to create a minimized css-file from a web-page. And so I need values from all css-properties from all dom-elements. But I don't know: How to get all computed css-styles from a specific dom-element?

I have the following code:

var chromeOptions = new ChromeOptions();
chromeOptions.AddArguments("headless");

var browser = new ChromeDriver(chromeOptions);

var url = "https://example.com";
browser.Navigate().GoToUrl(url);

var domElement = browser.FindElement(By.TagName("html"));

And I want:

var styles = domElement.GetComputedCssStyles();

Murthi · Accepted Answer · 2018-05-30T10:47:46.367

1

you can use getCSSValue method of IWebElement. For example to get the background color of a element you can try the following code.

var chromeOptions = new ChromeOptions();
chromeOptions.AddArguments("headless");

var browser = new ChromeDriver(chromeOptions);

var url = "https://example.com";
browser.Navigate().GoToUrl(url);

var domElement = browser.FindElement(By.TagName("html"));
var color = domElement.GetCssValue("background-color");

May you can try the following javascript code using selenium C#;

string properties = ((IJavaScriptExecutor)driver).ExecuteScript("return window.getComputedStyle(arguments[0],null).cssText", domElement);
strArr = properties.split(";")

for (count = 0; count <= strArr.Length - 1; count++)
{
    console.log(strArr[count]);
}

edited May 30 '18 at 10:47

answered May 30 '18 at 09:50

Murthi

5,299
1
10
15

Thanks, but I need all the set css-values. I don't need a certain css-value. – Palindromer May 30 '18 at 09:55
There are mulitple css styles are applied for a element. better to get the one which we want – Murthi May 30 '18 at 10:01
My task is to create a minimized css file from a web-page. And so I need values from all css properties. – Palindromer May 30 '18 at 10:05
That will be taken care by Front end UI designer. I think you are trying to do reverse engineering. – Murthi May 30 '18 at 10:08
1

@Palindromer I have added another solution to get all the computed styles of a element. It may be helpful for you. please try and let me know. – Murthi May 30 '18 at 10:48

score 0 · Answer 2 · answered May 30 '18 at 10:34

To get all the computed css-styles from a specific dom-element you can use the following line of code:

C#:

((IJavaScriptExecutor)driver).ExecuteScript("var items = {}; for (index = 0; index < arguments[0].attributes.length; ++index) { items[arguments[0].attributes[index].name] = arguments[0].attributes[index].value }; return items;", myElem);

Sample (Java) Code Block:

WebDriver driver = new FirefoxDriver();
driver.get("https://www.google.com/");
WebElement myElem = driver.findElement(By.name("q"));
System.out.println(((JavascriptExecutor)driver).executeScript("var items = {}; for (index = 0; index < arguments[0].attributes.length; ++index) { items[arguments[0].attributes[index].name] = arguments[0].attributes[index].value }; return items;", myElem).toString());

Console Output:

{aria-autocomplete=list, aria-haspopup=false, aria-label=Search, autocomplete=off, class=gsfi lst-d-f, dir=ltr, id=lst-ib, maxlength=2048, name=q, role=combobox, spellcheck=false, style=border: medium none; padding: 0px; margin: 0px; height: auto; width: 100%; background: transparent url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D") repeat scroll 0% 0%; position: absolute; z-index: 6; left: 0px; outline: medium none currentcolor;, title=Search, type=text, value=}

How to get all css-styles from a dom-element using Selenium, C#

2 Answers2

Linked