1

I am trying to get the background color of the body element and the text color of the button element after clicking on the button.

HTML code:

<html>
<head>     
<style>

#container
{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    overflow-x: scroll;
}

#content
{
    margin:4px, 4px; 
    padding:4px; 
    width: 500px; 
    height:500px; 
    text-align:justify; 
    background-color: #ccc;
}

</style>
</head>
<body>

<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button" onclick="dem_func()">Slide right</button>

<script>

function dem_func()
{
    document.getElementById('container').scrollLeft += 50;
<!-- Changing the text color of button element-->
    document.getElementById('slide').style.color='red'
<!-- Changing the background color of body element-->
    document.body.style.backgroundColor='yellow'
    return document.getElementById('slide').style.color
}

</script>
</body>
</html>

Working of the HTML code: After clicking on the button, the background color of the body of the page changes to yellow and the text color of the button changes to red as per the Javascript function. Also, the style attribute gets appended inline to the body and button element in the DOM as shown below:

<body style="background-color: yellow;">

<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button" onclick="dem_func()" style="color: red;">Slide right</button>

Selenium code:

String color1 = driver.findElement(By.xpath("child::html/child::body")).getAttribute("background-color");
System.out.println("Color of the background of body element: " + color1);
String color2 = driver.findElement(By.xpath("//button")).getAttribute("color");
System.out.println("Color of the text of button element: " + color2);

As per the Selenium doc for getAttribute() method:

Get the value of the given attribute of the element. Will return the current value, even if this has been modified after the page has been loaded. More exactly, this method will return the value of the property with the given name, if it exists. If it does not, then the value of the attribute with the given name is returned. If neither exists, null is returned.

But here it returns null for both color1 and color2.

I want to understand why the getAttribute method returns null.

Improve this question
3
  • 1
    color isn't an attribute of the element. It's part of the style attribute's value.
    – jonrsharpe
    Commented Sep 16, 2020 at 9:33
  • @jonrsharpe: Does it mean that the css properties of an element will always be defined within the style attribute of an element and we cannot set the css property as separate atttribute of an element ?
    – Sandesh Sawant
    Commented Sep 16, 2020 at 17:15
  • 1
    I'm not quite sure what you're asking, but you can't have e.g. <p color="red">I am red</p> and expect the text to actually be red unless you have the actual CSS rule for [color="red"] { color: red; }.
    – jonrsharpe
    Commented Sep 16, 2020 at 17:19

1 Answer 1

Reset to default
3

You should get the CSS value instead of attribute.Below sample code will print the background colour before and after click

WebElement.getCssValue("cssproperty") will return respective css property of the element

    WebElement body=driver.findElement(By.tagName("body"));
    WebElement button=driver.findElement(By.id("slide"));
    System.out.println("Body bg-color Before Click: "+body.getCssValue("background-color"));
    System.out.println("Button bg-color Before Click: "+button.getCssValue("color"));
    System.out.println();
    button.click();
    System.out.println("Body bg-color After Click: "+body.getCssValue("background-color"));
    System.out.println("Button bg-color After Click: "+button.getCssValue("color"));
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.