How to return WebElement having particular CSS property using JavascriptExecutor?


Tags: java,jquery,css,selenium-webdriver,nullpointerexception

Problem :

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'; 
});

screenshot of firefox console searching for webElement

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.



Solution :

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

Chrome

Screenshot taken from firefox

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


    CSS Howto..

    How to Get Element From Path Not Class or Id

    How to pass fontAwesome icon to CSS content via data attribute

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

    How to test for css properties like modernizr.js

    how to zoom in an image and center it

    How to scroll horizontally when there are many columns (or a very long row)?

    CSS: How to change the color of the bottom right square of the scrollbar in webkit?

    How can I center two images side-by-side with Bootstrap 3?

    How to set up navigation with fading (sprite) background image

    How can I retrieve infos from PHP DOMElement?

    how to i convert this asp.net list to html list?

    how to change css content attribute of a list item

    How to enable CSS editing in Intellij

    asp .net: how to change css on span tag in c#

    how to load css for a div?

    How to make a div and its children to ignore its parent styles?

    How to solve divs overlapping issue and maintain css fluid layout?

    CSS: How can I right-justify text against centered text?

    How to keep border inside to take ribbon over to div?

    How to use Border Radius CSS on Internet Explorer

    How to make my css webkit animation stop changing

    How is a CSS “display: table-column” supposed to work?

    How to use a hover css pseudo to apply only to the top level element?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to create a vertical carousel using plain JavaScript and CSS

    css div and span display differently in browsers. How to unify?

    How can I achieve this transparency effect using css?

    How to get minimal jQuery slideshow to slide properly?

    How to make colspan work without affecting width of the other rows

    Using Bootstrap, how can I put divs in different rows depending on the breakpoint?