How to Validate Field Color in Selenium WebDriver – Validation for Mandatory FIeld or Valid values

Hello Folks,

Color code may represents an information about field. Consider below scenarios:

  1. All mandatory field of a web form will have a yellow bottom color.

     2. If User does not enter proper value in a text box, color of text box will be converted in to red.

You can verify these functionalities easily in Manual testing. We must include these validation in out automation scripts as well to increase test coverage by automation scripts.

Generally color code to a web element is given using CSS Style which we can easily check while inspecting. See an example below:

  1. Inspect the web element.
  2. Check “Styles” tab at right hand side.
  3. Here you can check all css attribute applied on inspected web element.
  4. There you will see color codes on web element if applied by developer as per requirements.
  5. You just need to identify correct css attribute. For example: To check bottom color of field, we need “border-bottom-color” css property.
  6. Css property named “border-bottom-color” has an hex code as value which represents a color. You can convert this color in to RGB.

HTML Code:

[html]
<html>
<head>
<style>
input{
border-bottom-color: #ffddac;
}
</style>
</head>
<body>
Email: <input type="email" id="email" placeholder="Email Address">
</body>
</html>

[/html]
 

JAVA Code:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;

public class VerifyColorCodeOfField {

	public static void main(String[] args) throws InterruptedException {

		System.setProperty("webdriver.chrome.driver", "./exefiles/chromedriver.exe");
		WebDriver driver = new ChromeDriver();
		driver.get("file:///C:/Users/amodm/Desktop/BottonColor.html");

		// Locating email web element
		WebElement emailInputbox = driver.findElement(By.id("email"));
		
		// Get value of Css property border-bottom-color which will be returned in RGB format.
		String colorCode= emailInputbox.getCssValue("border-bottom-color");
		
		System.out.println("Color code in RGB" + colorCode);
		
		String expectedColorCodeInRGB= "rgba(255, 221, 172, 1)";
		
		// Asserting actual and expected color codes
		Assert.assertEquals(colorCode, expectedColorCodeInRGB);


		// Closing driver
		driver.quit();

	}
}

Hope, this post will help you to increase test coverage of your automation scripts.
Use below website to convert hex code of color to RGB:

HEX to RGB

If you have any doubt, feel free to comment below.
If you like my posts, please like, comment, share and subscribe.
#ThanksForReading
#HappySelenium

1 thought on “How to Validate Field Color in Selenium WebDriver – Validation for Mandatory FIeld or Valid values

  1. String expectedColorCodeInRGB= “rgba(255, 221, 172, 1)”;

    The hex code we are fetching is matching with this ?
    Because I am not getting rgba(255,221,172,1)

Leave a Reply

Your email address will not be published. Required fields are marked *