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:-