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