CODEWITHSUNDEEP
javascriptnode.jsfirefoxselenium-webdriverhighlight
Perkele
Perkele

Reputation: 53

How to highlight element using javascript and firefox browser

I have a problem with creating valid function which will highlight certain defined elements on the webpage. Please note, that I am coding beginner, and the problem may be either simple environment setup issue, or lack of major knowledge of the javascript/selenium features.

I create my script in Eclipse Neon. To set up an environment I've installed node.js and geckodriver to be able to operate on firefox browser. The beginning of my script is:

var webdriver = require('selenium-webdriver'),
    By = webdriver.By

var driver = new webdriver.Builder().forBrowser('firefox').build();

I open the webpage by using driver.get(); and then I simply define the element location by using xPath ex.:

var element = driver.findElement(By.xpath("xPath goes here"));

And now the question begins, what should I do to make WebDriver to highlight this specified element with for ex. red border? While browsing the Stack and other similar pages, the only answers I found was something about using JavaScript Executor in Java syntax, or some webdriver functions using

element.style.backgroundColor = 'red'

but i get console error, that styleor some other part of the syntax is not a function. At this point, I am out of solutions how to make this happen, and I slowly doubt, that I will be able to finish this task without the knowledge about html5/java. Maybe anyone has ever encountered such difficulty and will share the clue?

https://jsfiddle.net/osav574j/ <- I've prepared simplyfied version of my script which may give you a clue of how my full code looks like. The highlight part is probably wrong, it's just to show you, how I thought it may be done, but that's pure assumption.

Upvotes: 5

Views: 3580

Answers (3)

S&#225;ndor Kriszti&#225;n
S&#225;ndor Kriszti&#225;n

Reputation: 699

This is a solution for blinking the element, with an example flashing the google search input field. You can parameterize the style of blink, and time interval / frequency.

const browsertype = 'chrome';
//const browsertype = 'firefox';
const { Builder, By, Key, until} = require('selenium-webdriver');
require( browsertype + 'driver' );
//require('selenium-webdriver/' + browsertype);
const link = 'https://www.google.hu/';
const btx = '//input[@name="q"]';

var browser = new Builder().forBrowser( browsertype ).build();

browser.navigate().to( link );
//browser.get( link );

var element = browser.findElement( By.xpath( btx ) );

blink( browser, element );

async function blink( browser, element ) {
  var i, 
  blink = { wait: 500,
            duration: 3000,
            //on: "arguments[0].style.backgroundColor = 'purple'",
            //off: "arguments[0].style.backgroundColor = 'white'",
            on: "arguments[0].setAttribute('style','border: solid 2px yellow;')",
            off: "arguments[0].setAttribute('style','border: solid 0px white;')"
          }
  blink.loop = Math.floor( blink.duration / blink.wait );
  blink.loop += blink.loop % 2;
  for(i=0;i<blink.loop;i++){

    await browser
    .executeScript( blink[ i%2==0 ? "on" : "off"], 
                    element );

    await browser.sleep( blink.wait );

  }

}

//driver.quit();

Upvotes: 0

Dhiraj Das
Dhiraj Das

Reputation: 174

This is the Javascript code to highlight an element. Selenium does not have any native method to highlight hence the only way out is using a code similar to this:

JavascriptExecutor js=(JavascriptExecutor)driver;
js.executeScript("arguments[0].setAttribute('style','border: solid 2px red')", username);

Here username is the name of the webelement.

Upvotes: 1

Saurabh Gaur
Saurabh Gaur

Reputation: 23815

You should try using executeScript() as below :-

var element = driver.findElement(By.xpath("xPath goes here"));
driver.executeScrip‌t("arguments[0].style.backgroundColor = 'red'", element);

Upvotes: 2

Related Questions