Clever Geek Handbook

How to return WebElement with specific CSS property using JavascriptExecutor?

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

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

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

screenshot of firefox console for searching webElement

Hence, I wrote some code to find this WebElement i.e. search term 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

in the linesearchbox.click();

Can anyone help me find a search engine using JavascriptExecutor and then click on it? Am I missing something here?

Any help is appreciated. Thanks in Advance.

+3


source to share


2 answers


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

The above code calls the function, but does nothing with the result, i.e. it doesn't return it to the caller.

Add return to script to return web element in selenium script (webdriver)

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

The return type List<WebElement>

, so cast it to a list, if you cast it, will throw a ClassCastException, since the arrayist cannot be wrapped into a web element

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 didn't work in firefox because the Firefox browser is returning a json object webelement.Selenium replaced its use of org.json with gson.So it cannot understand the response received

Screenshot from chrome



Chrome

Screenshot from firefox

Firefox

Decision

We are using jQuery get function to retrieve DOM elements corresponding to 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 tested the above code on chrome and firefox, it works fine

Hope this helps you. Go back if you have any questions.

+1


source


I ran the following code and everything works fine. Your jquery also works (I like the little message they print to the console in the dev hahaha view).

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 the problem with your executeScript should be as follows.

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

Usually the format for javascript for my call is as follows, this will remove the windowed attribute so that the hyperlink opens 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 return JSON and WebDriver can't figure it out. See the following link for more information. http://grokbase.com/t/gg/webdriver/12ckjcthg8/executing-javascript-that-returns-json-how-best-to-handle

Perhaps 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");
+1


source






More articles:


All Articles