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

Question

我正在开发一个场景，我需要根据CSS属性找到一个WebElement，比如background-color。

我创建了JQuery来查找下面的元素，它使用firefox控制台正确找到了webelement。

$('.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();

当我运行该程序时，它会在Exception in thread "main" java.lang.NullPointerException

行上为searchbox.click();提供

任何人都可以帮我找到使用JavascriptExecutor的搜索框，然后点击它吗？我在这里错过了一些愚蠢的东西吗？

感谢任何帮助。在此先感谢。

Answer 1

  

WebElement searchbox =（WebElement）   （（JavascriptExecutor）驱动程序）.executeScript（查询）;

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

在脚本中添加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用gson替换了它对org.json的使用。所以它无法理解收到的响应

取自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上测试了上面的代码，它运行得很好

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

Answer 2

我运行了以下代码，一切正常。你的jquery也可以运行（我喜欢他们在开发视图中打印到控制台的小消息哈哈哈）。

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

我相信你的executeScript存在问题，应该如下所示。

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

通常我的调用javascript的格式如下，这将删除窗口属性，以便在同一个标​​签页中打开超链接：

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

但是后来你得到了JSON，WebDriver无法理解。有关详细信息，请参阅以下链接。 http://grokbase.com/t/gg/webdriver/12ckjcthg8/executing-javascript-that-returns-json-how-best-to-handle

我可以建议这个替代方案，它以rgba格式提供背景色：

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