Selenium WebDriver - getCssValue() method

I am doing a exercise to use cssGetValue method to retrieve the value from a particular web element's CSS property.

I have 2 questions:

1. why the cssGetValue method returned value 13px, which web element does the method actually referenced. 1a. I want to get CSS property for section labeled as "By ID". how should I modify my code so I can get CSS property value for section?

2. I used driver.close() method, but it won't close the browser after the script finished. Please explain to me why driver.close() method didn't work in this case.

   Here is my code fragment:

   package wd_findElementBy; import java.util.List; import org.junit.Test; import org.junit.Before; import org.junit.After; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class SearchWebElements { WebDriver driver = new FirefoxDriver(); private String baseUrl= ""; @Test public void findElements(){ driver.get(baseUrl); try{ List<WebElement> elements = driver.findElements(By.id("by-id")); System.out.println("number of elements: " + elements.size()); for(WebElement ele : elements){ System.out.println(ele.getTagName()); System.out.println("get the text for web element with id='by-id' "); System.out.println("------------------------------------------------------------"); System.out.println(ele.getText()); System.out.println("------------------------------------------------------------"); System.out.println(ele.getAttribute("id")); System.out.println(ele.getCssValue("font-size")); } } finally{ //driver.close(); driver.quit(); } } } 

4 Answers

Yes, all correct.

Here's a screenshot of where to find font-size through Firebug.

Since the ids are supposed to be unique (at least for this page), you don't need findElements to find a list of elements with id by-id and loop through, instead, you use findElement to get the element directly.

try{ WebElement byId = driver.findElement(By.id("by-id")); System.out.println(byId.getTagName()); System.out.println("get the text for web element with id='by-id' "); System.out.println("------------------------------------------------------------"); System.out.println(byId.getText()); System.out.println("------------------------------------------------------------"); System.out.println(byId.getAttribute("id")); System.out.println(byId.getCssValue("font-size")); } } 

For getting CSS value:

driver.findElement(By.id("by-id")).getCssValue("font-size");//similarly you can use other CSS property such as background-color, font-family etc. 

For quit/close the browser after finishing the execution of script:

driver.quit(); 

public class GetCssValues {

public WebDriver driver; private By bySearchButton = By.name("btnK"); @BeforeClass public void setUp() { driver = new FirefoxDriver(); driver.get(""); } @Test(priority=1) public void getCssValue_ButtonColor() { WebElement googleSearchBtn = driver.findElement(bySearchButton); System.out.println("Color of a button before mouse hover: " + googleSearchBtn.getCssValue("color")); Actions action = new Actions(driver); action.moveToElement(googleSearchBtn).perform(); System.out.println("Color of a button after mouse hover : " + googleSearchBtn.getCssValue("color")); } @Test(priority=2) public void getCssValue_ButtonFontSize() { WebElement googleSearchBtn = driver.findElement(bySearchButton); System.out.println("Font Size of a button " + googleSearchBtn.getCssValue("font-size")); } @Test(priority=3) public void getCssValue_ButtonFontWeight(){ WebElement googleSearchBtn = driver.findElement(bySearchButton); System.out.println("Font Weight of a button " +getFontWeight(googleSearchBtn) ); } public String getFontWeight(WebElement element) { //Output will return as 400 for font-weight : normal, and 700 for font-weight : bold return element.getCssValue("font-weight"); } @AfterClass public void tearDown() { driver.quit(); } 

}

output:

Color of a button before mouse hover: rgba(68, 68, 68, 1) Color of a button after mouse hover : rgba(34, 34, 34, 1) Font Size of a button 11px Font Weight of a button 700

The value is correct. You need access computed section in dev-tools

Add the property name in the getCssValue to get the info regarding same

Some Examples are :-

 System.out.println("font-size = "+ele.getCssValue("font-size")); System.out.println("background = "+ele.getCssValue("background")); System.out.println("line-height = "+ele.getCssValue("line-height")); System.out.println("color = "+ele.getCssValue("color")); System.out.println("font-family = "+ele.getCssValue("font-family")); 

Refer:-