Working with colours

You will occasionally want to validate the colour of something as part of your tests; the problem is that colour definitions on the web are not constant. Would it not be nice if there was an easy way to compare a HEX representation of a colour with a RGB representation of a colour, or a RGBA representation of a colour with a HSLA representation of a colour?

Worry not. There is a solution: the Color class!

First of all, you will need to import the class:


import org.openqa.selenium.support.Color;
  

from selenium.webdriver.support.color import Color
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

include Selenium::WebDriver::Support
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  
import org.openqa.selenium.support.Color

You can now start creating colour objects. Every colour object will need to be created from a string representation of your colour. Supported colour representations are:


private final Color HEX_COLOUR = Color.fromString("#2F7ED8");
private final Color RGB_COLOUR = Color.fromString("rgb(255, 255, 255)");
private final Color RGB_COLOUR = Color.fromString("rgb(40%, 20%, 40%)");
private final Color RGBA_COLOUR = Color.fromString("rgba(255, 255, 255, 0.5)");
private final Color RGBA_COLOUR = Color.fromString("rgba(40%, 20%, 40%, 0.5)");
private final Color HSL_COLOUR = Color.fromString("hsl(100, 0%, 50%)");
private final Color HSLA_COLOUR = Color.fromString("hsla(100, 0%, 50%, 0.5)");
  

HEX_COLOUR = Color.from_string('#2F7ED8')
RGB_COLOUR = Color.from_string('rgb(255, 255, 255)')
RGB_COLOUR = Color.from_string('rgb(40%, 20%, 40%)')
RGBA_COLOUR = Color.from_string('rgba(255, 255, 255, 0.5)')
RGBA_COLOUR = Color.from_string('rgba(40%, 20%, 40%, 0.5)')
HSL_COLOUR = Color.from_string('hsl(100, 0%, 50%)')
HSLA_COLOUR = Color.from_string('hsla(100, 0%, 50%, 0.5)')
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

HEX_COLOUR = Color.from_string('#2F7ED8')
RGB_COLOUR = Color.from_string('rgb(255, 255, 255)')
RGB_COLOUR = Color.from_string('rgb(40%, 20%, 40%)')
RGBA_COLOUR = Color.from_string('rgba(255, 255, 255, 0.5)')
RGBA_COLOUR = Color.from_string('rgba(40%, 20%, 40%, 0.5)')
HSL_COLOUR = Color.from_string('hsl(100, 0%, 50%)')
HSLA_COLOUR = Color.from_string('hsla(100, 0%, 50%, 0.5)')
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

private val HEX_COLOUR = Color.fromString("#2F7ED8")
private val RGB_COLOUR = Color.fromString("rgb(255, 255, 255)")
private val RGB_COLOUR_PERCENT = Color.fromString("rgb(40%, 20%, 40%)")
private val RGBA_COLOUR = Color.fromString("rgba(255, 255, 255, 0.5)")
private val RGBA_COLOUR_PERCENT = Color.fromString("rgba(40%, 20%, 40%, 0.5)")
private val HSL_COLOUR = Color.fromString("hsl(100, 0%, 50%)")
private val HSLA_COLOUR = Color.fromString("hsla(100, 0%, 50%, 0.5)")
  

The Color class also supports all of the base colour definitions specified in http://www.w3.org/TR/css3-color/#html4.


private final Color BLACK = Color.fromString("black");
private final Color CHOCOLATE = Color.fromString("chocolate");
private final Color HOTPINK = Color.fromString("hotpink");
  

BLACK = Color.from_string('black')
CHOCOLATE = Color.from_string('chocolate')
HOTPINK = Color.from_string('hotpink')
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

BLACK = Color.from_string('black')
CHOCOLATE = Color.from_string('chocolate')
HOTPINK = Color.from_string('hotpink')
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

private val BLACK = Color.fromString("black")
private val CHOCOLATE = Color.fromString("chocolate")
private val HOTPINK = Color.fromString("hotpink")
  

Sometimes browsers will return a colour value of “transparent” if no colour has been set on an element. The Color class also supports this:


private final Color TRANSPARENT = Color.fromString("transparent");
  

TRANSPARENT = Color.from_string('transparent')
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

TRANSPARENT = Color.from_string('transparent')
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

private val TRANSPARENT = Color.fromString("transparent")
  

You can now safely query an element to get its colour/background colour knowing that any response will be correctly parsed and converted into a valid Color object:


Color loginButtonColour = driver.findElement(By.id("login")).getCssValue("color");
Color loginButtonBackgroundColour = driver.findElement(By.id("login")).getCssValue("background-color");
  

login_button_colour = driver.find_element_by_id('login').value_of_css_property('color')
login_button_background_colour = driver.find_element_by_id('login').value_of_css_property('background-color');
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

login_button_colour = driver.find_element(id: 'login').css_value('color')
login_button_background_colour = driver.find_element(id: 'login').css_value('background-color');
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

val loginButtonColour = driver.findElement(By.id("login")).getCssValue("color")
val loginButtonBackgroundColour = driver.findElement(By.id("login")).getCssValue("background-color")
  

You can then directly compare colour objects:


assert loginButtonBackgroundColour.equals(HOTPINK);
  

assert login_button_background_colour == HOTPINK
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

assert(login_button_background_colour == HOTPINK)
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

assert(loginButtonBackgroundColour.equals(HOTPINK))
  

Or you can convert the colour into one of the following formats and perform a static validation:


assert loginButtonBackgroundColour.asHex().equals("#ff69b4");
assert loginButtonBackgroundColour.asRgba().equals("rgba(255, 105, 180, 1)");
assert loginButtonBackgroundColour.asRgb().equals("rgb(255, 105, 180)");
  

assert login_button_background_colour.hex == '#ff69b4'
assert login_button_background_colour.rgba == 'rgba(255, 105, 180, 1)'
assert login_button_background_colour.rgb == 'rgb(255, 105, 180)'
  

// We don't have a C# code sample yet -  Help us out and raise a PR
  

assert(login_button_background_colour.hex == '#ff69b4')
assert(login_button_background_colour.rgba == 'rgba(255, 105, 180, 1)')
assert(login_button_background_colour.rgb == 'rgb(255, 105, 180)')
  

// We don't have a JavaScript code sample yet -  Help us out and raise a PR
  

assert(loginButtonBackgroundColour.asHex().equals("#ff69b4"))
assert(loginButtonBackgroundColour.asRgba().equals("rgba(255, 105, 180, 1)"))
assert(loginButtonBackgroundColour.asRgb().equals("rgb(255, 105, 180)"))
  

Colours are no longer a problem.