Highlighting WebElement with Selenium and restoring original border?

Question

I stumbled upon this SO answer https://stackoverflow.com/a/10660734/2985796 and am trying to make sense of how SCRIPT_GET_ELEMENT_BORDER and SCRIPT_UNHIGHLIGHT_ELEMENT are instantiated.

I feel like the post would make sense to someone familiar with JS, but I sadly have never gotten my hands dirty with it. What I am trying to do is basically recreate this answer but in view of my application. What I have done is to extend Selenium's FirefoxDriver to override the FindElement function. In the new function a found WebElement is highlighted and remembered. When the function is called again the remembered element has its border set to none. Which, as the answer notes, removes the original border. I would like to keep the original border after the highlighting is completed.

Here is my class FirefoxDriverEx so far

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class FirefoxDriverEx extends FirefoxDriver
{
    private WebElement LastHighlightedElement = null;

    private static final String HIGHLIGHT_BOARDER_JS = "arguments[0].style.border='3px solid red'";
    private static final String UNHIGHLIGHT_BOARDER_JS = "arguments[0].style.border='none'";

    @Override
    public WebElement findElement(By by) 
    {
        UndoHighlight();
        WebElement foundElement = super.findElement(by);
        if (this instanceof JavascriptExecutor) 
        {
            ((JavascriptExecutor)this).executeScript(HIGHLIGHT_BOARDER_JS, foundElement);
            LastHighlightedElement = foundElement;
        }
        return foundElement;
    }

    private void UndoHighlight()
    {
        if(LastHighlightedElement != null)
        {
            try
            {
                if (this instanceof JavascriptExecutor) 
                    ((JavascriptExecutor)this).executeScript(UNHIGHLIGHT_BOARDER_JS, LastHighlightedElement);
                LastHighlightedElement = null;
            }
            catch(Exception ex) { } 
        }
    }
}

What I would like to do is create a function GetElementBorder that when passed a WebElement returns a String representing its current border. Then use it in the manner below.

public class FirefoxDriverEx extends FirefoxDriver
{
    private String LastElementBorder = null;
    private WebElement LastHighlightedElement = null;

    private static final String HIGHLIGHT_BOARDER_JS = "arguments[0].style.border='3px solid red'";

    @Override
    public WebElement findElement(By by) 
    {
        UndoHighlight();
        WebElement foundElement = super.findElement(by);
        if (this instanceof JavascriptExecutor) 
        {
            ((JavascriptExecutor)this).executeScript(HIGHLIGHT_BOARDER_JS, foundElement);
            LastElementBorder = GetElementBorder(foundElement);
            LastHighlightedElement = foundElement;
        }
        return foundElement;
    }

    private void UndoHighlight()
    {
        if(LastHighlightedElement != null && LastElementBorder != null)
        {
            try
            {
                String setLastBorderJS = "arguments[0].style.border='" + LastElementBorder + "'";
                if (this instanceof JavascriptExecutor) 
                    ((JavascriptExecutor)this).executeScript(setLastBorderJS, LastHighlightedElement);
                LastHighlightedElement = null;
                LastElementBorder = null;
            }
            catch(Exception ex) { } 
        }
    }

    private String GetElementBorder(WebElement elem)
    {
        return null;
    }
}

I guess under the linked answer above I do not see how the answerer goes from the JS shown under the SCRIPT_GET_ELEMENT_BORDER to the String representing the border?

do you want to highlight all web elements which were used with custom `findElement` method OR do you want to create a method which returns `style.border` value for any web element? — drets, Dec 15 '15 at 23:26
I want to highlight the last `WebElement` found with the custom `findElement` method AND create a custom method which returns the `style.border` of a given `WebElement`. The first part is "finished" but relies on the fact that the custom method works properly. Currently the custom method returns `null` but should return the `style.border` as a string that can be used in the `UndoHighlight` method. I assume this has to do with the linked question but I do not know how, in the Q, they go from the given JS to the `String` representing the `style.border`. — KDecker, Dec 15 '15 at 23:45

drets · Accepted Answer · 2015-12-15T23:56:10.973

2

Method which returns style.border value for any web element:

private String getElementBorder(WebElement elem)
{
    return (String) ((JavascriptExecutor)this).executeScript("return arguments[0].style.border", elem);
}

edited Dec 15 '15 at 23:56

answered Dec 15 '15 at 23:48

drets

2,583
2
24
38

1

Hmm, I think this is actually exactly what I was looking for. I will try it out here shortly and let you know. Thanks! – KDecker Dec 15 '15 at 23:50
One note - you need to cast value to String – drets Dec 15 '15 at 23:55

Highlighting WebElement with Selenium and restoring original border?

1 Answers1