1.5 Selenide/WebDriver API
通過學習元素定位,我們可以獲取到元素被操作的對象,那么接下來就是如何操作‘被測試對象’,我們使用的selenide測試框架,所有的api操作我這里按照 ‘被測試對象’分類描述。
1.5.1 瀏覽器
前面在搭建環境時已經嘗試過通過Selenide啟動多種不同的瀏覽器以及帶配置或者插件啟動的場景,在此基礎上Selenide同樣提供操作瀏覽器的方法,比如調整瀏覽器大小,前進,后退,切換頁簽或者窗口等。
- 1. 控制流覽器大小
通過調整瀏覽器大小可以模擬移動端來訪問被測系統的需求,比如iso/ipad/android等.
@Test
public void testBorwserSize(){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//指定瀏覽器大小
System.setProperty("selenide.browserSize", "400x800");
//打開測試地址
Selenide.open("https://www.baidu.com/");
//設置等待時間
Selenide.sleep(1000);
}
- 2. 跳轉頁面,以及向前,向后,刷新操作
@Test
public void testBorwser(){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("https://www.baidu.com/");
//設置等待時間
Selenide.sleep(1000);
//跳轉到google
Selenide.open("https://tieba.baidu.com");
Selenide.sleep(3000);
//向前
Selenide.back();
Selenide.sleep(3000);
//向后
Selenide.forward();
Selenide.sleep(3000);
//刷新
Selenide.refresh();
}
- 3. 多個窗口之間切換
@Test
public void testBorwser() {
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver", "c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊鏈接
Selenide.$(Selectors.byXpath("//a")).click();
Selenide.sleep(5000);
//按照index切換到新打開的窗口
Selenide.switchTo().window(1);
Selenide.sleep(5000);
//按照title切換到原來的窗口
Selenide.switchTo().window("練習項目");
Selenide.sleep(5000);
}
寫cookies緩存以及自動檢測js錯誤等等在后面相關部分都會寫,並且最后整合在框架篇中。
1.5.2 頁面基本控件
大多數從事web測試的手工QA都會Web頁面的控件並不陌生,結合我們在寫手工測試用例的經驗,我們的測試步驟通常會是這樣的,比如點擊某個按鈕或者鏈接,在某個輸入框輸入一個測試數據,點擊提交等等,下面我們嘗試把常見的頁面控件使用Selenide來進行操作,再來看看testDemo這個頁面的控件元素:
- 1. 輸入框
Html結構:
<input type="text" name="firstname" value="Mickey">
可操作示例:
Clear以及sendkey方法
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//清除輸入框原有的內容
Selenide.$("#input").clear();
Selenide.sleep(5000);
//輸入內容
Selenide.$("#input").sendKeys("mengxiu");;
Selenide.sleep(5000);
}
- 2. 鏈接
Html結構:
<a href="http://www.baidu.com" target="_blank">Google鏈接</a>
可操作示例:
Click方法
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊鏈接
Selenide.$(Selectors.byXpath("//a")).click();
Selenide.sleep(5000);
}
- 3. 按鈕
Html結構:
<input type="submit" value="Submit">
<button class="button22334">Submit</button>
可操作示例:
Click方法
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊按鈕
Selenide.$(Selectors.byXpath("//input[@value='Submit']")).click();
Selenide.sleep(5000);
}
- 4. 單選框
Html結構:
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
可操作示例:
Click方法
按照value選擇單選項
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊單選按鈕
Selenide.$(Selectors.byXpath("//input[@name='sex']")).selectRadio("female");
Selenide.sleep(5000);
//點擊單選按鈕組的第一個單選按鈕
Selenide.$(Selectors.byXpath("//input[@name='sex']"),0).click();;
Selenide.sleep(5000);
}
- 5. 多選框
Html結構:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a girlfriend
<br>
</form>
可操作示例:
Click方法
按照value選擇選項
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊多選按鈕
Selenide.$(Selectors.byXpath("//input[@name='vehicle']")).selectRadio("Bike");
Selenide.sleep(5000);
//點擊多選按鈕組的第2個單選按鈕
Selenide.$(Selectors.byXpath("//input[@name='vehicle']"),2).click();
Selenide.sleep(5000);
}
- 6. 下拉框
Html結構:
select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
可操作示例:
Click方法
按照value選擇選項
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//按照select下拉框選項順序選擇
Selenide.$(Selectors.byName("cars")).selectOption(1);
Selenide.sleep(5000);
//按照select下拉框選項的文本值選擇
Selenide.$(Selectors.byName("cars")).selectOption("Fiat");
Selenide.sleep(5000);
//按照select下拉框選項的value值選擇
Selenide.$(Selectors.byName("cars")).selectOptionByValue("audi");
Selenide.sleep(5000);
//按照select下拉框選項的包含文本值選擇
Selenide.$(Selectors.byName("cars")).selectOptionContainingText("aa");
Selenide.sleep(5000);
}
- 7. 富文本
因為 testDemo中沒有引入js實現富文本所以先不寫
- 8. Iframe框架
其實iframe就是用於在網頁內顯示網頁。我們在需要對iframe內的元素操作前,先切換到需要操作iframe中,記得操作完要切換回主框架。
Html結構:
<iframe id="iframefw></iframe>
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//按照name或者id切換到frame中,當然也可以按照index或者xpath切換
Selenide.switchTo().frame("iframefw");
Selenide.sleep(5000);
}
- 9. 警告框
Html結構:
<input type="button" onclick="disp_alert()" value="顯示警告框" />
可操作示例:
Accept()方法
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊按鈕彈出警告框
Selenide.$("#alert").click();
Selenide.sleep(5000);
//執行accpet方法
Selenide.switchTo().alert().accept();
Selenide.sleep(5000);
}
- 10. 確認框
Html結構:
<input id="confirm" type="button" onclick="disp_confirm()" value="顯示確認框" />
可操作示例:
Accept()/Dismiss()方法
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊按鈕彈出警告框
Selenide.$("#confirm").click();
Selenide.sleep(5000);
//執行accpet方法
Selenide.switchTo().alert().accept();
Selenide.sleep(5000);
//點擊按鈕彈出警告框
Selenide.$("#confirm").click();
Selenide.sleep(5000);
//執行dismiss方法
Selenide.switchTo().alert().dismiss();
Selenide.sleep(5000);
}
- 11. 提示框
Html結構:
<input id="prompt" type="button" onclick="disp_prompt()" value="顯示提示框" />
可操作示例:
Sendkeys()方法
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//點擊按鈕彈出警告框
Selenide.$("#prompt").click();
Selenide.sleep(5000);
//輸入信息並執行accpet方法
Selenide.switchTo().alert().sendKeys("aaa");
Selenide.switchTo().alert().accept();
Selenide.sleep(5000);
}
上面講的都是標准的web控件元素,但是實際項目中,web前端技術多樣化,可能大多數web產品我們發現都不是這種非標准的‘控件’,我們需要根據自己需要去識別並且封裝公共的控件方法,后面的項目實踐會詳細講到我在華為項目前端技術webix的公用組件封裝思路。
1.5.3 常用方法
除了基本的操作以外,Webdriver/Selenide還提供很多的方法供我們使用來完成一些測試用例常見,比如搜索不按提交直接回車, 表單提交,驗證元素像素是否和預期的一樣等,比如獲取元素的狀態等非常實用的方法。我這里會列舉一些比較常用的操作,如果想了解更多,可以查看Selenide的相關類
回車操作
//輸入
Selenide.$("#input").sendKeys("aaa");
//輸入完成執行完成
Selenide.$("#input").pressEnter();
Selenide.sleep(5000);
提交操作
//輸入
Selenide.$("#input").sendKeys("aaa");
//輸入完成執行完成
Selenide.$("#input").submit();
Selenide.sleep(5000);
獲取元素像素
Selenide.$("#input").getSize();
Selenide.sleep(5000);
獲取元素文本
Selenide.$("#input").getText();
Selenide.sleep(5000);
獲取元素屬性值
Selenide.$("#input").getAttribute("id");
Selenide.sleep(5000);
獲取元素innerHtml屬性值
Selenide.$("#input").innerHtml();
Selenide.sleep(5000);
獲取元素innerText屬性值
Selenide.$("#input").innerText();
Selenide.sleep(5000);
判斷元素是否被選中
Selenide.$(Selectors.byXpath("//input[@name='vehicle']"),2).isSelected();
Selenide.sleep(5000);
判斷元素是否可用
Selenide.$(Selectors.byXpath("//input[@name='vehicle']"),2).isEnabled();
Selenide.sleep(5000);
判斷元素是否存在
Selenide.$(Selectors.byXpath("//input[@name='vehicle']"),2 ).exists();
Selenide.sleep(5000);
獲取當前頁面的標題
Selenide.title();
Selenide.sleep(5000);
滾動操作
Selenide.$("#prompt").scrollTo();
Selenide.sleep(5000);
上面的這些都是經常需要用的,后面會補充的更完整。
1.5.4 鼠標
同樣我們在真實的web測試用例執行過程中,會遇到這樣的操作,右擊、雙擊、鼠標懸停、鼠標拖拽等,下面是Selenide如何進行這些操作的API示例。
右擊操作
Selenide.$("#input").contextClick();
雙擊操作
Selenide.$("#input").doubleClick();
鼠標懸停操作
Selenide.$("#input").hover();
鼠標拖動操作
WebElement toElement =Selenide.$(Selectors.byXpath("//input[@name='vehicle']"),2).toWebElement();
Selenide.$("#input").dragAndDropTo(toElement);
更多的鼠標事件方法可以通過Selenide.actions()調用
1.5.5 鍵盤
除了鼠標事件以外,Selenide提供了常見的回車,空格,tab鍵等,我們也可以通過sendkeys方法模擬更多的鍵盤操作以及常用的組合鍵操作
回車操作
Selenide.$("#input").pressEnter();
Tab鍵操作
Selenide.$("#input").pressTab();
ESC操作
Selenide.$("#input").pressEscape();
空格操作
Selenide.$("#input").sendKeys(Keys.SPACE);
復制操作
Selenide.$("#input").sendKeys(Keys.CONTROL,"C");
1.5.6 上傳/下載文件
對於web頁面上的上下/下載文件的操作Selenide也提供的基礎的API,但是因為上傳功能的實現不同可以無法滿足的所有人需要,我這里寫出了更多的場景供參考
上傳文件
Web頁面的文件上傳功能一般非為以下兩種方式。
標准input標簽上傳:就是把需要上傳的文件輸入到input標簽中,通過form表單提交到服務器
插件上傳:通過js或者ajax等技術實現的上傳功能或插件
標准控件的上傳操作相對來說比較簡單,通過selenide測試框架自身的uploadfile方法或者sendkeys方法可以實現
@Test
public void testFile (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//方式一:通過selenide的uploadfile方法
File file = new File(System.getProperty("user.dir")+"\\uploadFile\\index.html");
Selenide.$(Selectors.byName("file")).uploadFile(file);
Selenide.sleep(5000);
//方式二:通過selenide的sendkeys方法
File file = new File(System.getProperty("user.dir")+"\\uploadFile\\index.html");
String filePathString = file.getAbsolutePath();
Selenide.$(Selectors.byName("file")).sendKeys(filePathString);
Selenide.sleep(5000);
}
通過插件實現的上傳方法,目前 網上用的最多的是通過autoit來實現,但是autoit實現起來太過於笨重了,我這里使用鍵盤復制,粘貼的來操作,我們可以分解一下操作步驟:
1, 點擊上傳按鈕、
2, 在彈出框粘貼需要上傳的文件的路徑、
3, 點擊確定或者回車
@Test
public void testFile (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
/*
* 前置條件:把需要上傳的文件路徑放進粘帖區
1, 點擊上傳按鈕、
2, 在彈出框粘貼需要上傳的文件的路徑、
3, 點擊確定或者回車
*/
File file = new File(System.getProperty("user.dir")+"\\uploadFile\\index.html");
String filePathString = file.getAbsolutePath();
Selenide.$(Selectors.byName("file")).click();
Selenide.sleep(5000);
Robot robot;
try {
Selenide.sleep(2);
StringSelection stringSelection = new StringSelection(filePathString);
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(stringSelection, null);
Selenide.sleep(2);
robot = new Robot();
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_V);
Selenide.sleep(2);
robot.keyRelease(KeyEvent.VK_V);
robot.keyRelease(KeyEvent.VK_CONTROL);
Selenide.sleep(2);
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER);
Selenide.sleep(2);
} catch (AWTException e) {
System.err.println("upload file execution failed");
}
Selenide.$(Selectors.byName("file")).sendKeys(filePathString);
Selenide.sleep(5000);
}
下載文件
下載文件操作在各個瀏覽器的操作都不一樣,需要對瀏覽器進行配置讓下載變的簡單一點,最理想的下載方式就是點擊下載按鈕不需要彈出提示框並下載到指定位置。下面已chrome為例進行配置下載
@Test
public void testFile (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//下載模式設置
//System.setProperty("selenide.fileDownload", "HTTPGET");
//下載路徑設置
ChromeOptions options = new ChromeOptions();
Map<String, Object> prefs=new HashMap<String, Object>();
prefs.put("profile.default_content_settings.popups", false);
prefs.put("download.default_directory", "C:\temp");
options.addArguments("disable-popup-blocking");
options.setExperimentalOption("prefs", prefs);
WebDriver webDriver = new ChromeDriver(options);
WebDriverRunner.setWebDriver(webDriver);
//打開測試地址
Selenide.open("http://maven.apache.org/download.cgi");
//下載maven
Selenide.$(Selectors.byPartialLinkText("apache-maven-3.5.0-bin.zip")).click();
//設置等待時間
Selenide.sleep(5000);
}
1.5.7 JavaScript相關處理
Selenide/Selenium2無法操作一些非標准控件的情況時,可以通過執行JS的辦法來取代,比如改變html來完成某些場景包括拖動滾動條,給某個元素增加id屬性,改變一些隱藏元素的屬性讓其可以等等。在Selenide中通過executeJavaScript方法來調用js執行來處理一些特殊場景。
- 修改隱藏元素的屬性
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//顯示testDemo的隱藏按鈕
Selenide.executeJavaScript("arguments[0].style=\"display:block\"", Selenide.$("#blockbutton"));
Selenide.sleep(10000);
}
- 元素增加屬性
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//增加屬性,通過查看元素觀察
Selenide.executeJavaScript("arguments[0].name=\"test\"", Selenide.$("#blockbutton"));
Selenide.sleep(30000);
}
- 拖動滾動條
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("file:///C:/Users/niuh/Desktop/testDemo.html");
//設置等待時間
Selenide.sleep(5000);
//拖動滾動條
Selenide.executeJavaScript("document.body.scrollTop=1000");
Selenide.sleep(30000);
}
- 檢查是否存在js錯誤
除了調用js執行操作,selenide也提供getJavascriptErrors獲取當前頁面的js error
@Test
public void testPageComponent (){
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver","c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("http://selenide.org/");
//設置等待時間
Selenide.sleep(20000);
//檢查是否存在js錯誤
List<String> javascriptErrors = Selenide.getJavascriptErrors();
if (javascriptErrors.size() == 0) {
System.out.println("not found js error");
}else {
for(String jserror: javascriptErrors){
System.err.println(jserror);
}
}
Selenide.sleep(30000);
}
1.5.8 Session/Cookies
Cookies/Session有時候我們也需要是否正常,Selenide也可以讀取、增加和刪除cookies信息。
@Test
public void testPageComponent() {
//指定Driver 的存放目錄
System.setProperty("webdriver.chrome.driver", "c:/driver/chromedriver.exe");
//指定需要啟動的瀏覽器類型
System.setProperty("selenide.browser", "Chrome");
//打開測試地址
Selenide.open("https://www.baidu.com");
//設置等待時間
System.out.println("----------------------");
Selenide.sleep(5000);
//獲取cookies
Set<Cookie> cookies = WebDriverRunner.getWebDriver().manage().getCookies();
for (Cookie cookie : cookies) {
System.out.println("----------------------");
System.err.println(cookie.getName() + "===" + cookie.getValue());
}
Selenide.sleep(5000);
//增加cookies后再獲取打印
Cookie cookie1 = new Cookie("name", "niuh");
WebDriverRunner.getWebDriver().manage().addCookie(cookie1);
cookies = WebDriverRunner.getWebDriver().manage().getCookies();
for (Cookie cookie : cookies) {
System.out.println("----------------------");
System.err.println(cookie.getName() + "===" + cookie.getValue());
}
Selenide.sleep(5000);
//刪除cookies后再獲取打印
WebDriverRunner.getWebDriver().manage().deleteAllCookies();
cookies = WebDriverRunner.getWebDriver().manage().getCookies();
for (Cookie cookie : cookies) {
System.out.println("----------------------");
System.err.println(cookie.getName() + "===" + cookie.getValue());
}
Selenide.sleep(5000);
}
任務目標:
1,熟悉並掌握Selenide測試框架的基礎API
2,擴充上面沒有提的操作API並且有可能的情況下閱讀Selenide的API文檔