How to return WebElement having particular CSS property using JavascriptExecutor?

Question

I am working on a scenario where I need to find a WebElement based on its CSS property, like background-color.

I have created the JQuery to find the element as below and it finds the webelement correctly using firefox console.

$('.search-bar-submit').each(function() { 
   return $(this).css('background-color') == '#fdd922'; 
});

Hence, I wrote the code to find this WebElement, i.e. searchbox and then tried to click it.

driver.get("http://www.flipkart.com/");
driver.findElement(By.id("fk-top-search-box")).sendKeys("iphone");

String query ="$('.search-bar-submit').each(function() { "
            + "return $(this).css('background-color') == '#fdd922'; });";
    
WebElement searchbox = (WebElement) ((JavascriptExecutor)driver).executeScript(query);
searchbox.click();

When I run the program, it gives me Exception in thread "main" java.lang.NullPointerException on line searchbox.click();

Can anyone help me out find the searchbox using JavascriptExecutor and then click on it? Am I missing something silly here?

Any help is appreciated. Thanks in Advance.

Vicky · Accepted Answer · 2015-07-29 20:25:41Z

2

WebElement searchbox = (WebElement) ((JavascriptExecutor)driver).executeScript(query);

The above code calls the function but doesn't do anything with the result, ie. it doesn't return it to the caller.

Add return in the script to return the webelement to the selenium script(webdriver)

return $('.search-bar-submit').each(function() { 
   return $(this).css('background-color') == '#fdd922'; 
});

The return type is List<WebElement>so typecast it to List if you typecast it to it will throw an ClassCastException as arraylist cannot be cast to a webelement

Code:

 List<WebElement> searchbox = (List<WebElement>) ((JavascriptExecutor)driver).executeScript(query);

    for(int i=0;i<searchbox.size();i++){                     

    searchbox.get(i).click();

}

EDIT:

The code was not working in firefox because the firefox browser returns a json object of the webelement.Selenium replaced its uses of org.json with gson.So it is not able to understand the response recieved

Screenshot taken from chrome

Screenshot taken from firefox

Solution

We are using Jquery get function to retrieve the DOM Elements matched by the jquery object

$('.search-bar-submit').each(function() { 
   return $(this).css('background-color') == '#fdd922';
}).get(0);

Code

    public class jquerytest
    {

        public static void main(String[] args) throws Exception {

      WebDriver driver = new FirefoxDriver();

      driver.get("https://www.flipkart.com");

      driver.findElement(By.id("fk-top-search-box")).sendKeys("iphone");

      String query ="return $('.search-bar-submit').each(function() { "
                  + "return $(this).css('background-color') == '#fdd922'; }).get(0);";


      Thread.sleep(5000);//wait till page loads replace thread.sleep by any waits

      WebElement searchbox = (WebElement) ((JavascriptExecutor)driver).executeScript(query);

      searchbox.click();


    }
}

I have tested the above code on both chrome and firefox it works perfectly

Hope this helps you.Kindly get back if you have any queries

edited Jul 29, 2015 at 20:25

answered Jul 28, 2015 at 13:12

Vicky

3,0212 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Manu Over a year ago

adding return and changing WebElement to List, new exception showed up: java.lang.ClassCastException: com.google.common.collect.Maps$TransformedEntriesMap cannot be cast to java.util.List, I can understand there are some cast issues as in answer by @Fi Horan

Vicky Over a year ago

Sorry for the late reply was travelling.I tested the above code it works perfectly.pls refer the above edit.Kindly check and get back

Manu Over a year ago

Thanks for the help. It is working with Chromedriver but for Firefoxdriver, it is showing the same cast error that i mentioned in last comment. Can you help regarding that.

Vicky Over a year ago

@Manu Yes definetly will help you...I think this issue is caused as the return of the executescript in firefox is JSONObject but selenium currently supports only com.google.gson.JsonElement.Anyways will chk and get back to you

Vicky Over a year ago

@Manu My assumptions turned out to be right.firefox returns webelement as a json object.I have added a solution.pls refer my edit.I tested this in both chrome and firefox it works fine.Kindly chk and get back

|

Fi Horan · Accepted Answer · 2015-07-28 14:30:19Z

1

I ran the following code and it all works fine. Your jquery works as well (I love the little message they print to console in the dev view hahaha).

driver.get("http://www.flipkart.com/"); 
WebElement in = driver.findElement(By.id("fk-top-search-box"));
in.sendKeys("iphone");
WebElement thing = driver.findElement(By.className("fk-font-bold"));
thing.click();

I believe there's a problem with your executeScript and it should be as follows.

System.out.println(((JavascriptExecutor)driver).executeScript(query, driver));

Normally the format for my calling javascript is as follows, this would be to remove the windowed attribute so that a hyperlink would open in the same tab:

String Href = linkObject.getAttribute("href");//located the hyperlink for the documents
Href = Href.substring(0, Href.length()-10)+")";//I remove ",'windowed'" from the link to stop it opening in a new window and having to change the scripts focus
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("return arguments[0].href = \""+Href + "\"", linkObject););

But then you're getting JSON back and WebDriver can't understand that. See the following link for more information on that. http://grokbase.com/t/gg/webdriver/12ckjcthg8/executing-javascript-that-returns-json-how-best-to-handle

Might I suggest this alternative, it gives the background-color in rgba format:

WebElement pain = driver.findElement(By.className("search-bar-submit");
pain.getCssValue("background-color");

edited Jul 28, 2015 at 14:30

answered Jul 28, 2015 at 13:18

Fi Horan

5121 gold badge4 silver badges14 bronze badges

7 Comments

Manu Over a year ago

Using your code with driver as parameter gives new exception: java.lang.IllegalArgumentException: Argument is of an illegal type: org.openqa.selenium.firefox.FirefoxDriver. Without using driver, it prints null.

Fi Horan Over a year ago

As far as I'm aware that's because it's actually getting a response from the webpage. I'll edit my answer to show how I'd normally call javascript in webdriver.

Manu Over a year ago

Question still remains, why it is throwing null?

Fi Horan Over a year ago

Because you're not getting any response so there's no object to reference.

Manu Over a year ago

Your alternative is welcomed, but that will not help me achieve what i intend to.

|

Collectives™ on Stack Overflow

How to return WebElement having particular CSS property using JavascriptExecutor?

2 Answers 2

6 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related