How to replace a new xpath with the existing xpath using JS executeScript() method?

Question

I am writing a Selenium method in Java which highlights the text area with a Yellow Background and Red boundary. It does by injecting a HTML Attribute 'style' in the xpath using JavascriptExecutor class and executeScript() method.

public static void objHighlight(WebDriver webdriver, WebElement element)
{
    JavascriptExecutor js = (JavascriptExecutor) webdriver;
    String originalStyle = element.getAttribute("style");
    js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", element);
    try
    {
        Thread.sleep(500);
    }
    catch (InterruptedException e)
    {
        e.printStackTrace();
    }
    //js.executeScript("arguments[0].setAttribute('style', '" + originalStyle + "');", element);
                
}

The problem comes when an xpath doesnt have the Attribute 'style'. When such a xpath is encountered (All (42936)), the method adds the attribute: 'style = "background: yellow; border: 2px solid red;"'.

The new xpath is now: All (42936) and this button is highlighted in Yellow and has a Red boundary. I see that such and such a text is selected and verified. This highlight stays for 500 ms and then the control tries to remove this highlighting. Now the problem begins.

When the Selenium control reaches the commented line:

js.executeScript("arguments[0].setAttribute('style', '" + originalStyle + "');", element); this is when the problem occurs. The control tries to replace style = "background: yellow; border: 2px solid red;" and puts in style = "" , as the original style attribute was not present at all. The new xpath now becomes All (42936).

This now throws a StaleElementReferenceException.

Is there any way I can replace the whole xpath with the original xpath after the highlighting is done?

All (42936) ===>> All (42936)? I have tried workarounds, but they are highly ineffective.

score 0 · Accepted Answer · answered Jul 06 '23 at 07:48

As the initial element:

<span dir="auto" class="sapMITHTextContent">All (42936)</span>

gets modified as:

<span dir="auto" class="sapMITHTextContent" style="background: yellow; border: 2px solid red;">All (42936)</span>

Now to set the element back the original state you can use removeAttribute() method as follows:

public static void objHighlight(WebDriver webdriver, WebElement element)
{
    JavascriptExecutor js = (JavascriptExecutor) webdriver;
    // String originalStyle = element.getAttribute("style");
    js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", element);
    try
        {
        Thread.sleep(500);
        }
    catch (InterruptedException e)
        {
        e.printStackTrace();
        }
    js.executeScript("arguments[0].removeAttribute('style')", element);
}

Thank you. Your solution works as expected. – Benny Thomas Aug 09 '23 at 03:16 — Benny Thomas, Aug 09 '23 at 03:16

How to replace a new xpath with the existing xpath using JS executeScript() method?

1 Answers1