如何使用Selenium，C#从dom-element获取所有css样式

Question

我的任务是从网页创建一个最小化的css文件。所以我需要来自所有 dom 元素的所有 css 属性的值。 但我不知道：如何从特定的 dom-element 获取所有计算的 css 样式？

我有以下代码：

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 styles = domElement.GetComputedCssStyles();

Answer 1

您可以使用getCSSValueIWebElement的方法。例如，要获取元素的背景颜色，您可以尝试以下代码。

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");

你可以尝试使用以下 selenium C# 的 JavaScript 代码;

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]);
}

Answer 2

要从特定的 dom-element 获取所有计算的 css 样式，您可以使用以下代码行：

• 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);
  

• 示例 (Java( 代码块：

  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());
  

• 控制台输出：

  {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=}