PageObject（PO）設(shè)計(jì)模式在 UI 自動(dòng)化中的實(shí)踐總結(jié)（以 QQ 郵箱登陸為例）
PO的思想最早是2013年由IT大佬Martin Flower提出的：
martinfowler.com
bliki: PageObject
A page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements for testing without digging around in the HTML.
沒錯(cuò)，就是他
— 沒錯(cuò)，就是他 —
在他的文章里有這樣一張經(jīng)典樣圖,圖片中展示了測試代碼中直接操作HTML元素和使用PO模式將page對象封裝成一個(gè)HTML頁面，通過特定方法來操作元素的對比；如下圖：
我們知道，PO主要就是應(yīng)用在UI自動(dòng)化測試上(Web端和App端均適用)，因此2015年，Selenium官方給出了PO的設(shè)計(jì)原則說明：https://github.com/SeleniumHQ/selenium/wiki/PageObjects
對官方的原則進(jìn)行解讀，我們可以得到如下的信息：
用公共方法代表UI所提供的功能
如企業(yè)微信的通訊錄頁面，其中有“添加成員”、“批量導(dǎo)入，導(dǎo)出”、“設(shè)置所在部門”、“刪除”等功能，這些功能都可以封裝成通訊錄這個(gè)UI界面所提供的方法；當(dāng)然，部分?jǐn)?shù)據(jù)較多或者較為復(fù)雜，復(fù)用性也比較高的話，例如添加成員，也可以單獨(dú)抽離出來做一個(gè)page。方法應(yīng)該返回其他的PageObject或者返回用于斷言的數(shù)據(jù)
我們既然以頁面為對象進(jìn)行業(yè)務(wù)操作，那么一個(gè)方法結(jié)束后必然要有返回值：
要么返回一個(gè)頁面，這個(gè)頁面可以是當(dāng)前頁(因?yàn)榭赡苓€要在這個(gè)頁面進(jìn)行其他操作)，可以是其他頁面(我們操作某個(gè)方法后很可能會(huì)跳轉(zhuǎn)到另一個(gè)頁面進(jìn)行下一步操作)；
要么返回需要斷言的值，測試用例總歸有預(yù)期結(jié)果的對吧，那么最后肯定要有方法返回一個(gè)值，用來給我們做斷言，來判斷用例執(zhí)行是否符合預(yù)期結(jié)果。
不要返回null或者寫一個(gè)void沒有返回值的方法，這樣的方法沒有意義，既不能為下一步操作創(chuàng)造條件，也不能為用例的斷言提供結(jié)果。
同樣的行為不同的結(jié)果可以建模為不同的方法
這個(gè)就比較好理解了，拿最簡答的登錄場景來說：
同樣的行為： 無論輸入的賬號密碼正確與否，都是按照輸入賬號密碼，點(diǎn)擊登錄這樣的行為去操作
不同的結(jié)果：賬號密碼錯(cuò)誤和正確得到的登錄響應(yīng)一定是不同的。
建模為不同的方法：對于登錄頁來說，就可以根據(jù)登錄信息正確與否建模出正確登錄、賬號錯(cuò)誤登錄、密碼錯(cuò)誤登錄等方法了不要在方法內(nèi)加斷言
對一個(gè)測試用例的執(zhí)行結(jié)果進(jìn)行判斷一定是在測試用例里的，方法只是提供給我們業(yè)務(wù)上需要的操作，因此斷言不要加在方法里，而是應(yīng)該寫在用例里不要暴露頁面內(nèi)部的元素給外部
我們使用PO的目的就是為了提高測試用例的可讀性和可維護(hù)性，只要我們?nèi)四懿僮鞯氖拢ㄟ^page對象封裝好的客戶端都可以做到；就類似于一個(gè)接口，我們只關(guān)心請求操作后接口的返回值是什么，而不需要關(guān)心接口內(nèi)部到底是如何工作的不需要建模UI內(nèi)的所有元素
一個(gè)UI頁面可能會(huì)包含很多的元素，但是我們只要根據(jù)實(shí)際業(yè)務(wù)需求，將我們用的上的元素進(jìn)行建模即可以頁面為單位獨(dú)立建模
隱藏實(shí)現(xiàn)細(xì)節(jié)
本質(zhì)是面向接口編程
page ：完成對頁面的封裝
driver ：完成對Web、Android、Ios、接口的驅(qū)動(dòng)
testcase ：調(diào)用各類page完成業(yè)務(wù)流程并進(jìn)行斷言
data ：配置文件和數(shù)據(jù)驅(qū)動(dòng)
utils ：其他便捷的功能封裝(可選)
1.3.3 PO的優(yōu)點(diǎn)
減少例如find click這類樣板代碼的重復(fù)
測試用例的可讀性提高，只關(guān)心業(yè)務(wù)流程
測試用例可維護(hù)性提高，UI頁面頻繁被修改了，我們只需要去修改對應(yīng)PO即可，用例無需修改
說的再多，不如動(dòng)手，下面以QQ郵箱登錄為例，演示PO模式在UI自動(dòng)化中的應(yīng)用
2.1 登錄場景預(yù)設(shè)
登錄頁面提供login功能——LoginPage類+login方法
登錄頁面內(nèi)有多少元素并不關(guān)心，隱藏內(nèi)部細(xì)節(jié)
登錄成功和失敗會(huì)返回不同的頁面
loginSuccess——MainPage(進(jìn)入主頁面)
loginFail——LoginPage(停留在登錄頁)
通過方法返回值判斷登錄是否符合預(yù)期
1）創(chuàng)建基礎(chǔ)類BasePage，初始化driver，并封裝常用的元素操作方法，如click、sendKeys等
package poshow.page;?
import org.openqa.selenium.By;?
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;?
import java.util.List;
?public class BasePage {?
? ?public static WebDriver driver;?
? ?public WebElement findElement(By by){
? ? ? ?return driver.findElement(by);
?? ?}?
? ?public List<WebElement> finElements(By by){?
? ? ? ?return driver.findElements(by);
?
??}
?
??public void click(By by){
??
? ? findElement(by).click();
?
??}?
?? ?public void sendKeys(By by,String context){
? ? ? ?findElement(by).sendKeys(context);
?
??}?
?? ?public String getText(By by){
?
?? ? ?return findElement(by).getText();
??
?}?
}
2）創(chuàng)建MainPage類，用于登錄成功后的返回頁面，由于這里并未演示登錄后的操作，所以類中無具體方法實(shí)現(xiàn)，僅作為loginSuccess后的返回對象
package poshow.page;?
?public class MainPage extends BasePage{?
}
3）創(chuàng)建LoginPage類，繼承BasePage類。定義所需元素定位方式并根據(jù)操作動(dòng)作（輸入賬號、輸入密碼、點(diǎn)擊登錄）將其封裝成具體的業(yè)務(wù)操作方法，例如登錄成功，用戶名錯(cuò)誤登錄、密碼錯(cuò)誤登錄等，輸入的測試數(shù)據(jù)作為方法的入?yún)魅?username,password)
package poshow.page;?
import org.openqa.selenium.By;?
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;?
public class LoginPage extends BasePage{
??
?//定位器
?
?By usernameInput = By.name("u"); ?//獲取用戶名輸入框?
?? ?By passwordInput = By.id("p"); ? ?//獲取密碼輸入框
? ?By submitLogin = By.cssSelector("#login_button"); //獲取登錄按鈕
?
?By ErrM = By.id("err_m"); ?//獲取錯(cuò)誤提示信息
?
??public void openUrl(){
?
?? ? ?String url = "https://mail.qq.com/";
? ?
?? ?driver = new ChromeDriver();
? ? ? ?driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
? ? ? ?driver.get(url);
??
? ? ?driver.manage().window().maximize();
? ? ? ?driver.switchTo().frame("login_frame");
??
?}
??
?private void sleepWait(){
??
? ? ?try {
??
? ? ? ? ?Thread.sleep(500);
?
? ? ?} catch (InterruptedException e) {
? ? ? ? ? ?e.printStackTrace();
? ?
? ?}
??
?}?
? ?//業(yè)務(wù)方法
?
?/*
? ?登錄方法
??
? */
?
??private void login(String username,String password){
? ? ? ?findElement(usernameInput).clear();
? ? ? ?findElement(passwordInput).clear();
? ? ? ?sendKeys(usernameInput,username);
? ? ? ?sendKeys(passwordInput,password);
? ? ? ?
click(submitLogin);
? ?}
??
?/*
? ? ?成功登錄
??
? */
?
??public MainPage loginSuccess(String username,String password){
? ? ? ?login(username,password);
? ?
?? ?return new MainPage();?
? ?}
?
?/*
? ? 密碼錯(cuò)誤登錄
? ?
?message:你輸入的帳號或密碼不正確，請重新輸入。
??
? */
? ?public String loginWithErrPassword(String username,String password ){
? ?
? ?login(username,password);
??
? ? ?sleepWait();
? ??
? ?return getText(ErrM);
??
?}
?
??/*
? ?賬號為空登錄
??
?你還沒有輸入帳號！
??
? */
? ?public String loginWithErrUsername(String username,String password){
? ?
? ?login(username,password);
??
? ? ?sleepWait();
?
?? ? ?return getText(ErrM);
?
??}
??
?/*
? ?密碼為空登錄
??
? */
?
??public String loginWithoutPassword(String username,String password){
? ? ? ?login(username,password);
? ??
? ?sleepWait();
? ? ? ?
return getText(ErrM);
??
?}?
}
4）最后創(chuàng)建LoginTest測試類，編寫測試用例；用例的編寫更接近于人的行為，人想要登錄郵箱，只需要依靠用戶名和密碼完成登錄的行為即可，無需關(guān)注具體的輸入框和登錄按鈕是如何定位，如何進(jìn)行輸入點(diǎn)擊的。并在用例中加入斷言進(jìn)行判斷。
package poshow.testcase;?
import org.junit.jupiter.api.*;
?import poshow.page.LoginPage;?
import static org.hamcrest.CoreMatchers.equalTo;
import static org.hamcrest.MatcherAssert.assertThat;
@TestMethodOrder(MethodOrderer.OrderAnnotation.class)?
public class LoginTest {
?
??LoginPage loginPage = new LoginPage();
?
?@BeforeAll
?
static void openUrl(){
??
? ? ?new LoginPage().openUrl();
?
?}
??
?@Test?
? ?@DisplayName("密碼錯(cuò)誤登錄")
?
?@Order(1)
??
?void loginWithErrPassword(){
??
? ? ?String username = "376057520";
? ?
? ?String password = "123456";
? ?
? ?String expectedErrM = "你輸入的帳號或密碼不正確，請重新輸入。";
? ? ? ?String errM = loginPage.loginWithErrPassword(username, password);
? ? ? ?assertThat(errM,equalTo(expectedErrM));
??
?}
??
?@Test
?
??@DisplayName("賬號錯(cuò)誤登錄")
?
??@Order(2)
?
??void loginWithErrUsername(){
??
? ? ?String username = "111";
??
? ? ?String password = "123456";
??
? ? ?String expectedErrM = "請輸入正確的帳號！";
?
?? ? ?String errM = loginPage.loginWithErrUsername(username, password);
? ? ? ?assertThat(errM,equalTo(expectedErrM));
?
??}
?
??@Test
? ?@DisplayName("空密碼登錄")
??
?@Order(3)
? ?void loginWithoutPassword(){
? ?
?? ?String username = "376057520";
? ? ?
?String password = "";
?
? ? ?String expectedErrM = "你還沒有輸入密碼！";
?
?? ? ?String errM = loginPage.loginWithoutPassword(username, password);
? ? ? ?assertThat(errM,equalTo(expectedErrM));
?
?}
?
??@Test
??
?@DisplayName("正確登錄")
?
??@Order(4)
??
?void logSuccess(){
? ?
?? String username = "376057520";
??
? ? String password = "xxx";
? ? ? loginPage.loginSuccess(username,password);?
?? ?}
?}
5）整體結(jié)構(gòu)展示：
case盡量保持獨(dú)立
suite體系管理用例的順序
不要把大量的業(yè)務(wù)校驗(yàn)邏輯放到UI自動(dòng)化測試?yán)铮?UI主要校驗(yàn)的是用戶交付，操作流程，樣式、數(shù)據(jù)、兼容性。
與接口測試合理的分工 #### 3.2 補(bǔ)充說明 以上僅僅是為了演示PO而舉的一個(gè)簡單的demo，實(shí)際上還有很大的優(yōu)化空間：
常用元素操作方法可以進(jìn)一步封裝的更完善
可封裝常用的操作util類，例如滑動(dòng)
特定元素的等待采用顯示等待
登錄用例可以利用參數(shù)化來以數(shù)據(jù)驅(qū)動(dòng)的方式完成，使用例代碼更簡潔易懂
PO代碼和testcase代碼可以分開，test下只放case代碼
