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

发布时间:2020-09-15 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了如何使用JavascriptExecutor返回具有特定CSS属性的WebElement?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个场景,我需要根据CSS属性找到一个WebElement,比如background-color.

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

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

screenshot of firefox console searching for webElement

因此,我编写代码来查找此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()上的线程“main”java.lang.NullPointerException中给出了Exception.

任何人都可以帮我找到使用JavascriptExecutor的搜索框,然后点击它?我在这里想念傻事吗?

任何帮助表示赞赏.提前致谢.

解决方法

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

从chrome获取的截图

Chrome

从Firefox获取的截图

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

希望这会对你有所帮助.如果您有任何疑问,请回复

总结

以上是编程之家为你收集整理的如何使用JavascriptExecutor返回具有特定CSS属性的WebElement?全部内容,希望文章能够帮你解决如何使用JavascriptExecutor返回具有特定CSS属性的WebElement?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478