selenium--特殊元素定位

该篇博客总结特殊元素（select、radio\checkbox、时间控件、文件上传、图片验证码、模拟鼠标操作、Js 或 JQuery调用）操作。

1.select

    @Test

    public void fTest() throws InterruptedException {

        launchBrowser("http://XXX/Competition/Index", 10);

        /*我们最常见的省市区选择

         *  <select style="width: 33%" id="ProvinceCode" name="ProvinceCode" class="form-control lopicker">

         *  <option data-code="" data-text="选择省" value="">选择省</option>

         *  <option data-code="2" data-text="北京市" value="2">北京市</option>

         *  <option data-code="3" data-text="安徽省" value="3">安徽省</option>

         *  <option data-code="4" data-text="福建省" value="4">福建省</option>

         *  <option data-code="5" data-text="甘肃省" value="5">甘肃省</option>

         *  <option data-code="6" data-text="广东省" value="6">广东省</option>

         *  <option data-code="7" data-text="广西壮族自治区" value="7">广西壮族自治区</option>

         *  <option data-code="8" data-text="贵州省" value="8">贵州省</option>

         *  <option data-code="9" data-text="海南省" value="9">海南省</option>

         *  <option data-code="35" data-text="台湾省" value="35">台湾省</option></select>

         */

        WebElement element = driver.findElement(By.cssSelector("select[name=\"ProvinceCode\"]"));

        Select provinceCode = new Select(element);

        provinceCode.selectByValue("2");//按照value值来选择，value值为2的，代表的是北京市

        provinceCode.selectByIndex(2);//按照索引进行选择，索引从0开始，所以，索引为2的代表安徽省

        provinceCode.selectByVisibleText("广西壮族自治区");//按照可见文本来选择

        Thread.sleep(3000);

    }

2.radio\checkbox

    @Test

    public void fTest() throws InterruptedException {

        launchBrowser("http://news.baidu.com/", 10);

        /*

         *  <p class="search-radios">

            <input type="radio" name="tn" value="news" checked="checked" id="news">

            <label for="news" class="checked">新闻全文</label>

            <input type="radio" name="tn" value="newstitle" id="newstitle">

            <label for="newstitle" class="not-checked">新闻标题</label>

            </p>

         */

        //radio 是以name来进行分组的

        List<WebElement> elements = driver.findElements(By.cssSelector("input[name=\"tn\"]"));

        elements.get(1).click();

        Thread.sleep(3000);

    }

checkBox 的处理方式与radio相同，不再赘述。

3.时间控件：

第一种情况：时间输入框是可以直接输入的

<input id="row_birthday" type="text" class="form-control" placeholder="生日" lay-key="1">

这种操作起来非常简单，直接定位到输入框，然后sendKeys即可：

    @Test

    public void fTest() throws InterruptedException {

        launchBrowser("http://XXX/Project/Index/999d52f4-2631-4a2c-9276-526ec25c8f4a", 10);

        driver.manage().addCookie(new Cookie(".AspNetCore.Antiforgery.Qk_ixENuZts", "CfDJ8KXHnbCSbnFMthqumKHsKNr7hojpRyiHMrXKW11rLiaGuJQl9jGEuk4M6L5WZWpuIVe9RDvZPknq03wji9ecdZIKWgqYqKOLDWC74VpUYP9_RB6r1KhO2tpvVksMkOiygmBsrBK4SmaSf2RFLn33enQ"));

        driver.manage().addCookie(new Cookie("CompetitionSid", "01%2FMgeBnDeLwpmwG91%2B3uMkrosXEgZ5qniLC1eOA0uVxO8t8bMTRoZQJcGomNBNK"));        

        driver.get("http://XXX/Project/Index/999d52f4-2631-4a2c-9276-526ec25c8f4a");

        /*时间选择源码

         *  <input id="row_birthday" type="text" class="form-control" placeholder="生日" lay-key="1">

         */

        WebElement element = driver.findElement(By.id("row_birthday"));

        //按照控件的指定格式输入即可

        element.sendKeys("2018-08-16");

        Thread.sleep(3000);

    }

第二种情况，时间输入框是不允许输入的.如12306官网的购票页面，时间选择输入框带有属性readOnly，不能直接sendKeys：

    @Test

    public void fTest() throws InterruptedException {

        WebDriver driver = GetDriverUtil.getDriver();

        driver.get("https://kyfw.12306.cn/otn/index/init");

        /*12306购票页面的日期输入框，带有readonly属性，不允许直接对输入框进行修改

         *  <input readonly="readonly" maxlength="10" autocomplete="off" type="text" class="inp-txt" name="leftTicketDTO.train_date" id="train_date" value="">

         */

        //使用js或者jQuery来直接定位元素，并将元素的readOnly移除

        String js = "var a = document.getElementById(\"train_date\");"

                + "a.removeAttribute(\"readonly\");";

　　　　　　//也可以使用JQuery来移除属性

　　　　　　//String jQuery = "var a = $(\"#train_date\");"

　　　　　　　//　　　+ "a.removeAttr(\"readonly\");";

        ((JavascriptExecutor)driver).executeScript(js);

        WebElement element = driver.findElement(By.id("train_date"));

        element.clear();

        element.sendKeys("2018-08-22");

        Thread.sleep(3000);

    }

