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文档