How Can I verify 'Footer Top'(Web Element) background image colour? - list

Question

I am just trying to verifying color for 'footer-top' background image.
Console view for 'footer top' icon is'
Under Styles:
footer .footer-top {
background: #1571c9;
float: left;
margin-top: 55px;
padding: 25px 0;
width: 100%;
Under Elements:
<div class="footer-top">
<div class="sw-layout">
<div class="footer-section">
<h5>More Information</h5>
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
<div class="footer-section hide-for-xs">
<h5>Finance Cards</h5>
<ul>
<div>
<li>Cash Back Finance Cards</li></div>
<li>Points / Rewards Credit Cards</li>
<li>Travel / Air Miles Credit Cards</li>
<li>Islamic Cards</li>
<li>Business Credit Cards</li>
</li>
</ul>
</div><div class="footer-section hide-for-xs">
<h5>Personal Loans</h5>
<ul>
<li>Salary Transfer Loans</li>
<li>Loans Without Salary Transfer
</li>
</ul>
I am using below lines of code :
String FooterTopSectionColour =
driver.findElement(By.className("footer-top")).getCssValue("background");
try {
Assert.assertEquals("#1571c9", FooterTopSectionColour);
System.out.println("Colour matches with : "+
FooterTopSectionColour);
}
catch (Error e)
{e.printStackTrace();
}
In DOM colour is given in Hex value but Selenium is returning in terms of rgb.
You can check below error in console for the same :
java.lang.AssertionError: expected [rgb(21, 113, 201) none repeat scroll 0% 0% / auto padding-box border-box] but found [#1571c9]
at org.testng.Assert.fail(Assert.java:94)
at org.testng.Assert.failNotEquals(Assert.java:513)
at org.testng.Assert.assertEqualsImpl(Assert.java:135)
at org.testng.Assert.assertEquals(Assert.java:116)
at org.testng.Assert.assertEquals(Assert.java:190)
at org.testng.Assert.assertEquals(Assert.java:200)
at tests.homepage.HomePageStepDefinitions.vefify_colour_for_footer_top_section(HomePageStepDefinitions.java:378)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at cucumber.runtime.Utils$1.call(Utils.java:40)
at cucumber.runtime.Timeout.timeout(Timeout.java:16)
at cucumber.runtime.Utils.invoke(Utils.java:34)
at cucumber.runtime.java.JavaStepDefinition.execute(JavaStepDefinition.java:38)
at cucumber.runtime.StepDefinitionMatch.runStep(StepDefinitionMatch.java:37)
at cucumber.runtime.Runtime.runStep(Runtime.java:300)
at cucumber.runtime.model.StepContainer.runStep(StepContainer.java:44)
at cucumber.runtime.model.StepContainer.runSteps(StepContainer.java:39)
at cucumber.runtime.model.CucumberScenario.run(CucumberScenario.java:44)
at cucumber.runtime.model.CucumberFeature.run(CucumberFeature.java:165)
at cucumber.api.testng.TestNGCucumberRunner.runCucumber(TestNGCucumberRunner.java:63)
at cucumber.api.testng.AbstractTestNGCucumberTests.feature(AbstractTestNGCucumberTests.java:21)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.testng.internal.MethodInvocationHelper.invokeMethod(MethodInvocationHelper.java:86)
at org.testng.internal.Invoker.invokeMethod(Invoker.java:643)
at org.testng.internal.Invoker.invokeTestMethod(Invoker.java:820)
at org.testng.internal.Invoker.invokeTestMethods(Invoker.java:1128)
at org.testng.internal.TestMethodWorker.invokeTestMethods(TestMethodWorker.java:129)
at org.testng.internal.TestMethodWorker.run(TestMethodWorker.java:112)
at org.testng.TestRunner.privateRun(TestRunner.java:782)
at org.testng.TestRunner.run(TestRunner.java:632)
at org.testng.SuiteRunner.runTest(SuiteRunner.java:366)
at org.testng.SuiteRunner.runSequentially(SuiteRunner.java:361)
at org.testng.SuiteRunner.privateRun(SuiteRunner.java:319)
at org.testng.SuiteRunner.run(SuiteRunner.java:268)
at org.testng.SuiteRunnerWorker.runSuite(SuiteRunnerWorker.java:52)
at org.testng.SuiteRunnerWorker.run(SuiteRunnerWorker.java:86)
at org.testng.TestNG.runSuitesSequentially(TestNG.java:1244)
at org.testng.TestNG.runSuitesLocally(TestNG.java:1169)
at org.testng.TestNG.run(TestNG.java:1064)
at org.testng.remote.AbstractRemoteTestNG.run(AbstractRemoteTestNG.java:114)
at org.testng.remote.RemoteTestNG.initAndRun(RemoteTestNG.java:251)
at org.testng.remote.RemoteTestNG.main(RemoteTestNG.java:77)
So, How can I debug it?
Please once check the code which I have used is correct or not!
And also let me know how to convert hex to rgb and compare it by using selenium? Thanks!

Answer 1

As your DOM colour and the CSS colours are different, you need to convert one format to to other and then you need to compare or assert it.
In the below code, I have added the steps which will convert the RGB values into an Hexa decimal and then assert the condition. And I assume that, if you print 'footerTopSelectionColour' value then it prints in the below format :
rgb(21, 113, 201) none repeat scroll 0% 0% / auto padding-box
border-box
Find the modified lines of your code below :
String footerTopSectionColour = driver.findElement(By.className("footer-top")).getCssValue("background");
try {
// I'm assuming that the value of 'footerTopSelectionColour' value will be like below
// rgb(21, 113, 201) none repeat scroll 0% 0% / auto padding-box border-box
// So first we need to convert colour code from rgb to hexa decimal
String value = footerTopSectionColour.trim();
String[] rgbs = value.split("\\)")[0].split("\\(")[1].split(", ");
long r = Long.parseLong(rgbs[0]);
long g = Long.parseLong(rgbs[1]);
long b = Long.parseLong(rgbs[2]);
String hex = String.format("#%02x%02x%02x", r, g, b);
System.out.println("=> The hex conversion is : "+hex);
// After converting you can assert like below
Assert.assertEquals("#1571c9", hex);
System.out.println("Colour matches with : "+ footerTopSectionColour);
} catch (Exception e) {
e.printStackTrace();
}
I hope this answer helps...

Answer 2

Above ans is working fine in converting value from rgb to hexa but assert statement is failed.
footerTopSectionColour colour is : rgb(21, 113, 201) none repeat scroll 0% 0% / auto padding-box border-box
The hex conversion is : #1571c9
Assert.assertEquals(hex, footerTopSectionColour);
Above line of code is throwing error as it is comparing 2 dissimilar values. So instead , use below assert statement to verify it and it works fine.
Assert.assertEquals("#1571c9", hex);