Verify Colour of Elements using Selenium WebDriver

0.00 avg. rating (0% score) - 0 votes

QA folks need to do Regression Testing as part of their Job.

Since doing Regression on daily/weekly basis is cumbersome, we automate the functional flows of our application and these are called FTs (Functional Tests).

Apart from executing the FTs, we do manual testing mostly to validate the alignment, font size, colour etc.

Since, manually verifying the colour of all controls/elements is a tedious and time-consuming job, we should automate it also.

How?

We can automate it by using Selenium Webdriver itself.

For example, I am taking Java as a language of choice with Selenium WebDriver.

Now, let’s see how to verify/assert colour in Selenium WebDriver.

Here, we are verifying the colour of the label “Forgot Password?” on Naukri Recruiter Login Page. For reference, see following screen shot:

 

1

 

Steps:

First of all, we have to get the value of colour using getCssValue method provided by Selenium Webdriver.

We can do it by using the below code:

 String color = driver.findElement(By.xpath(“//div[contains(@class, ‘logo-subtext’)]”)).getCssValue(“color”);

In the above code, CSS attribute ‘color’ is stored in a String variable ‘color’.

The above code will return value in RGB format such as “rgba(36, 93, 193, 1)”.

Now we will convert it into hexadecimal code using Java as shown below:

String[] hexValue = color.replace(“rgba(“, “”).replace(“)”, “”).split(“,”);                           

hexValue[0] = hexValue[0].trim();

int hexValue1 = Integer.parseInt(hexValue[0]);                   

hexValue[1] = hexValue[1].trim();

int hexValue2 = Integer.parseInt(hexValue[1]);                   

hexValue[2] = hexValue[2].trim();

int hexValue3 = Integer.parseInt(hexValue[2]);                   

String actualColor = String.format(“#%02x%02x%02x”, hexValue1, hexValue2, hexValue3);

It is done!!

You will get the value of colour in Hexadecimal code after executing the above code.

We can add an Assert statement to verify that the colour is matching with the expected colour.

Assert.assertTrue(actualColor.equals(“#0045d0”));

//Expected value is taken from the above screen shot

After performing all the above steps, your whole method looks like below:

2

Usage:

  • You can integrate this colour-verification code in your existing test cases. So there is no need to maintain the separate test cases for colour verification of Elements
  • You can verify the colour changing scenarios while hovering the mouse on Elements
  • You can verify the colours of the messages (like error message, warning message, some information, etc.)

I hope you found this blog helpful !!

One thought on “Verify Colour of Elements using Selenium WebDriver

  1. Hi blogger ! I read your page everyday and i must say you have very interesting posts here.
    Your page deserves to go viral. You need initial traffic only.
    How to go viral fast? Search for: forbesden’s tools

Comments are closed.