1.簡介
CSS定位方式和xpath定位方式基本相同，只是CSS定位表達式有其自己的格式。CSS定位方式擁有比xpath定位速度快，且比CSS穩定的特性。下面詳細介紹CSS定位方式的使用方法。xpath定位是“屠龍刀”，那CSS定位就是"倚天劍了"，相對CSS來說，具有語法簡單，定位速度快等優點。
2.CSS定位優勢
CSS定位是平常使用過程中非常重要的一種方式。它與xpath定位有諸多類似的地方，但是無論從性能還是語法上來說CSS都是比較有優勢的。
1、一般情況下定位速度要比xpath快
2、語法比xpath要簡潔
3.常用定位方法（8種）
（1）id
（2）name
（3）class name
（4）tag name
（5）link text
（6）partial link text
（7）xpath
（8）css selector（今天講解）
4.自動測試實戰
以百度首頁為例，將CSS的各種定位方法一一講解和分享一下。
4.1大致步驟
1.訪問度娘首頁。
2.通過CSS定位到元素，點擊一下。
4.2絕對路徑定位方式
顧名思義，將 CSS 表達式從 html 的最外層節點，逐層填寫，最后定位到操作元素，此方法最為簡單，具體格式為：
xxx.By.cssSelector("絕對路徑")
具體例子：
xxx.By.cssSelector("html > body > div >input[value="查詢"]")
CSS定位表達式使用絕對路徑定位屬性value的值為“查詢”的頁面元素。從CSS定位表達式可以看出，步間通過“>"分割，區別於CSS路徑中的正”/“，並且也不再使用@符號選擇屬性。
具體步驟：
在被測試百度網頁中，
（1）打開Chrome瀏覽器，輸入百度網址訪問百度首頁，F12打開開發者工具，然后Ctrl+F調出輸入框，在輸入框中輸入絕對路徑的css表達式（html>body>div>div>div>div>div>form>span>input），回車。查找輸入框並輸入“北京宏哥”，如下圖所示：
（2）按照同樣的方法，查找“百度一下”按鈕，如下圖所示：
（3）點擊“百度一下”按鈕。
CSS表達式：
①用大於號（>）
（1）html>body>div>div>div>div>div>form>span>input
（2）html>body>div>div>div>div>div>form>span>input[value='百度一下']
②用空格
（1）html body div div div div div form span input
（2）html body div div div div div form span input[value='百度一下']
java定位語句：
（1）WebElement searchBox = driver.findElement(By.cssSelector( "html>body>div>div>div>div>div>form>span>input" ));
（2）WebElement SearchButton = driver.findElement(By.cssSelector("html>body>div>div>div>div>div>form>span>input[value='百度一下']"));
4.2.1絕對路徑的缺點
此方法缺點顯而易見，當頁面元素位置發生改變時，都需要修改，因此，並不推薦使用絕對路徑的寫法。
4.2.2代碼設計
4.2.3參考代碼
package lessons; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * 《手把手教你》系列技巧篇（十七）-java+ selenium自動化測試-元素定位大法之By css上卷（詳細教程） * * 2021年8月9日 */ public class ByCss { public static void main(String [] args) throws InterruptedException { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驅動路徑 WebDriver driver = new ChromeDriver (); //最大化窗口 driver.manage().window().maximize(); driver.get("http://wwww.baidu.com"); //By css 定位 WebElement SearchBox = driver.findElement(By.cssSelector( "html>body>div>div>div>div>div>form>span>input" )); SearchBox.sendKeys("北京宏哥"); WebElement HotButton = driver.findElement(By.cssSelector("html>body>div>div>div>div>div>form>span>input[value='百度一下']")); HotButton.click(); //定位到文本，將文本高亮顯示 //創建一個JavascriptExecutor對象 JavascriptExecutor js =(JavascriptExecutor)driver; //新聞文本高亮顯示顏色 js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;"); Thread.sleep (5000); //判斷打開頁面是不是北京宏哥，這里用url作為驗證 assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982"; System.out.println("斷言通過!"); driver.quit(); } }
4.2.4運行代碼
1.運行代碼，右鍵Run AS->java Application，控制台輸出，如下圖所示：
2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：
4.3相對路徑定位方式
相對路徑，以‘標簽’開頭，具體格式為：
xxx.By.cssSelector("標簽[屬性='']")
具體例子：
xxx.By.cssSelector("input[value='查詢']")
具體步驟：
在被測試百度網頁中，按照宏哥在5.2中的方法 （1）查找輸入框並輸入“北京宏哥”，（2）查找“百度一下”按鈕，（3）點擊“百度一下”按鈕。
CSS表達式：
（1）*[id="kw"]
（2）*[id="su"]
java定位語句：
（1）WebElement SearchBox = driver.findElement(By.cssSelector( "*[id='kw']" ));
（2）WebElement SearchButton = driver.findElement(By.cssSelector("*[id='su']"));
4.3.1代碼設計
4.3.2參考代碼
package lessons; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * 《手把手教你》系列技巧篇（十七）-java+ selenium自動化測試-元素定位大法之By css上卷（詳細教程） * * 2021年8月9日 */ public class ByCss { public static void main(String [] args) throws InterruptedException { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驅動路徑 WebDriver driver = new ChromeDriver (); //最大化窗口 driver.manage().window().maximize(); driver.get("http://wwww.baidu.com"); //By css 定位 WebElement SearchBox = driver.findElement(By.cssSelector( "*[id='kw']" )); SearchBox.sendKeys("北京宏哥"); WebElement HotButton = driver.findElement(By.cssSelector("*[id='su']")); HotButton.click(); //定位到文本，將文本高亮顯示 //創建一個JavascriptExecutor對象 JavascriptExecutor js =(JavascriptExecutor)driver; //新聞文本高亮顯示顏色 js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;"); Thread.sleep (5000); //判斷打開頁面是不是北京宏哥，這里用url作為驗證 assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982"; System.out.println("斷言通過!"); driver.quit(); } }
4.3.3運行代碼
1.運行代碼，右鍵Run AS->java Application，控制台輸出，如下圖所示：
2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：
4.4使用class名稱定位元素
class名稱定為元素，以‘標簽’開頭，具體格式為：
xxx.By.cssSelector("標簽.class名稱")
具體例子：
xxx.By.cssSelector("input.sprend")
具體步驟：
在被測試百度網頁中，按照宏哥在5.2中的方法 （1）查找輸入框並輸入“北京宏哥”，（2）查找“百度一下”按鈕，（3）點擊“百度一下”按鈕。
CSS表達式：
（1）input.s_ipt
（2）input.btn
java定位語句：
（1）WebElement SearchBox = driver.findElement(By.cssSelector( "input.s_ipt" ));
（2）WebElement SearchButton = driver.findElement(By.cssSelector("input.btn"));
4.4.1代碼設計
4.4.1參考代碼
package lessons; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; /** * @author 北京-宏哥 * * 《手把手教你》系列技巧篇（十七）-java+ selenium自動化測試-元素定位大法之By css上卷（詳細教程） * * 2021年8月10日 */ public class ByCss { public static void main(String [] args) throws InterruptedException { System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驅動路徑 WebDriver driver = new ChromeDriver (); //最大化窗口 driver.manage().window().maximize(); driver.get("http://wwww.baidu.com"); //By css 定位 WebElement SearchBox = driver.findElement(By.cssSelector( "input.s_ipt" )); SearchBox.sendKeys("北京宏哥"); WebElement HotButton = driver.findElement(By.cssSelector("input.btn")); HotButton.click(); //定位到文本，將文本高亮顯示 //創建一個JavascriptExecutor對象 JavascriptExecutor js =(JavascriptExecutor)driver; //新聞文本高亮顯示顏色 js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;"); Thread.sleep (5000); //判斷打開頁面是不是北京宏哥，這里用url作為驗證 assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982"; System.out.println("斷言通過!"); driver.quit(); } }
4.4.1運行代碼
1.運行代碼，右鍵Run AS->java Application，控制台輸出，如下圖所示：
2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：
從上邊的控制台可以清楚地看到報錯了，從視頻中可以看到瀏覽器卡住不動了。
雖然選擇一個可以按宏哥說的那種方法定位到按鈕，但是在運行代碼的時候還是會報錯的。如下圖所示：
5.小結
5.1絕對路徑和相對路徑的區別
絕對路徑： 讓CSS 從文檔的根節點開始解析
相對路徑：讓CSS 從文檔的任何元素節點開始解析
細心地小伙伴或者童鞋們會發現“百度一下”按鈕的class是一串值“btn self-btn bg s_btn”，宏哥這里選擇了第一個“btn”，無論是選擇一個還是選擇一串都會報錯（Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"input.btn self-btn bg s_btn"}），以后盡量避免用這種一串的定位。如下圖所示：
6.拓展
6.1使用瀏覽器調試工具，可以直接獲取CSS語句
這個主要是針對不會或者不熟悉CSS語法的小伙伴或者童鞋們宏哥提供的一種方法，其實CSS的語法很簡單的，幾個小時就可以搞定的。
好了，今天就分享和講解到這里，下一篇和宏哥繼續看CSS的其他定位方法。