【Selenium 3+Java自動化（6）】-CSS定位語法

一、前言

  　　本章節講解一下CSS定位。

 　　CSS定位相對於XPath定位的優點是：css定位更快，語法更簡潔。

　　這一篇css的定位方法，主要是對比上一篇的xpath來的，基本上xpath能完成的，css也可以做到。兩篇對比學習，更容易理解。

 

二、CSS：屬性定位

　　　　1、通過id屬性定位，需要加上標識符“#”，如：#kw；

        element = driver.findElement(By.cssSelector("#kw")); element.sendKeys("selenium");    

　　　　2、通過class屬性定位，需要加上標識符 “.”，如：.s_ipt；

        element = driver.findElement(By.cssSelector(".s_ipt"));
        element.sendKeys("selenium");

　　　　3、通過標簽屬性定位，不需要任何標示符，如：input；

        //這里運行會報錯，因為標簽“input”不是唯一的；這里主要是了解寫法
    element = driver.findElement(By.cssSelector("input"));
    element.sendKeys("selenium");

 

三、CSS：通過其他屬性定位

　　　　1.css除了可以通過標簽、class、id這三個常規屬性定位外，也可以通過其它屬性定位；

   　　　 2.以下是定位其它屬性的格式；

　　　　　　1）CSS通過name屬性定位元素；

        　　element = driver.findElement(By.cssSelector("#su"));
　　　　　　　element.click(); 

　　　　　　2）CSS:通過autocomplete屬性定位元素；

　　　　　　  element = driver.findElement(By.cssSelector("[autocomplete = 'off']"));
            element.sendKeys("autocomplete");

　　　　　　3）CSS通過type屬性定位元素；

　　　　　　 element = driver.findElement(By.cssSelector("[type = 'submit']"));
           element.click();

 

四、CSS：標簽

　　　1、css頁可以通過標簽與屬性的組合來定位元素；

　　　　 1）CSS通過標簽與id屬性組合定位元素；

　　　　　　element =driver.findElement(By.cssSelector("input#kw"));
          element.sendKeys("selenium");

　　　　2）CSS通過標簽與class屬性定位元素；

　　     element = driver.findElement(By.cssSelector("input.s_ipt"));
        element.sendKeys("selenium");

　　　　3）CSS通過標簽與其它屬性組合定位元素；

　　　　 element = driver.findElement(By.cssSelector("input[autocomplete = 'off']"));
        element.sendKeys("selenium");

 

五、CSS：層級關系定位

        //form的id屬性
        element = driver.findElement(By.cssSelector("form#form>span>input"));
        element.sendKeys("444");
       
        //form的class屬性 
        element = driver.findElement(By.cssSelector("form.fm>span>input"));
        element.sendKeys("444");

 

六、CSS：索引

css也可以通過索引option：nth-child(1)來定位子元素，這點與xpath寫法用很大差異；其實很好理解，直接翻譯過來就是第幾個小孩；

element = driver.findElement(By.cssSelector("select#ft>option:nth-child(1)"));
element.click();

element = driver.findElement(By.cssSelector("select#ft>option:nth-child(2)"));
element.click();

element = driver.findElement(By.cssSelector("select#ft>option:nth-child(3)"));
element.click();

 

 CSS定位遠遠不止以上幾種方法，還有更多更強大定位策略，有興趣的同學可以繼續深入研究。