java - 如何使用 JavascriptExecutor 返回具有特定 CSS 属性的 WebElement？

Question

我正在处理一个场景，我需要根据它的 CSS 属性(如背景颜色)找到一个 WebElement。

我创建了 JQuery 来查找元素，如下所示，它使用 firefox 控制台正确地找到了 web 元素。

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

因此，我编写了代码来找到这个 WebElement，即搜索框，然后尝试单击它。

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

当我运行该程序时，它在 searchbox.click(); 行上给我 Exception in thread "main"java.lang.NullPointerException

谁能帮我找到使用 JavascriptExecutor 的搜索框，然后点击它？我在这里错过了什么愚蠢的东西吗？

感谢任何帮助。提前致谢。

Answer 1

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

上面的代码调用了函数，但没有对结果做任何事情，即。它不会将其返回给调用者。

在脚本中添加return，将webelement返回给selenium脚本(webdriver)

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

返回类型是List<WebElement>因此，如果将其类型转换为 List，则将其类型转换为 List 将抛出 ClassCastException，因为 arraylist 无法转换为 webelement

代码:

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

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

    searchbox.get(i).click();

}

编辑:

代码在 firefox 中不起作用，因为 firefox 浏览器返回 webelement 的 json 对象。Selenium 将其对 org.json 的使用替换为 gson。因此它无法理解收到的响应

从 chrome 截取的屏幕截图

从 firefox 截取的屏幕截图

解决方案

我们正在使用 Jquery get检索与 jquery 对象匹配的 DOM 元素的函数

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

代码

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


    }
}

我已经在 chrome 和 firefox 上测试了上面的代码，它工作得很好

希望这对你有帮助。如果你有任何疑问，请回来