第二种情况下，还有一种处理方式：直接给元素的value赋值：

    /**

     * 12306购票页面，输入出发地、目的地和日期，点击查询按钮

     * @throws InterruptedException

     */

    @Test

    public void fTest() throws InterruptedException {

        WebDriver driver = GetDriverUtil.getDriver();

        driver.manage().timeouts().implicitlyWait(4, TimeUnit.SECONDS);

        driver.get("https://kyfw.12306.cn/otn/index/init");

        //选择出发地点。输入地点之后，12306会有个智能匹配的下拉框。

        /*

         * <div class="cityline" id="citem_0" cturn="43" style="background-color: white;">

         * <span class="ralign">杭州东</span><span style="float:right;" class="ralign">hangzhoudong</span>

         * </div>

         */

        driver.findElement(By.id("fromStationText")).clear();

        driver.findElement(By.id("fromStationText")).sendKeys("杭州");

        List<WebElement> fromCitys = driver.findElements(By.xpath("//div[starts-with(@id,'citem_')]"));

        fromCitys.get(0).click();

        //选择目的地点

        driver.findElement(By.id("toStationText")).clear();

        driver.findElement(By.id("toStationText")).sendKeys("曲阜");

        List<WebElement> toCitys = driver.findElements(By.xpath("//div[starts-with(@id,'citem_')]"));

        toCitys.get(0).click();

        /*12306购票页面的日期输入框，带有readonly属性，不允许直接对输入框进行修改

         *  <input readonly="readonly" maxlength="10" autocomplete="off" type="text" class="inp-txt" name="leftTicketDTO.train_date" id="train_date" value="">

         */

        //使用js或JQuery来设置该属性的value值为相应日期----这种方式是最简单的，推荐使用----重点！

        String js ="var a = document.getElementById(\"train_date\");"

                + "a.value=\"2018-09-01\"";        

        ((JavascriptExecutor)driver).executeScript(js);

        //定位并点击查询按钮

        driver.findElement(By.id("a_search_ticket")).click();

        Thread.sleep(3000);

    }

4.文件上传

/**

     * 文件上传

     * @throws InterruptedException

     */

    @Test

    public void fTest() throws InterruptedException {

        WebDriver driver = GetDriverUtil.getDriver();

        driver.manage().timeouts().implicitlyWait(4, TimeUnit.SECONDS);

        driver.get("http://XXX/index.html");

        try {
//这里可以设置cookie的有效期

            driver.manage().addCookie(new Cookie("JSESSIONID","879DC00566E400AD02C3BE4E8667B0AA","39.108.136.60","/lmcanon_web_auto",(new SimpleDateFormat("yyyy-MM-dd")).parse("2018-09-02")));

        } catch (ParseException e) {

            System.out.println("日期转换失败");

            e.printStackTrace();

        }

        driver.get("http://XXXX/mng/index.html");

        //点击会员管理

        WebDriverWait wait = new WebDriverWait(driver, 4);

        wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("dl[id=\"menu-member\"]"))).click();

        //点击学员信息

        wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("a[data-href=\"student-list.html\"][data-title=\"学员列表\"]"))).click();

        //先进入iframe

        WebElement iframe = driver.findElement(By.cssSelector("iframe[src=\"student-list.html\"]"));

        driver.switchTo().frame(iframe);

        //定位导入按钮并点击

        driver.findElement(By.cssSelector("a[onclick=\"excel_import('导入excel','./excel-import.html','','410')\"]")).click();

        //进入第二层iframe

        WebElement frame = driver.findElement(By.id("layui-layer-iframe2"));

        driver.switchTo().frame(frame);

        //上传文件：-----------重点

        /*

         * <input type="file" name="file" class="webuploader-element-invisible" multiple="multiple">

         */

        WebElement inputFile = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("input[name=\"file\"][type=\"file\"][class=\"webuploader-element-invisible\"][multiple=\"multiple\"]")));

        inputFile.sendKeys("C:\\Users\\XX\\Desktop\\博客图\\1.png");

        Thread.sleep(3000);

    }

5.图片验证码：

图片验证码没有必要自己去识别，当自动化测试过程中遇到验证时：

可以使用cookie来跳过验证码

可以找开发开个后面，专门为测试开一个万能验证码。比如创建一个随机字符串，将该字符串作为后门，只要输入该字符串，后台逻辑就将验证码判断为输入正确。

