It’s likely that you’ll run into odd test behaviour that makes you question the locators you’re using in a test. But how do you interrogate your locators to make sure they are doing what you expect?
By leveraging some simple JavaScript and CSS styling, you can highlight a targeted element on the page so you can visually inspect it to make sure it’s the one you want.
Let’s take a look at the sample code.
Sample Code
Java
// filename: HighlightElement.java
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class HighlightElement {
WebDriver driver;
JavascriptExecutor js;
@Before
public void setUp() throws Exception {
driver = new FirefoxDriver();
js = (JavascriptExecutor) driver;
}
@After
public void tearDown() throws Exception {
driver.quit();
}
/*create a highlightElement helper method that will accept a Selenium WebDriver
element and a time to wait (e.g., duration) as arguments.
By setting a duration, we can control how long to highlight an element on
the page before reverting the styling back. And we can make this an optional
argument by setting a sensible default (e.g., 3 seconds).
*/
private void highlightElement(WebElement element, int duration) throws InterruptedException {
String original_style = element.getAttribute("style");
js.executeScript(
"arguments[0].setAttribute(arguments[1], arguments[2])",
element,
"style",
"border: 2px solid red; border-style: dashed;");
if (duration > 0) {
Thread.sleep(duration * 1000);
js.executeScript(
"arguments[0].setAttribute(arguments[1], arguments[2])",
element,
"style",
original_style);
}
}
@Test
public void highlightElementTest() throws InterruptedException {
driver.get("http://the-internet.herokuapp.com/large");
WebElement element = driver.findElement(By.id("sibling-2.3"));
highlightElement(element, 3);
}
}
Python
# filename: highlight_elements.py
import unittest
from selenium import webdriver
import time
class HighlightElements(unittest.TestCase):
def setUp(self):
self.driver = webdriver.Firefox()
def tearDown(self):
self.driver.quit()
def highlight(self, element, duration=3):
driver = self.driver
# Store original style so it can be reset later
original_style = element.get_attribute("style")
# Style element with dashed red border
driver.execute_script(
"arguments[0].setAttribute(arguments[1], arguments[2])",
element,
"style",
"border: 2px solid red; border-style: dashed;")
# Keep element highlighted for a spell and then revert
if (duration > 0):
time.sleep(duration)
driver.execute_script(
"arguments[0].setAttribute(arguments[1], arguments[2])",
element,
"style",
original_style)
def test_example_1(self):
driver = self.driver
driver.get('http://the-internet.herokuapp.com/large')
self.highlight(driver.find_element_by_id('sibling-2.3'))
if __name__ == "__main__":
unittest.main()
C#
// filename: HighlightElements.cs
using NUnit.Framework;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
using System.Threading;
public class HighlightElements
{
IWebDriver Driver;
IJavaScriptExecutor JSDriver;
[SetUp]
public void SetUp()
{
Driver = new FirefoxDriver();
JSDriver = (IJavaScriptExecutor) Driver;
}
[TearDown]
public void TearDown()
{
Driver.Quit();
}
/*create a highlightElement helper method that will accept a Selenium WebDriver
element and a time to wait (e.g., duration) as arguments.
By setting a duration, we can control how long to highlight an element on
the page before reverting the styling back. And we can make this an optional
argument by setting a sensible default (e.g., 3 seconds).
*/
private void HighlightElement(IWebElement Element, int Duration = 3)
{
string OriginalStyle = Element.GetAttribute("style");
JSDriver.ExecuteScript("arguments[0].setAttribute(arguments[1], arguments[2])",
Element,
"style",
"border: 2px solid red; border-style: dashed;");
Thread.Sleep(Duration * 1000);
JSDriver.ExecuteScript("arguments[0].setAttribute(arguments[1], arguments[2])",
Element,
"style",
OriginalStyle);
}
[Test]
public void HighlightElementExample()
{
Driver.Navigate().GoToUrl("http://the-internet.herokuapp.com/large");
IWebElement TargetElement = Driver.FindElement(By.Id("sibling-2.3"));
HighlightElement(TargetElement);
}
}
When you save this file and run it this is what will happen.
- Open the browser
- Load the page
- Find the element to highlight
- Change the styling of the element so it has a red dashed-line border
- Wait 3 seconds
- Revert the styling of the element back (removing the red border)
- Close the browser
This approach can be handy when trying to debug your test. Alternatively, you could verify your locators by using a browser plugin like FireFinder.