Highlight elements in WebDriver during runtime

Question

Can someone please help!

How can I highlight all web elements in following class during test execution in WebDriver? With Selenium RC, it was quite straight forward

Answer 1

I am unaware of any way to do this in WebDriver, but it looks like there exists a class in Selenium WebDriver that should give you access to most if not all of the RC API. I'm not aware of how to actually do this using WebDriver.

The class WebDriverBackedSelenium looks like it contains much of the RC api you're used to including getEval

To create an object of type WebDriverBackedSelenium, just pass in the driver you've already been using in addition to your testing site's base URL

WebDriverBackedSelenium wdbs = new WebDriverBackedSelenium(driver, "http://www.google.com");

Answer 2

Here the code for higlighting the element in selenium: First create a class:

package com.demo.misc.function;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;

public class Miscellaneous 
{
    public static void highLight(WebElement element, WebDriver driver)
    {
        for (int i = 0; i <2; i++) 
        {
            try {
                JavascriptExecutor js = (JavascriptExecutor) driver;
                js.executeScript("arguments[0].setAttribute('style', arguments[1]);", element, "color: black; border: 4px solid red;");
                Thread.sleep(500);
                js.executeScript("arguments[0].setAttribute('style', arguments[1]);", element, "");
                Thread.sleep(500);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

        }

    }

}

And then you can call this by :

driver.get(baseUrl);
            Thread.sleep(2000);
            WebElement lnkREGISTER = driver.findElement(By.linkText("REGISTER"));
            Miscellaneous.highLight(lnkREGISTER, driver);
            lnkREGISTER.click();

Answer 3

In webdriver
Create a class for highligh element HighlightElement

HighlightElement.java

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;

import com.project.setup.WebDriverManager;

public class HighlightElement {

    public static void highlightElement(WebElement element) {
        for (int i = 0; i <2; i++) {
            JavascriptExecutor js = (JavascriptExecutor) WebDriverManager.driver;
            js.executeScript("arguments[0].setAttribute('style', arguments[1]);", element, "color: yellow; border: 2px solid yellow;");
            js.executeScript("arguments[0].setAttribute('style', arguments[1]);", element, "");
            }
        }
}

---

You can use

HighlightElement.highlightElement(driver.findElement(By.xpath("blaah blaah"));)

to highlight the WebElement with xpath "blaah blaah" in your test.

Answer 4

I use below code for highlighting in my webdriver java code using javascript executer:

//I make a call below function "flash"

    public static void flash(WebElement element, WebDriver driver) {
        JavascriptExecutor js = ((JavascriptExecutor) driver);
        String bgcolor  = element.getCssValue("backgroundColor");
        for (int i = 0; i <  3; i++) {
            changeColor("rgb(0,200,0)", element, js);
            changeColor(bgcolor, element, js);
        }
    }
    public static void changeColor(String color, WebElement element,  JavascriptExecutor js) {
        js.executeScript("arguments[0].style.backgroundColor = '"+color+"'",  element);

        try {
            Thread.sleep(20);
        }  catch (InterruptedException e) {
        }
     }

Hope that helped :)

Answer 5

This worked for me. Have improved upon the code submitted earlier on this thread.

public static WebDriver HighlightElement(WebDriver driver, WebElement element){ 
    if (driver instanceof JavascriptExecutor) {
        ((JavascriptExecutor)driver).executeScript("arguments[0].style.border='3px solid red'", element);
    }
    return driver;
}
public static WebDriver UnhighlightElement(WebDriver driver, WebElement element){   
    if (driver instanceof JavascriptExecutor) {    
        ((JavascriptExecutor)driver).executeScript("arguments[0].style.border=''", element);
    }
    return driver;  
}

Call these two functions once to highlight and once to unhighlight

Answer 6

For highlighting the element you can just use this:

JavascriptExecutor js =(JavascriptExecutor)driver;
js.executeScript("arguments[0].style.border='5px dotted yellow'", element);