首页 > Web开发 > 详细

selenium用jquery改变元素属性

时间:2020-12-01 09:04:24      阅读:41      评论:0      收藏:0      [点我收藏+]
selenium用jquery改变元素属性

一、jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

1、基础语法:

$(selector).action()

  • 选择符(selector)即,"查询"和"查找" HTML 元素

  • jQuery 的 action() 执行对元素的操作

简单理解:就是选择器来操作

2、实例:

  • $(this).hide() - 隐藏当前元素

  • $("p").hide() - 隐藏所有 <p> 元素

  • $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

  • $("#test").hide() - 隐藏所有 id="test" 的元素

特点:语法简单,好操作

二、用jquery实现思路
1、实际模拟场景:
以我们最熟悉的百度为例吧,删除百度页面的id属性,并将百度输入框及按钮都改为红色

2、引用jQuery类库
技术分享图片
3、用jQuery代码改变元素属性
技术分享图片

4、完整代码

import org.apache.commons.lang3.StringUtils;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

/**
 * selenium 引用jQuery改变页面元素属性
 *
 * @author longrong.lang
 */
public class LoadJQuery {

    private static WebDriver driver;

    /**
     * 向当前页面注入JQuery,并返回加载是否成功
     *
     * @return
     */
    public boolean injectjQuery() {
        try {
            String injectJQuery = "var script = document.createElement(‘script‘);"
                    + "var filename = \"http://code.jquery.com/jquery-1.10.1.min.js\";"
                    + "script.setAttribute(\"type\",\"text/javascript\");"
                    + "script.setAttribute(\"src\", filename);"
                    + "if (typeof script!=‘undefined‘){"
                    + "document.getElementsByTagName(\"head\")[0].appendChild(script);"
                    + "}";
            ((JavascriptExecutor) driver).executeScript(injectJQuery);
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // 判断JQuery是否加载成功
        Boolean loaded = true;
        String s = (String) (((JavascriptExecutor) driver)
                .executeScript("return typeof jQuery"));
        if (!StringUtils.trimToEmpty(s).equals("function"))
            loaded = false;
        return loaded;
    }

    @Test
    public void testJQuery() {
        driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://www.baidu.com/");
        JavascriptExecutor js = (JavascriptExecutor) driver;
        String changeDisplay = " $(‘input‘).removeAttr(‘id‘);";
        // 删除input标签下的id属性操作
        js.executeScript(changeDisplay);
        js = (JavascriptExecutor) driver;
        // 将百度按钮及输入框改成红色
        String changeinput = "$(\"input\").attr(\"style\",\"background:red\");";
        js.executeScript(changeinput);
    }
}

运行结果如下:
技术分享图片

EOF

本文作者:久曲建的测试窝
本文链接:https://www.cnblogs.com/longronglang/p/7617933.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
优秀不够,你是否无可替代

软件测试交流QQ群:721256703,期待你的加入!!

欢迎关注我的微信公众号:软件测试君
技术分享图片

selenium用jquery改变元素属性

原文:https://blog.51cto.com/15009374/2557416

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!