6.模拟鼠标操作

    /**

     * 模拟鼠标操作

     *

     * @throws InterruptedException

     */

    @Test

    public void fTest() throws InterruptedException {

        WebDriver driver = GetDriverUtil.getDriver();

        driver.get("http://XXX.html");

        Actions actions =new Actions(driver);

        /*

         * 将元素1-1按住并保持---移动到元素1-2上-------松开鼠标---执行动作

         */

        actions.clickAndHold(driver.findElement(By.id("treeDemo_2_span"))).moveToElement(driver.findElement(By.id("treeDemo_3_span"))).release().perform();

    }

7.Js 或 JQuery调用

有些操作，直接依靠selenium是无法完成的。经常需要js或者jquery来执行。

js查找元素（想要确定是否找到了元素，可以看一下cityCode.length;

1.通过id

        /*

         * <select style="width: 33%" id="CityCode" name="CityCode" class="form-control lopicker">

         * <option data-code="" data-text="选择市" value="">选择市</option>

         * <option data-code="52" data-text="北京" value="52">北京</option>

         * </select>

         */

        String js1="var cityCode = document.getElementById('CityCode');";

2.通过name

        /*

         * <select style="width: 33%" id="CityCode" name="CityCode" class="form-control lopicker">

         * <option data-code="" data-text="选择市" value="">选择市</option>

         * <option data-code="52" data-text="北京" value="52">北京</option>

         * </select>

         */

        String js1="var a = document.getElementsByName(\"CityCode\");";

3.通过className

document.getElementsByClassName("yourClassname")

4.通过tagName

document.getElementsByTagName("yourTagname")

5.原生选择器：通过querySelector：选择出document中第一个符合条件的元素（注意：通过修改了元素的value值来进行的操作，是无法触发三级联动的。比如例子中是选择省市区，当给value赋值（d.value=52;），无法触发三级联动，比如你52代表了北京市，选择区时，是没有options的.

document.querySelector("select[id=CityCode]");

6.通过querySelectorAll：选择出document中所有符合条件的元素

document.querySelectorAll("select[id=CityCode]");

通过JQuery来查找元素,下面介绍非常好用的几种方式：

1.通过id

var a = $("#CityCode")#搜索到id =CityCode的元素

2.通过className

var b = $(".form-control")#搜索到class=form-control的元素（有可能还有其他class）

3.根据属性获取元素-

，匹配给定的属性是以某些值结尾的元素

var a = $("select[name$='Code']");#格式为：attribute$=value]

2. [attribute^=value]，匹配给定的属性是以某些值开始的元素，

var a = $("select[name^='City']");

3.[attribute!=value]，匹配所有不含有指定的属性，或者属性不等于特定值的元素，此选择器等价于:not([attr=value])

还可以组合使用哦：

var a = $("select[name$='Code'][name!='CityCode']");

4.[attribute*=value]，匹配给定的属性是以包含某些值的元素

var a = $("select[name*='Code']");#name属性包含Code的元素

定位到元素之后，还要对元素进行操作。自动化测试中，用的比较频繁的，就是改变某个属性的值或者移除某个属性。

使用js 移除属性

var a = document.getElementsByClassName('form-control lopicker')

a[0].removeAttribute("style");

使用js修改属性：

a[0].setAttribute("data-text" ,"lalla");

使用js获取属性值：

a[0].getAttribute("data-text")

使用js创建元素并追加到指定父元素上：

var a = $("body")#找到body节点，作为父节点

var b = document.createElement('script') #创建script标签

b.setAttribute("type","text/javascript"); #添加属性

b.setAttribute("id","leafly"); #添加属性

a[0].insertBefore(b,a[0].childNodes[0]) #作为父节点的第一个孩子节点

a[0].appendChild(b) #作为父节点的最后一个孩子节点

使用JQuery移除属性

var a = $(".form-control") #获取到的是JQuery Collection----------该方法只能输入一个class的值，如含有2个class的，只能选择一个。class="form-control lopicker"

var b = $(".form-control.lopicker").length #元素含有属性 class="form-control lopicker"，是一个元素同事包含2个class的话，中间不能有空格

var c = $(".form-control .lopicker").length #父元素有属性class="form-control" 其子元素有属性class="lopicker",此时中间要有空格



$(a[0]).removeAttr("id") #移除id属性。返回的JQueryCollection中的每一个元素，如a[0]都是一个dom对象，只能使用removeAttribute(),想用jquery方式，就必须再将a[0]包装成JQuery

使用jquery修改属性

$(a[0]).attr("data-text","bbbb")

使用Jquery获取属性值：

$(a[0]).attr("name")

更多的jquery可以直接看Jquery的API：

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

巴特西

selenium--特殊元素定位

最新文章

热门文章