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 make a div fall on hover and stay at at the bottom of the page using jquery or css?

    How to keep table headers fixed while scrolling down a table

    How to render text in .NET in the same size as browsers does given CSS for the text

    How to draw a line on the baseline of the text in HTML/SVG/CSS

    Hiding the content of a
    and showing another
    with different contents

    How to make content shareable from a static website

    How to get my “Register Now!” Link's to line up at the bottom using CSS

    How to Style Unique CSS Navigation Menu

    CSS - How to make if “Firefox, Safari, Opera and IE”?

    What is WebKit and how is it related to CSS?

    How to add scrollbar in this CSS javascript pop up window?

    How to make a blur effect over a shape in CSS?

    How to place an image and text under it, side by side using HTML and css?

    colspan doesn't accept decimal numbers. How do I specify the span?

    How to center inside divs in a 1140px fluid responsive framework?

    Attempting to show logo using 'content' from CSS

    how to set a specific css class to a widget in gtk3? (c)

    How to code a drop down menu in css?

    How to partly color the border with css [closed]

    I am not sure how to convert my webpages Table over to divs instead

    How to make a border in css that is actually on the very edges

    How to display a background image with a:hover

    How to align divs right and left while using the CSS ghost element technique for vertical centering?

    How to add composite css -webkit-mask-image?

    How do i check if a link has been visited?

    How to make dot-dash underline

    CSS How to display an image in the size of a / text line

    How to dynamically positioning html table by using css properties?

    How to recalculate css vw and vh values after resizing?

    css - How to set fixed width of div that is display:inline