0

I am trying to get the color property of the button element using Javascript inside Selenium, before and after clicking the button.

HTML code:

    <html>
    <head>
    <meta charset="utf-8">
    <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;
    }
    
    button
    {
        color: orange;
    }
    
    </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';
        return document.getElementById('slide').style.color;
    }

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

Working of the HTML code: Orange color is applied to the button text through CSS. On clicking the button, the Javascript dem_func() gets invoked which changes the text color of button to red and it should return the text color of the button element.

Selenium code:

    //Before clicking the button
    String color7 = (String)js.executeScript("return document.getElementById('slide').style.color");
    System.out.println("Color of the text of button element: " + color7);

    //After clicking the button
    String color8 = (String)js.executeScript("return document.getElementById('slide').click();");
    System.out.println("Color of the text of button element: " + color8);
    String color9 = (String)js.executeScript("return document.getElementById('slide').style.color");
    System.out.println("Color of the text of button element: " + color9);

color9 returns red as expected.

color7 returns null, but the expected value is orange

color8 returns null, but the expected value is red

Any reason why both color7 and color8 returns null ?

Improve this question

1 Answer 1

Reset to default
2

We would get colors as expected if we had developed code like:

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

The below line is trying to get the color name from the 'inline' color element instead of "<style//>" css block:

document.getElementById('slide').style.color

Since there is no inline styling, we are getting blank value.

To solve cases with style sheets, we can use getComputedStyle. Something like:

String color7 = (String)js.executeScript("return window.getComputedStyle(document.getElementById('slide')).getPropertyValue('color')");
System.out.println("Color of the text of button element: " + color7);
//Result would be -> Color of the text of button element: rgb(255, 165, 0)

We can write our code or use readily available jars to convert RGB to actual color names.

Color8 resulting null is expected.

Improve this answer
2
  • Can you please explain why the color8 null is expected ? Because I am returning the value in Javascript onclick() function upon clicking the button..
    – Sandesh Sawant
    Commented Sep 21, 2020 at 15:17
  • @SandeshSawant document.getElementById('slide').click() is a void function it has no return value that's the reason it gives you null
    – Mohamed Sulaimaan Sheriff
    Commented Sep 22, 2020 at 4:58

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.