UI自動化測試（二）瀏覽器操作及對元素的定位方法（xpath定位和css定位詳解）
Selenium下的Webdriver工具支持FireFox(geckodriver)、 IE(InternetExplorerDriver)、Chrome(ChromeDriver)、 Opera(OperaDriver)， 它還支持AndriodDriver和Iphone(IphoneDriver)的移動應用測試。
而做測試的主流三款瀏覽器：Chrome、Firefox和IE，今天就介紹下，Selenium下配置這三款瀏覽器驅動的方法與用法。
Selenium安裝瀏覽器驅動
1. FireFox
Selenium在3.0以前中的火狐Webdriver， 是火狐瀏覽器自帶的功能，但是3.0以後是實現geckodriver，要使用FireFox瀏覽器需要自己下載geckodriver.exe，這個程序是由FireFox團隊提供的，可以看做它是鏈接WebDriver和FireFox瀏覽器的橋梁。
優點：geckodriver對頁面的自動化測試支持得比較好，很直觀地模擬頁面的操作，對JavaScript的支持也非常完善，基本上頁面上做的所有操作geckodriver都可以模擬。
缺點：啟動很慢，運行也比較慢，不過，啟動之後Webdriver的操作速度雖然不快但還是可以接受的，建議不要頻繁啟動停止geckodriver。
兩種實現方式
geckodriver.exe下載地址：https://github.com/mozilla/geckodriver/releases/
①.把geckodriver放入java安裝的bin目錄下，使用如下代碼實現：
WebDriver driver = new FirefoxDriver();
②.把geckodriver放入火狐的根目錄，寫如下代碼：
System.setProperty("webdriver.gecko.driver","C:\\Program Files(x86)\\Mozilla Firefox\\geckodriver.exe");
WebDriver driver = new FirefoxDriver();
2.chrome
webdriver沒有實現chromedriver， 要使用chrome瀏覽器需要自己下載chromedriver.exe， 這個程序是由Chrome團隊提供的， 可以看做它是鏈接WebDriver和Chrome瀏覽器的橋梁。
chromedriver下載地址：http://chromedriver.storage.googleapis.com/index.html，chromedriver與chrome的對應關系表如下所示：
| chromedriver版本 | 支持的Chrome版本 |
| v2.32 | v59-61 |
| v2.31 | v58-60 |
| v2.30 | v58-60 |
| v2.29 | v56-58 |
| v2.28 | v55-57 |
| v2.27 | v54-56 |
| v2.26 | v53-55 |
| v2.25 | v53-55 |
| v2.24 | v52-54 |
| v2.23 | v51-53 |
| v2.22 | v49-52 |
| v2.21 | v46-50 |
| v2.20 | v43-48 |
| v2.19 | v43-47 |
| v2.18 | v43-46 |
| v2.17 | v42-43 |
| v2.13 | v42-45 |
| v2.15 | v40-43 |
| v2.14 | v39-42 |
| v2.13 | v38-41 |
| v2.12 | v36-40 |
| v2.11 | v36-40 |
| v2.10 | v33-36 |
| v2.9 | v31-34 |
| v2.8 | v30-33 |
| v2.7 | v30-33 |
| v2.6 | v29-32 |
| v2.5 | v29-32 |
| v2.4 | v29-32 |
根據自己安裝的chrome瀏覽器版本再去下載相對應的驅動，不然會出現版本不兼容的情況，而導致配置失敗。
使用方法
①.把chromedriver.exe放入java安裝的bin目錄下，使用如下代碼實現：
WebDriver driver = new ChromeDriver();
②.把chromedriver放入瀏覽器的根目錄，寫如下代碼：
System.setProperty("webdriver.chrome.driver","C:\\Program Files(x86)\\Google\\Chrome\\Application\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
3. IE
webdriver要使用IE瀏覽器需要下載InternetExplorerDriver.exe，根據瀏覽器的版本下載32位或者64位的driver。
IEdriver下載地址：http://selenium-release.storage.googleapis.com/index.html，X86為32位
在使用IE瀏覽器的時候，需要註意的是，將IE瀏覽器各個區域的保護模式設置的一樣，要麽全設置為高級，要麽全設置為低級，工具--Internet選項--安全，還需要將頁面的縮放比例設置為100%。操作如下圖所示：
使用方法
①.把IEDriverServer.exe放入java安裝的bin目錄下，使用如下代碼實現：
WebDriver driver = new InternetExplorerDriver();
②. 把IEDriverServer.exe放置在IE的安裝路徑下，使用代碼如下：
System.setProperty("webdriver.ie.driver","C:\\Program Files\\InternetExplorer\\IEDriverServer.exe");
WebDriver driver = new InternetExplorerDriver();
優點：直觀地模擬用戶的實際操作，對JavaScript提供完善的支持。
缺點： 是所有瀏覽器中運行速度最慢的， 並且只能在Windows下運行， 對css以及xpath的支持也不夠好。
備註：如果自動啟動瀏覽器報錯，請仔細檢查是否如下地方
1.selenium版本和瀏覽器版本不兼容
2.driver版本與瀏覽器版本不兼容
3.瀏覽器沒有安裝在默認路徑
瀏覽器基本API
通過鼠標在瀏覽器中做的操作，基本都可以使用代碼來實現，首先來看如下十個基本的用法：
1.瀏覽器中加載URL： get() --首先要啟動瀏覽器
實例：driver.get("https://www.baidu.com");
2.瀏覽器最大化： window().maximize()
實例：driver.manage().window().maximize();
3.刷新：refresh()
實例：driver.navigate().refresh();
4.返回上一頁：back()
實例：driver.navigate().back();
5.向前進一頁：forward()
實例：driver.navigate().back();
6.截圖：getScreenshotAs()
File screenfile=((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(screenfile,new File("D:/12306.png"));
7.獲取當前頁的URL：getCurrentUrl()
String url = driver.getCurrentUrl();
System.out.println(url);
8.關閉當前tab頁面：close()
實例：driver.close();
9.退出當前driver：quit()
10.獲取當前頁的title：getTitle()
String title = driver.getTitle();
System.out.println(title);
整體代碼實現如下：
1 package com.ui.day1; 2 3 import org.apache.commons.io.*; 4 import java.io.File; 5 import java.io.IOException; 6 7 import org.openqa.selenium.By; 8 import org.openqa.selenium.OutputType; 9 import org.openqa.selenium.TakesScreenshot; 10 import org.openqa.selenium.WebDriver; 11 import org.openqa.selenium.WebElement; 12 import org.openqa.selenium.chrome.ChromeDriver; 13 14 public class yihuqingjiu_test_demo1 { 15 16 public static void main(String[] args) throws IOException { 17 System.setProperty("webdriver.chrome.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe"); 18 WebDriver driver=new ChromeDriver(); 19 //瀏覽器要加載的url 20 driver.get("https://www.baidu.com"); 21 //窗口最大化 22 driver.manage().window().maximize(); 23 //kw是輸入框的id，12306是在輸入框中藥輸入的內容 24 driver.findElement(By.id("kw")).sendKeys("12306"); 25 //su是搜索按鈕的id 26 WebElement btn=driver.findElement(By.id("su")); 27 //點擊事件 28 btn.click(); 29 //刷新 30 driver.navigate().refresh(); 31 //後退一頁 32 driver.navigate().back(); 33 //前進一頁 34 driver.navigate().forward(); 35 //截圖 36 File screenfile=((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); 37 FileUtils.copyFile(screenfile,new File("D:/12306.png")); 38 //獲取url 39 String url = driver.getCurrentUrl(); 40 System.out.println(url); 41 //獲取標題 42 String title = driver.getTitle(); 43 System.out.println(title); 44 //關閉當前頁 45 driver.close(); 46 } 47 48 }
Selenium元素對象定位API
我們要明白，對象的定位和操作是自動化測試的核心部分，其中操作又是建立在定位的基礎上的，比如說：一個對象就是一個人，我們可以通過身份證號、姓名或者他的住址找到這個人。那麽一個web對象也是一樣的，我們可以通過唯一區別於其它對象的屬性來定位這個元素。
首先來了解在元素定位中要使用到的工具：
Firebug
Firebug是網頁瀏覽器 Mozilla Firefox下的一款開發類插件，它集HTML查看和編輯、 Javascript控制臺、網絡狀況監視器於一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。
安裝Firebug：
方法①Mozilla Firefox菜單--附加組件--插件--搜索Firebug--安裝--重啟瀏覽器
方法②可以把插件下載好後，下載地址為：https://getfirebug.com/，在附件中，導入即可，需要重啟瀏覽器
firepath安裝方法與firebug方法一樣，需要註意的是，Firefox版本不能太高，不然插件是安裝不成功的，我用的是42.0版本
Firepath
FirePath是Firebug的擴展插件，添加了開發工具，可以編輯，監測和生成XPath 1.0表達式、 CSS 3選擇符和JQuery的選擇符。可以快速度的幫助我們通過xPATH和css定義頁面上的元素。
這兩款工具都是Firefox的插件，在火狐瀏覽器中添加或直接下載即可，安裝好了在瀏覽器右上角會有一只蟲子一樣的圖標，如下界面：
chrome和IE的開發者工具
chrome 瀏覽器自帶開發者工具，瀏覽器右上的小扳手，在下拉菜單中選擇“工具”--“開發者工具” 即可打開，也可以使用快捷鍵Ctrl+Shift+I或者F12直接打開
一般是使用谷歌瀏覽器運行自動化代碼，火狐做元素定位，IE用的較少
定位元素的方法
有如下七種，分別是：
1.通過id定位元素：findElement(By.id("id_vaule"))
2.通過name定位元素：findElement(By.name("name_vaule"))
3.通過class_name定位元素：findElement(By.className("class_name"))
4.通過tag_name定位元素：findElement(By.tagName("tag_name"))
5.通過link定位：findElement(By.linkText("text_vaule"))或： findElement(By.partialLinkText("text_vaule"))，前者是精確link中的文字，後者是在當前頁面只有唯一link文字情況下，可只寫一半或一個漢字
6.通過css定位元素：findElement(By.cssSelector())
7.通過xpath定位元素：findElement(By.xpath())
前五種方法實現代碼如下：
1 package com.ui.day1; 2 3 import java.io.IOException; 4 5 import org.openqa.selenium.By; 6 import org.openqa.selenium.WebDriver; 7 import org.openqa.selenium.chrome.ChromeDriver; 8 9 public class yihuqingjiu_test_demo1 { 10 11 public static void main(String[] args) throws IOException { 12 System.setProperty("webdriver.chrome.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe"); 13 WebDriver driver=new ChromeDriver(); 14 //瀏覽器要加載的url 15 driver.get("https://www.baidu.com"); 16 //窗口最大化 17 driver.manage().window().maximize(); 18 //1.通過id定位 19 // driver.findElement(By.id("kw")).sendKeys("12306"); 20 //2.通過name定位 21 // driver.findElement(By.name("wd")).sendKeys("12306"); 22 //3.通過classname定位 23 // driver.findElement(By.className("s_ipt")).sendKeys("12306"); 24 //4.通過tagname定位 tagname:不能識別去操作，因為有很多重復標簽 ，所以定位不到 25 // driver.findElement(By.tagName("input")).sendKeys("12306"); 26 //5.通過link定位 27 // driver.findElement(By.linkText("新聞")).click(); 28 //通過部分link文本定位 29 driver.findElement(By.partialLinkText("新")).click(); 30 //關閉當前頁 31 driver.close(); 32 } 33 34 }
xpath元素定位方法詳解
xpath是一種在XML文檔中定位元素的語言。因為HTML可以看作是XML的一種形式，selenium可使用這種強大語言在web應用中定位元素。
xpath有6種定位元素的方式，分別是：
1.通過絕對路徑做定位
xpath的開頭是一個斜線（/）代表這是絕對路徑。使用firebug等方式可以獲取絕對路徑。
實例：driver.findElement(By.xpath("/html/body/div[2]/div[1]/div/div[3]/a[1]")).click();//絕對路徑定位百度中的新聞
使用firebug等方式可以獲取絕對路徑：firebug找到元素，右擊“復制xpath”，如下圖所示：
2．通過相對路徑做定位
如果開頭是兩個斜線（//）表示文件中所有符合模式的元素都會被選出來，即使是處於樹中不同的層級也會被選出來。
實例：driver.findElement(By.xpath("//div[2]/div[1]/div/div[3]/a[1]")).click();
3. 通過元素索引定位 ， 索引的初始值為1
實例：driver.findElement(By.xpath("//div[3]/a[1]")).click();//定位文件中第1個對象
4. 使用屬性定位
//屬性定位
driver.findElement(By.xpath("//input[@id=‘kw‘]")).sendKeys("12306"); //雙屬性定位一個元素 driver.findElement(By.xpath("//a[@class=‘mnav‘ and @name=‘tj_trnews‘]")).click(); //多屬性定位一個元素 driver.findElement(By.xpath("//input[@id=‘kw‘ or class=‘s_ipt‘]")).sendKeys("12306");
5. 使用部分屬性值匹配
//使用部分屬性值定位,以某字符串開頭 driver.findElement(By.xpath("//a[starts-with(@name,‘tj_trh‘)]")).click(); //使用部分屬性值定位,以某字符串結尾 //driver.findElement(By.xpath("//a[ends-with(@name,‘hao123‘)]")).click();//該方法只在selenium1.0中實現 //字符串截取name=tj_trhao123 driver.findElement(By.xpath("//a[substring(@name,string-length(@name)-5)=‘hao123‘]")).click(); //包含 driver.findElement(By.xpath("//a[contains(@name,‘123‘)]")).click();
6. 使用任意屬性值匹配元素
實例：driver.findElement(By.xpath("//input[@*=‘kw‘]")).sendKeys("12306");
7. 使用xpath的text函數
實例： //兩種方式 driver.findElement(By.xpath("//a[text()=‘新聞‘]")).click(); driver.findElement(By.xpath("//a[contains(text(),‘新‘)]")).click();
代碼如下：
1 package com.ui.day1; 2 3 import org.openqa.selenium.By; 4 import org.openqa.selenium.WebDriver; 5 import org.openqa.selenium.chrome.ChromeDriver; 6 7 public class yihuqingjiu_test_demo_xpath { 8 9 public static void main(String[] args) { 10 System.setProperty("webdriver.chrome.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe"); 11 WebDriver driver=new ChromeDriver(); 12 //瀏覽器要加載的url 13 driver.get("https://www.baidu.com"); 14 //窗口最大化 15 driver.manage().window().maximize(); 16 //絕對路徑定位百度中的新聞 17 //driver.findElement(By.xpath("/html/body/div[2]/div[1]/div/div[3]/a[1]")).click(); 18 //相對路徑定位百度中的新聞 19 //driver.findElement(By.xpath("//div[2]/div[1]/div/div[3]/a[1]")).click(); 20 //通過元素索引定位 21 //driver.findElement(By.xpath("//div[3]/a[1]")).click(); 22 //屬性定位 23 //driver.findElement(By.xpath("//input[@id=‘kw‘]")).sendKeys("12306"); 24 //driver.findElement(By.xpath("//input[@*=‘kw‘]")).sendKeys("12306"); 25 //雙屬性定位一個元素 26 //driver.findElement(By.xpath("//a[@class=‘mnav‘ and @name=‘tj_trnews‘]")).click(); 27 //多屬性定位一個元素 28 //driver.findElement(By.xpath("//input[@id=‘kw‘ or class=‘s_ipt‘]")).sendKeys("12306"); 29 //使用部分屬性值定位,以某字符串開頭 30 //driver.findElement(By.xpath("//a[starts-with(@name,‘tj_trh‘)]")).click(); 31 //使用部分屬性值定位,以某字符串結尾 32 //driver.findElement(By.xpath("//a[ends-with(@name,‘hao123‘)]")).click();//該方法只在xpath2.0中實現,瀏覽器實現的都是xpath1.0 33 //字符串截取name=tj_trhao123 34 //driver.findElement(By.xpath("//a[substring(@name,string-length(@name)-5)=‘hao123‘]")).click(); 35 //包含 36 //driver.findElement(By.xpath("//a[contains(@name,‘123‘)]")).click(); 37 //xpath的text函數 38 //driver.findElement(By.xpath("//a[text()=‘新聞‘]")).click(); 39 driver.findElement(By.xpath("//a[contains(text(),‘新‘)]")).click(); 40 41 42 } 43 44 }
CSS元素定位方法詳解
常用CSS定位語法如下，class就用.代替再接class中的屬性值，id用#代替再接id中的屬性值，跟樣式一樣
1.使用絕對路徑來定位元素。
CSS絕對路徑指的是在DOM結構中具體的位置，使用絕對路徑來定位用戶名輸入字段， 在使用絕對路徑的時候，每個元素之間要有一個空格。
實例：driver.findElement(By.cssSelector("html body div#wrapper div#head div.head_wrapper div#u1 a.mnav")).click();
也可以使用firebug工具復制css路徑即可，如下圖所示：
2.使用相對路徑來定位元素
當使用CSS選擇器來查找元素的時候，我們可以使用class屬性來定位元素，我們可以先指定一個HTML的標簽，然後加上一個” .” 符合，跟上class屬性的值。
實例：driver.findElement(By.cssSelector("div#u1 a.mnav")).click();
若是同一列表中，可使用下一節點方法實現，代碼如下：
driver.findElement(By.cssSelector("div#u1 a.mnav + a +a")).click();
3.使用相對ID選擇器來定位元素
可以使用元素的ID來定位元素， 先指定一個HTML標簽， 然後加上一個” #”符號， 跟上id的屬性值。
driver.findElement(By.cssSelector("input#kw")).sendKeys("12306");
4.使用屬性值選擇器來定位元素
通過指定元素中屬性值來定位元素
//單屬性 driver.findElement(By.cssSelector("a[name=‘tj_trnews‘]")).click(); //多屬性 driver.findElement(By.cssSelector("a[name=‘tj_trnews‘][class=‘mnav‘]")).click();
5.部分屬性值的匹配
CSS選擇器提供了一個部分屬性值匹配定位元素的方法，這為了測試那些頁面上具有動態變化的屬性的元素是非常有用的，例如界面技術EXTJS的id,className是動態變化的。
匹配前綴： ^= 匹配後綴： $= 匹配字符串： *=
//以href屬性值http://news.開頭 driver.findElement(By.cssSelector("a[href^=‘http://news.‘][class=‘mnav‘]")).click(); //以href屬性值preferences.html結尾 driver.findElement(By.cssSelector("a[href$=‘preferences.html‘][class=‘pf‘]")).click(); //以href屬性值包含hao123 driver.findElement(By.cssSelector("a[href*=‘hao123‘][class=‘mnav‘]")).click();
6.列表選擇具體的匹配
Selenium中的CSS選擇器允許我們更細致的瀏覽列表下的元素，我想選擇第三個鏈接，可以用nth-of-type或者nth-child
driver.findElement(By.cssSelector("div a[class=‘mnav‘]:nth-of-type(3)")).click();
driver.findElement(By.cssSelector("div a[class=‘mnav‘]:nth-child(3)")).click();
整體代碼如下：
1 package com.ui.day1; 2 3 import org.openqa.selenium.By; 4 import org.openqa.selenium.WebDriver; 5 import org.openqa.selenium.chrome.ChromeDriver; 6 7 public class yihuqingjiu_test_demo_css { 8 9 public static void main(String[] args) { 10 System.setProperty("webdriver.chrome.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe"); 11 WebDriver driver=new ChromeDriver(); 12 //瀏覽器要加載的url 13 driver.get("https://www.baidu.com"); 14 //窗口最大化 15 driver.manage().window().maximize(); 16 //絕對路徑 17 //driver.findElement(By.cssSelector("html body div#wrapper div#head div.head_wrapper div#u1 a.mnav")).click(); 18 //相對路徑 19 //driver.findElement(By.cssSelector("div#u1 a.mnav")).click(); 20 //id定位 21 //driver.findElement(By.cssSelector("input#kw")).sendKeys("12306"); 22 //單屬性 23 //driver.findElement(By.cssSelector("a[name=‘tj_trnews‘]")).click(); 24 //多屬性 25 //driver.findElement(By.cssSelector("a[name=‘tj_trnews‘][class=‘mnav‘]")).click(); 26 //以href屬性值http://news.開頭 27 //driver.findElement(By.cssSelector("a[href^=‘http://news.‘][class=‘mnav‘]")).click(); 28 //以href屬性值preferences.html結尾 29 //driver.findElement(By.cssSelector("a[href$=‘preferences.html‘][class=‘pf‘]")).click(); 30 //以href屬性值包含hao123 31 //driver.findElement(By.cssSelector("a[href*=‘hao123‘][class=‘mnav‘]")).click(); 32 driver.findElement(By.cssSelector("div a[class=‘mnav‘]:nth-of-type(3)")).click(); 33 34 } 35 36 }
常用css定位語法如下：
css定位與xpath定位的對比：
進行元素定位，xpath與css普遍使用，從上述對比中，可看出css定位方法比xpath方法要簡潔一些，css優於xpath。
本文僅代表作者觀點，系作者@溫一壺清酒發表。轉載請註明出處：http://www.cnblogs.com/hong-fithing/
UI自動化測試（二）瀏覽器操作及對元素的定位方法（xpath定位和css定位詳解）