0

Need to find the button color into human-readable format below code is returning rgba value

Here is my code:

WebElement findbuttonColor = driver.findElement(By.id("color"));
String color = findbuttonColor.getCssValue("background-color"); 
System.out.println("Button color is :"+color);
stacktome
  • 790
  • 2
  • 9
  • 32
radha krishnan
  • 11
  • 2

3 Answers3

0

I am not sure what human-readable format mean, there are millions of colors which is possible to set for the element. Far not all of them have the names like green, blue, red, etc.

You get the value in rgba because the designer set up the value in rgba. The thing you could do is to define a structure that would map some well-known color codes to rgb (even not considering alpha channel) so that you could pich the "human-readable" format from that map.

Here is the example that might give a clue: Convert RGB values to color name

Alexey R.
  • 8,057
  • 2
  • 11
  • 27
0

You can get the element color(Background color of element) by:

element.getCssValue("background-color");

You can get the element text/caption color by:

element.getCssValue("color");

For example if you want to get the background and text color of "Sign in" button for LinkedIn, the code is as follows:

driver.get("https://www.amazon.com/");
String buttonColor = driver.findElement(By.id("searchDropdownBox")).getCssValue("background-color");
String buttonTextColor = driver.findElement(By.id("searchDropdownBox")).getCssValue("color");
System.out.println("Button color: " + buttonColor);
System.out.println("Text color " + buttonTextColor);
stacktome
  • 790
  • 2
  • 9
  • 32
0

When you do getCssValue(), it return rgb value. You can convert it into hex by using below backgroundColor = element.getCssValue("background-color"); Color.fromString(backgroundColor).asHex();

this returns hex code, something like "#def3ff". You can later compare it with your availbale hexcode in yous css.

Assert.assertEquals(def3ff, ExpectedHexCode);

Note: You can get hex code of your element by inspecting it > Styles. Refer below screenshot for details how to get Hexcodefrom Thank You,

Bhargavi
  • 13
  • 3