Highlight elements with Selenium WebDriver

Problem

We like to highlight elements with Selenium WebDriver like we could do with the previous version of Selenium. This will help us to see what is actually is going on in the browser. This method will slow down your tests a bit, but sometimes it is useful for debugging purpose.

Solution


public void highlightElement(WebDriver driver, WebElement element) {
    for (int i = 0; i < 2; i++) {
        JavascriptExecutor js = (JavascriptExecutor) 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, "");
    }
}
1
2
3
4
5
6
7
8
9
public void highlightElement(WebDriver driver, WebElement element) {
    for (int i = 0; i < 2; i++) {
        JavascriptExecutor js = (JavascriptExecutor) 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, "");
    }
}

How to use it


@Test
public void highlightTest() {
    WebElement searchField = driver.findElement(By
            .cssSelector("input#search_query_top"));
    highlightElement(searchField);
    searchField.sendKeys("ipod nano");

    WebElement searchButton = driver.findElement(By.cssSelector("input[name='submit_search']"));
    highlightElement(searchButton);
    searchButton.click();

    String searchHeader = driver.findElement(By.cssSelector("H1")).getText().toLowerCase();
    Assert.assertTrue(searchHeader.contains("ipod nano"));
}

public void highlightElement(WebElement element) {
    for (int i = 0; i < 2; i++) {
        JavascriptExecutor js = (JavascriptExecutor) 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, "");
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Test
public void highlightTest() {
    WebElement searchField = driver.findElement(By
            .cssSelector("input#search_query_top"));
    highlightElement(searchField);
    searchField.sendKeys("ipod nano");

    WebElement searchButton = driver.findElement(By.cssSelector("input[name='submit_search']"));
    highlightElement(searchButton);
    searchButton.click();

    String searchHeader = driver.findElement(By.cssSelector("H1")).getText().toLowerCase();
    Assert.assertTrue(searchHeader.contains("ipod nano"));
}

public void highlightElement(WebElement element) {
    for (int i = 0; i < 2; i++) {
        JavascriptExecutor js = (JavascriptExecutor) 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, "");
    }
}

Highlight elements with Selenium WebDriver
4 votes, 5.00 avg. rating (96% score)