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:
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 id="by-id" section?
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:-
