How to highlight element in Selenium- Java in Page Object Mode?

Question

I'm performing Selenium automation in Java using POM. I need to highlight elements on the following web page. But it doesn't make any effect at all, though I don't get any error message, it simply doesn't highlight the element I've selected.

As I'm using POM pattern I have a separate class including all element functionality methods, such as click, write text, etc.

package pageObjects;

import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;

public class BasePage {
    public WebDriver driver;
    public WebDriverWait wait;

    // Constructor
    public BasePage (WebDriver driver) {
        this.driver = driver;
        wait = new WebDriverWait(driver, 15);
    }

    // Click Method
    public void click (By elementBy) {
        waitVisibility(elementBy);
        driver.findElement(elementBy).click();
    }  

I have highlighting element method as following.

// Element highlighter method
public static void highLightElement(WebDriver driver, By elementBy) {
    JavascriptExecutor js = (JavascriptExecutor)driver; 
    js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 2px solid red;');", elementBy);

    try {
        Thread.sleep(1000);
    } catch (InterruptedException e) {
        System.out.println(e.getMessage());
    } 

    js.executeScript("arguments[0].setAttribute('style','border: solid 2px white');", elementBy);  
}

I have changed my click method as following.

public void click_2 (By elementBy) {
    waitVisibility(elementBy);
    highLightElement(driver,elementBy);
    driver.findElement(elementBy).click();
}

And use it in a separate class with all page methods.

package pageObjects;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.Select;

public class HomePage extends BasePage {

    // Constructor
    public HomePage (WebDriver driver) {
        super(driver);
    }

    // Page Variables 
    String baseURL = "https://www.bookdepository.com/";

    // Web Elements 

    // --- Sign In UI ---
    By signInJoin_button = By.xpath("//div[@class='page-slide']//ul[@class='right-nav mobile-nav-content']//li[3]//a[1]");
    By signOut_button = By.xpath("/html/body/div[4]/div[1]/div/ul[2]/li[5]/a");

    // Page Methods ---
    public HomePage goToBookDepositoryHomePage (){
        driver.get(baseURL);
        pause();
        return this;
    }

    public LoginPage goToLoginPage (){
        click_2(signInJoin_button);
        pause();
        return new LoginPage(driver);
    }

What am I doing wrong here?

Answer 1

Try the following code. This will highlight all the web elements of a test page. I am using the EventFiringWebDriver to highlight the webelements in the below code.

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.events.AbstractWebDriverEventListener;
import org.openqa.selenium.support.events.EventFiringWebDriver;

public class HighLighterEventListener extends AbstractWebDriverEventListener {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "./libs/chromedriver 4");
        WebDriver webdriver=new ChromeDriver();

        EventFiringWebDriver driver = new EventFiringWebDriver(webdriver);
        webdriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        driver.get("https://yosuva.com");
        driver.register(new HighLighterEventListener());

        driver.findElement(By.xpath("//span[text()='Home']"));
        driver.findElement(By.xpath("//span[text()='About']"));
        driver.findElement(By.xpath("//span[text()='Tools']"));
        driver.findElement(By.xpath("//span[text()='News']"));
        driver.findElement(By.xpath("//span[text()='Events']"));
        driver.findElement(By.xpath("//span[text()='Contact']"));

        driver.quit();
    }

    @Override
    public void afterFindBy(By by, WebElement element, WebDriver driver) {
        ((JavascriptExecutor)driver).executeScript(
            "arguments[0].style.border='3px solid green'",element
        );
    }
}

Answer 2

You should use WebElement and not By to change the style. Try following code:

public static void highLightElement(WebDriver driver, By elementBy) {
    WebElement webElement = driver.findElement(elementBy);
    String originalStyle = webElement.getAttribute("style");

    JavascriptExecutor js = (JavascriptExecutor) driver; 
    js.executeScript("arguments[0].setAttribute(arguments[1], arguments[2]", webElement, "style", originalStyle + "border: 2px solid red;");

    //Do something e.g. make a screenshot

    //Reset style
    js.executeScript("arguments[0].setAttribute(arguments[1], arguments[2])", webElement, "style", originalStyle);
}

I think it makes sense to keep the original style and just add the border. After doing something with the highlighted element e.g. creating a screenshot, you should reset the style. When you return the original style you could remove the reset part in a separate method.