What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Question

What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Currently, I am faced with a situation in which I need to locate a WebElement based on its CSS property, specifically the background-color.

I successfully crafted the JQuery script below to pinpoint the element using the firefox console:

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

https://i.sstatic.net/BjK6i.png

Subsequently, I proceeded to develop the code to accurately identify and click on this WebElement, namely the searchbox:

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();

Upon executing the program, an error

Exception in thread "main" java.lang.NullPointerException

occurs at the line searchbox.click();

If anyone can assist me in finding the searchbox using JavascriptExecutor and then clicking on it, I would greatly appreciate it. Could there possibly be something trivial that I've overlooked?

Your help is highly valued. Thank you in advance.

java jquery css selenium-webdriver nullpointerexception

Answer 1

Answer №1

To execute a script that retrieves a WebElement using JavaScript in Selenium, you can use the following code:
WebElement searchbox = (WebElement) ((JavascriptExecutor)driver).executeScript(query);

However, it's important to note that the above code doesn't return the result of the function call back to the caller. To ensure that the webelement is returned to the Selenium script (webdriver), add a "return" statement in the script.

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

It's essential to typecast the return type as List<WebElement>. If you typecast it incorrectly, for example, as an ArrayList, it will throw a ClassCastException since an ArrayList cannot be cast to a WebElement.

Here is modified code including proper handling and retrieval of the WebElement:

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

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

Explanation of EDIT:

The code may not work in Firefox due to differences in how the browser returns a JSON object of the webelement. Selenium has replaced its usage of org.json with Gson, which might cause compatibility issues with the response received from Firefox.

Solution:

We utilize JQuery's get function to retrieve the matched DOM Elements:

$('.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();
        
        // Perform actions on the webpage
        // ...
    }
}

This tweaked code ensures correct execution on both Chrome and Firefox browsers. Feel free to ask if you need further assistance!

Answer 2

To execute a script that retrieves a WebElement using JavaScript in Selenium, you can use the following code:
WebElement searchbox = (WebElement) ((JavascriptExecutor)driver).executeScript(query);

However, it's important to note that the above code doesn't return the result of the function call back to the caller. To ensure that the webelement is returned to the Selenium script (webdriver), add a "return" statement in the script.

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

It's essential to typecast the return type as List<WebElement>. If you typecast it incorrectly, for example, as an ArrayList, it will throw a ClassCastException since an ArrayList cannot be cast to a WebElement.

Here is modified code including proper handling and retrieval of the WebElement:

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

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

Explanation of EDIT:

The code may not work in Firefox due to differences in how the browser returns a JSON object of the webelement. Selenium has replaced its usage of org.json with Gson, which might cause compatibility issues with the response received from Firefox.

Solution:

We utilize JQuery's get function to retrieve the matched DOM Elements:

$('.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();
        
        // Perform actions on the webpage
        // ...
    }
}

This tweaked code ensures correct execution on both Chrome and Firefox browsers. Feel free to ask if you need further assistance!

Answer 3

Answer №2

After running the code provided, everything seems to be working perfectly. The jquery also functions well, and I particularly enjoy the messages it prints to the console in the developer view (hahaha).

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

It appears there may be an issue with the executeScript function, which should be corrected as shown below.

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

Typically, when calling javascript, I format it like this to remove the windowed attribute so that a hyperlink opens in the same tab:

String href = linkObject.getAttribute("href");
href = href.substring(0, href.length()-10)+")";
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("return arguments[0].href = \""+href + "\"", linkObject);

However, when receiving JSON data back, WebDriver may have trouble understanding it. For more information on this issue, please refer to the following link:

As an alternative suggestion, you can use the following code to retrieve the background-color in rgba format:

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

Answer 4

After running the code provided, everything seems to be working perfectly. The jquery also functions well, and I particularly enjoy the messages it prints to the console in the developer view (hahaha).

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

It appears there may be an issue with the executeScript function, which should be corrected as shown below.

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

Typically, when calling javascript, I format it like this to remove the windowed attribute so that a hyperlink opens in the same tab:

String href = linkObject.getAttribute("href");
href = href.substring(0, href.length()-10)+")";
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("return arguments[0].href = \""+href + "\"", linkObject);

However, when receiving JSON data back, WebDriver may have trouble understanding it. For more information on this issue, please refer to the following link:

As an alternative suggestion, you can use the following code to retrieve the background-color in rgba format:

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

What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Answer №1

Answer №2

Similar questions

The default value of the input color in HTML/NextJS does not update when changed

Troublesome behavior from Bootstrap's datepicker

Is there a way to obtain the full class name if only a portion of it is known?

When dynamically loading content with ajax, dynamic content fails to function properly

Rails : CSS/JavaScript functioning perfectly on local server, facing issues on Heroku deployment

Struggling with eliminating the bottom margin on your website?

Identifying various device platforms through CSS styling

Java provides multiple constructors with a single parameter of varying data types

The HelloWorld program experiences difficulties functioning when implemented on Windows Azure

Vuetify: how to disable the color transition for v-icon

Error Occurs When Attempting to Access an Excel File in Selenium With Nullpointer Exception

Styling tip: Distance the tooltip from its parent element when scrolling through a list

Automatically reset the form after submission in CakePHP 1.3

Resizing Images Responsively Using Bootstrap

What is the best way to incorporate the .top offset into a div's height calculation?

Remove the outline on a particular input and retain only its border

Java: Display a list of connected cameras

Discovering the Week by week commencement and conclusion dates utilizing angularjs

What is the best way to interpret HTML codes using Python and Selenium?

Unexpected issues have arisen with the $.ajax function, causing it