本文将使用Maven + TestNG + Java + Selenium 的项目来作为例子来讲解如何实现POM。
1.POM是什么
Page Object Model 是一种自动化测试的设计模式，为Web UI元素创建Object Repository。它的优点就是减少了代码的重复，提高了测试维护。
一般情况下，POM的项目需要包括3部分：
- PageModle：每个页面都应该有自己的的PageClass文件，这个PageClass将标识该页面的Web元素，并包含对这些Web元素执行操作的方法
- TestCase：测试用例管理部分，一个功能点可以对应一个或者多个case，尽可能的提高覆盖率
- Utilities：可以包含一些报告等内容
2.使用POM的好处
- POM模式使得测试用例和页面元素操作分开，这样可以使我们的代码更干净，更容易理解，且更容易维护；
- 对象存储库独立于测试用例，因此我们可以使用不同的工具为不同的目的使用相同的对象存储库。 例如，我们可以将POM与用于功能测试的Test NG/JUnit集成，同时与用于验收测试的JBehave/Cucumber集成；
- 测试用例更加简短，而且可重用页面元素和方法，代码变得更少，更简洁；
- 方法使用更真实的名称，这些名称可以很容易地与UI中发生的操作映射。例如：如果单击按钮后，回返回主页面，方法名称将类似于gotoHomePage()，易于理解。
3.如何创建一个POM项目
接下来我们通过一个简单的测试用例(登录账户的验证)来进行扩展，一步一步演变成POM的模式的项目。
最原始的代码如下：
@Test
public void ValidPasswordLogin(){
//1. Open browser and open test url
System.setProperty("webdriver.chrome.driver", "Driver/chromedriver");
WebDriver driver;
driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("http://jinshuju.com");
//2. Test part
//2. 1 Home page: Click login button go to login page
driver.findElement(By.cssSelector(".login-link")).click();
//2. 2 Login page: Input username and password to login
driver.findElement(By.id("auth_key")).sendKeys("131****8959");
driver.findElement(By.cssSelector(".gd-btn.gd-btn-primary-solid")).click();
driver.findElement(By.id("password")).sendKeys("Abcdef");
driver.findElement(By.cssSelector(".gd-btn.gd-btn-primary-solid")).click();
Assert.assertEquals(driver.findElement(By.className("validate-invalid")).getText(),"密码错误，请输入正确的密码（还剩余4次）");
//3. Quite browser
driver.quit();
}
- 首先，通过上述代码，可以看到一些common的方法例如：sendKeys， click， getText， assert，几乎在每个页面，都会频繁使用这些方法。如果单纯的使用Selenium自己的这些方法，可能会遇到一些问题，例如因为加载慢某个按钮还没有加载完成，但是已经触发了点击事件，此时会因为找不到按钮而失败，等等很多类似的问题。基于这些问题，我们首先可以对selenium这些最基本的方法进行重写。在pages package下边创建一个BasePage.java文件来重写这些方法，之后所有的页面都继承于BasePage类。
BasePage.java
package pages;
import org.junit.Assert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
public class BasePage {
public WebDriver driver;
public WebDriverWait wait;
//Constructor
public BasePage (WebDriver driver){
this.driver = driver;
wait = new WebDriverWait(driver,20);
}
//Wait
public void waitVisibility(By elementBy) {
wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(elementBy));
}
//Click
public void click(By elementBy){
waitVisibility(elementBy);
driver.findElement(elementBy).click();
}
//Write Text
public void writeText (By elementBy, String text) {
waitVisibility(elementBy);
driver.findElement(elementBy).sendKeys(text);
}
//Read Text
public String readText (By elementBy) {
waitVisibility(elementBy);
return driver.findElement(elementBy).getText();
}
//Assert
public void assertEquals (By elementBy, String expectedText) {
waitVisibility(elementBy);
Assert.assertEquals(readText(elementBy), expectedText);
}
}
- 接下来，分析整个代码块，可以分为三部分：
- 在执行测试步骤之前，我们需要先打开浏览器，输入测试的地址；
- 执行测试用例；
- 执行完测试用例之后，关闭浏览器。
- 第1和3这两部分：
分析： 因为每条测试用例都会打开浏览器和关闭浏览器，所以我们可以将他们放在一个BaseTest类中，使用@BeforeMethod和@AfterMethod注解(这个是TestNG的注解，如果不知道请学习TestNG的注解)，在每一个测试方法执行之前都会先执行@BeforeMethod，在每一个测试方法执行之后都会执行@AfterMethod。
做法： 在tests的Package下边创建一个BaseTest.java类，将1和3 两部分写在这个BaseTest类中：
BaseTest.java
package tests;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.*;
public class BaseTest {
public WebDriver driver;
@BeforeMethod
public void setUp() {
//1. Open browser and open test url
System.setProperty("webdriver.chrome.driver", "Driver/chromedriver");
driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("http://jinshuju.com");
}
@AfterMethod
public void quiteBrowser() {
//3. Quite browser
driver.quit();
}
}
- 第2部分
分析： 第2部分是测试代码部分，可以看到 1). 要对两个页面(Home page 和Login page)进行操作；2). 每个页面都有各自的元素和方法。所以我们可以按照页面进行拆分，每个页面为一个类，每个页面的类中包含对应页面的元素部分和方法部分，这样就比较清晰，而且当添加新的Case的时候也可以去复用现有的方法。
做法： 在pages这个package下边创建一个HomePage.java 类和一个LoginPage.java 类，将各自页面的方法也在各自页面中。 然后在每个page类中分为定位元素和方法两部分：
HomePage.java
package pages;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
public class HomePage extends BasePage{
//Constructor
public HomePage(WebDriver driver) {
super(driver);
}
//Elements
By loginButton = By.cssSelector(".btn-outline");
//Actions
public void clickLogin(){
click(loginButton);
}
}
LoginPage.java
package pages;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.testng.Assert;
public class LoginPage extends BasePage{
//Constructor
public LoginPage(WebDriver driver) {
super(driver);
}
//Elements
By userNameInput = By.id("auth_key");
By loginButton = By.cssSelector(".btn-lg");
By passwordInput = By.id("password");
By errorMessage = By.cssSelector(".alert");
//Actions
public void inputUsernamePwd(String userName, String password){
writeText(userNameInput,userName);
writeText(passwordInput,password);
click(loginButton);
}
public void verifyErrorMessage(String expectedErrorMessage){
Assert.assertEquals(readText(errorMessage),expectedErrorMessage);
}
}
- 此时，已经给每个页面创建了自己的类，而且每个页面类包含自己的元素定位和方法。接下来，需要创建测试用例来调用每个页面的方法，在tests package 下创建 loginTests.java 类，内容如下。注释部分是之前的代码，已经被新的代码代替。这样测试用例部分就很清晰，很简洁。
loginTests.java
package tests;
import org.openqa.selenium.WebDriver;
import org.testng.annotations.Test;
import pages.HomePage;
import pages.LoginPage;
public class loginTests extends BaseTest{
public static WebDriver driver;
public static LoginPage loginPage = new LoginPage(driver);
public static HomePage homePage = new HomePage(driver);
@Test
public void InvalidPasswordLogin(){
//driver.findElement(By.cssSelector(".btn-outline")).click();
homePage.clickLogin();
//driver.findElement(By.id("auth_key")).sendKeys("131****8959");
//driver.findElement(By.id("password")).sendKeys("Abcdef");
//driver.findElement(By.cssSelector(".btn-lg")).click();
loginPage.inputUsernamePwd("131****8959","Abcdef");
//Assert.assertEquals(driver.findElement(By.cssSelector(".alert")).getText(),"账号密码不正确");
loginPage.verifyErrorMessage("账号密码不正确");
}
}
- 分析结束后，我们的代码结构如下图：