{"id":1296,"date":"2016-08-06T06:42:47","date_gmt":"2016-08-06T06:42:47","guid":{"rendered":"http:\/\/www.testingdocs.com\/questions\/?p=1296"},"modified":"2024-12-14T03:29:33","modified_gmt":"2024-12-14T03:29:33","slug":"how-to-highlight-web-elements-on-the-page-in-selenium-tests","status":"publish","type":"post","link":"https:\/\/www.testingdocs.com\/questions\/how-to-highlight-web-elements-on-the-page-in-selenium-tests\/","title":{"rendered":"Highlight Web Elements on the page in Selenium tests?"},"content":{"rendered":"

Highlight Web Elements on the page in Selenium tests?<\/h1>\n

Let’s see how to highlight web elements using the Selenium tool. We can use the Event listener to highlight web elements on the web page under test. To accomplish the task, we can use JavascriptExecutor and EventFiringWebDriver. Find the code below that draws a visible border to highlight web element interactions during selenium tests.<\/p>\n

Basic Things<\/strong><\/h2>\n

WebDriverEventListener<\/strong> is an interface with method signatures for the set of actions performed each time the event occurs.<\/p>\n

AbstractWebDriverEventListener<\/strong> is an abstract base class, you can use this base class if you want to implement a WebDriverEventListener. Methods provided by this class have empty implementations.<\/p>\n

WebElementHighlighter<\/strong> is the class only interested in the beforeFindBy()<\/em> method.<\/p>\n

 <\/p>\n

\"Highlight<\/p>\n

Highlight Web Elements Code
\n<\/strong><\/h2>\n
public class WebElementHighlighter extends AbstractWebDriverEventListener {\r\n\r\npublic void beforeFindBy(By by, WebElement element, WebDriver driver){\r\n\r\nWebElement webelement = driver.findElement(by);\r\n\r\nif (driver instanceof JavascriptExecutor) {\r\n ((JavascriptExecutor)driver).executeScript(\"arguments[0].style.border='10px \r\nsolid green'\", webelement);\r\n }\r\n \r\n File scrFile = ((TakesScreenshot) driver)\r\n .getScreenshotAs(OutputType.FILE);\r\n try {\r\n FileUtils.copyFile(scrFile, new File(\"images\/HighlighterScreenCapture\" + \r\ncurrentTime() + \".jpg\"));\r\n } \r\n catch (IOException e) {\r\n e.printStackTrace();\r\n }\r\n }\r\n \r\n public String currentTime()\r\n {\r\n Date todayDate = new Date();\r\n SimpleDateFormat formatter = new SimpleDateFormat(\"ddMMyy_HHmmss\");\r\n String formattDate = formatter.format(todayDate);\r\n return formattDate;\r\n\r\n}\r\n}<\/pre>\n
 <\/p>\n
Sample Selenium Tests<\/strong><\/h2>\n
Let’s code a sample search test method to enter some info on the Twitter page..<\/p>\n
 <\/p>\n
public class TwitterTest { \r\n public WebDriver webDriver = null; \r\n public EventFiringWebDriver driver = null; \r\n \r\n @BeforeClass\r\n public void init() {\r\n System.setProperty(\"webdriver.gecko.driver\", \"drivers\/geckodriver.exe\");\r\n webDriver = new FirefoxDriver(); \r\n driver = new EventFiringWebDriver(webDriver); \r\n WebElementHighlighter highlighter = new WebElementHighlighter();\r\n driver.register(highlighter); \r\n }\r\n\r\n\/\/ Twitter page test\r\n @Test \r\n public void SampleTest() throws Throwable { \r\n driver.get(\"https:\/\/www.twitter.com\/login\");\r\n driver.manage().window().maximize();\r\n driver.findElement(By.name(\"session[username_or_email]\")).clear();\r\n driver.findElement(By.name(\"session[username_or_email]\"))\r\n.sendKeys(\"TestingDocs.com\");\r\n WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(120, 1));\r\nwait.until(ExpectedConditions.titleContains(\"Twitter\"));\r\n } \r\n \r\n@AfterClass\r\n public void closeBrowser() {\r\n driver.quit();\r\n }\r\n}\r\n<\/pre>\n
 <\/p>\n
The output of the Test<\/strong><\/h2>\n
Run the TestNG selenium test. The highlighter highlights the web elements during the test interactions.<\/p>\n
 <\/p>\n
\"Twitter<\/p>\n
 <\/p>\n
<\/h2>\n
TestNG Tutorials on this website can be found at:<\/p>\n