Selenium WebDriver - getCssValue() method

Question

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 id="by-id" 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= "http://docs.seleniumhq.org/docs/03_webdriver.jsp#introducing-the-selenium-webdriver-api-by-example";
   
   @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();
   }
   
   
   }
   
   }
   

Solution 1

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

Solution 2

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

Solution 3

public class GetCssValues {

public WebDriver driver;
private By bySearchButton = By.name("btnK");

@BeforeClass
public void setUp() {
    driver = new FirefoxDriver();
    driver.get("http://www.google.com");
}

@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