java+testng+selenium UI自动化框架方案

最近因工作需要，又要调研UI自动化方案了，本人以前用过QTP，也用过python+selenium和java+selnium，由于我们接口自动化框架采用的也是java+testng，故决定还是使用java+testng+selenium的方案：
一、环境搭建：
安装的话不在本篇介绍，可参看本人的另一篇博客：java+selenium UI自动化环境搭建

二、设计模式
UI自动化最常用的设计模式是PO（page object）的设计模式，即将每个UI页面的一些操作如：输入文本框、选择下拉框、点击按钮等封装成页面类，供testcase调用，以提高程序的复用性和可维护性。

三、项目结构
建立好一个maven项目，然后我们把结构大概设计成如下模式：

Framework目录存放的是框架层的一些类；
Functions目录存放的是一些功能类；
PageObject目录存放的是各个页面对象；
TestData目录存放的是公共的数据常量；
tests目录存放的是所有的测试用例；
utils目录存放的是工具包。

四、PageObject类编写
PO设计模式的原理是通过页面工厂类（page factory）去初始化页面实例的时候也会一起实例化该页面的元素定位。我们采用这里Selenium框架的注解@FindBy来实现元素定义。在使用中，只要通过在field中使用注解，则可以将不同属性的元素对象转换成一个WebElement对象。PageObject类封装了当前页面所有的页面元素及元素的相关操作方法。示例如下：

public class HomePage extends BasePage {

// 展开菜单
@FindBy(xpath = "//span[text()='用户中心']")
WebElement expand_userCenter;

// 菜单管理
@FindBy(xpath = "//a[@href='/menuManage/']")
WebElement link_MenuManage;

// 岗位管理
@FindBy(xpath = "//a[@href='/postManagement/']")
WebElement link_PostManage;

// 权限管理
@FindBy(xpath = "//a[@href='/privilegeManage/']")
WebElement link_PrivilegeManage;

// 行政区划管理
@FindBy(xpath = "//a[@href='/districtManage/']")
WebElement link_DistrictManage;

public HomePage(WebDriver driver) {
	super(driver);

}

// 点击展开用户中心下面的菜单
public void ClickUserCenter() {

	expand_userCenter.click();
}

// 点击菜单管理
public void ClickMenuManage() {

	link_MenuManage.click();

}

// 点击权限管理
public void ClickPrivilegeManage() {

	link_PrivilegeManage.click();
}

// 点击行政区划管理
public void ClickDistrictManage() {

	link_DistrictManage.click();
}

}

五、testcase编写
testcase采用testng框架，把登录作为@beforeClass中的初始化动作，@Test中编写登陆后的操作。示例如下：

public class Demo {
public static WebDriver driver;
@BeforeClass
public void setup() throws IOException {
    Login login = new Login();
    login.initSetup();
    login.login();
    driver = login.driver;
}


@Test()
public void testAddPrivilege() throws InterruptedException, IOException {

	HomePage HP = PageFactory.initElements(driver, HomePage.class);
	PrivilegeManagePage PMP = PageFactory.initElements(driver, PrivilegeManagePage.class);
	HP.ClickUserCenter();
	HP.ClickPrivilegeManage();
	PMP.clickSelectApp();
	PMP.clickUserCenter();
	PMP.clickAdd();
}

六、元素定位方式
UI自动化最精华也是最复杂的就是元素的定位，因为前端元素多变，可重复，导致定位元素需要非常精确。
Selenium提供了八大元素定位方式：
1.通过id或name定位

通过元素所带的id和name属性对元素定位：
定位元素方式：id="kw"或name=“kw”
2.通过class name和tag name定位

<div class="jstEditor">
<textarea cols="60" rows="10" accesskey="e" class="wiki-edit" name="issue[description]" id="issue_description">
</textarea>
</div>

定位元素方式：className = “jstEditor”
注意：如果class属性中含空格，需要取其中一个不重复的字段。例如：

<a title="新建版本" tabindex="200" class="icon-only icon-add" data-remote="true" data-method="get" 		
  href="/projects/bk_community/versions/new">新建版本</a>

定位元素方式：className = “icon-add”
通过tagName定位非常不靠谱，如下：
定位元素方式：tagName = “a”
3.通过link text和partial link text定位

<a href="http://news.baidu.com" target="_blank" class="mnav">新闻</a>

定位元素方式：linkText = “新闻”
通过partial link text定位元素，当文字链接很长时，可以通过此方式取其中一部分，只要取的部分可以作为唯一标识。
定位元素方式：partialLinkText= “新闻”
4.通过xpath定位
需要在浏览器安装xpath插件，然后通过通过查看元素的xpath路径来定位。xpath定位有很多种方式。
（1）绝对定位
直接用xpath插件读取到元素的xpath路径，最为暴力同时稳定性也最差的方式。如下图所示的权限名称输入框的xpath路径为：/html/body/div[1]/div/div[2]/section/article/div/div[3]/div/div[2]/div/div/form/div[1]/div/div/input
（2）相对定位
使用频次最多效果也最好的定位方式，推荐使用。相对定位也有很多种方式去定位。
a.通过文本内容定位（div、td、span等）
定位元素方式：xpath = “//span[text()=‘用户中心’]”
b.通过元素tagName定位
定位元素方式：xpath = “//a[@href=’/postManagement/’]
c.通过已知元素定位
如果一个元素无法通过自身属性直接定位到，则可以先定位它的父(或父的父，它爷爷)元素，然后再找下一级即可
定位元素方式：xpath=”//form[@id=‘form’]/span[contains(@class,‘s_ipt_wr’)]/input"
5.通过css定位

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

定位元素方式：css=“s_ipt”
…