Reputation: 305
I am testing a form using selenium web driver. When I enter invalid username the color of username label field changes to red. I want to get the color of that label field using selenium to find out weather the color of label is turned to red or not
Upvotes: 0
Views: 4214
Reputation: 2938
Please do it like below:
1.For any tag first do a inspect element on it via developers mode console will display a developers window divided into two parts
2.one window in the left shows HTML source code for the tag and other window right bottom of the screen shows CSS associated with that HTML source code
3.under Style tag we can view CSS associated with the currently selected tag
Now the Webdriver code
public static void main(String[] args) throws InterruptedException {
// TODO Auto-generated method stub
WebDriver driver = new FirefoxDriver();
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
driver.get("http:url/Login.html");
// identifying color before entering any value inside the input box
String visibilityBefore =driver.findElement(By.id("login-password")).getCssValue("border-bottom-color");
// print that value
System.out.println(visibilityBefore); // prints rgba(223, 223, 223, 1)
Thread.sleep(1000);
// click the login button without entering any value inside the
// user name and password to make red border come into action
driver.findElement(By.xpath("//*[@type='submit']")).click();
Thread.sleep(1000);
// identifying color after clicking the login button
String visibilityAfter =driver.findElement(By.id("login-password")).getCssValue("border-bottom-color");
System.out.println(visibilityAfter); // prints rgba(255, 0, 0, 1)
}
Please find the sample snapshot for a clear visibility:
For more help, please also look at How to Using Webdriver Selenium to get the value of "style" element
Upvotes: 2
Reputation: 1761
The color of the element is most likely controlled by a CSS class, which will apply a style to that element. This means that you could either just verify that the element has that particular style applied, or you can get the CSS value of the background color (presumably this is what's turned red). This thread may be helpful to you.
Upvotes: 1