PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)


1. 認識 PageObject

PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

1.1 PO首次提出


PO的思想最早是2013年由IT大佬Martin Flower提出的:

https://martinfowler.com/bliki/PageObject.html沒錯,就是他

PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

--- 沒錯,就是他 ---


在他的文章裡有這樣一張經典樣圖,圖片中展示了測試代碼中直接操作HTML元素和使用PO模式將page對象封裝成一個HTML頁面,通過特定方法來操作元素的對比;如下圖:

PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

1.2 PO原則解讀


我們知道,PO主要就是應用在UI自動化測試上(Web端和App端均適用),因此2015年,Selenium官方給出了PO的設計原則說明:https://github.com/SeleniumHQ/selenium/wiki/PageObjects


PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

對官方的原則進行解讀,我們可以得到如下的信息:


1.2.1 方法意義
  • 用公共方法代表UI所提供的功能

如企業微信的通訊錄頁面,其中有“添加成員”、“批量導入,導出”、“設置所在部門”、“刪除”等功能,這些功能都可以封裝成通訊錄這個UI界面所提供的方法;當然,部分數據較多或者較為複雜,複用性也比較高的話,例如添加成員,也可以單獨抽離出來做一個page。

PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)


  • 方法應該返回其他的PageObject或者返回用於斷言的數據

我們既然以頁面為對象進行業務操作,那麼一個方法結束後必然要有返回值:

要麼返回一個頁面,這個頁面可以是當前頁(因為可能還要在這個頁面進行其他操作),可以是其他頁面(我們操作某個方法後很可能會跳轉到另一個頁面進行下一步操作);

要麼返回需要斷言的值,測試用例總歸有預期結果的對吧,那麼最後肯定要有方法返回一個值,用來給我們做斷言,來判斷用例執行是否符合預期結果。


不要返回null或者寫一個void沒有返回值的方法,這樣的方法沒有意義,既不能為下一步操作創造條件,也不能為用例的斷言提供結果。


  • 同樣的行為不同的結果可以建模為不同的方法

這個就比較好理解了,拿最簡答的登錄場景來說:


同樣的行為: 無論輸入的賬號密碼正確與否,都是按照輸入賬號密碼,點擊登錄這樣的行為去操作


不同的結果:賬號密碼錯誤和正確得到的登錄響應一定是不同的。


建模為不同的方法:對於登錄頁來說,就可以根據登錄信息正確與否建模出正確登錄、賬號錯誤登錄、密碼錯誤登錄等方法了


  • 不要在方法內加斷言

對一個測試用例的執行結果進行判斷一定是在測試用例裡的,方法只是提供給我們業務上需要的操作,因此斷言不要加在方法裡,而是應該寫在用例裡

1.2.2 字段意義
  • 不要暴露頁面內部的元素給外部

我們使用PO的目的就是為了提高測試用例的可讀性和可維護性,只要我們人能操作的事,通過page對象封裝好的客戶端都可以做到;就類似於一個接口,我們只關心請求操作後接口的返回值是什麼,而不需要關心接口內部到底是如何工作的

  • 不需要建模UI內的所有元素

一個UI頁面可能會包含很多的元素,但是我們只要根據實際業務需求,將我們用的上的元素進行建模即可


1.3 PO的做法和優點


1.3.1 PO的做法總結
  • 以頁面為單位獨立建模
  • 隱藏實現細節
  • 本質是面向接口編程


1.3.2 基於POM的用例組織結構
  • page :完成對頁面的封裝
  • driver :完成對Web、Android、Ios、接口的驅動
  • testcase :調用各類page完成業務流程並進行斷言
  • data :配置文件和數據驅動
  • utils :其他便捷的功能封裝(可選)

1.3.3 PO的優點

  • 減少例如find click這類樣板代碼的重複
  • 測試用例的可讀性提高,只關心業務流程
  • 測試用例可維護性提高,UI頁面頻繁被修改了,我們只需要去修改對應PO即可,用例無需修改


2、PO封裝演示

PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

說的再多,不如動手,下面以QQ郵箱登錄為例,演示PO模式在UI自動化中的應用


2.1 登錄場景預設


2.1 登錄場景預設

登錄頁面提供login功能——LoginPage類+login方法

登錄頁面內有多少元素並不關心,隱藏內部細節

登錄成功和失敗會返回不同的頁面

loginSuccess——MainPage(進入主頁面)

loginFail——LoginPage(停留在登錄頁)

通過方法返回值判斷登錄是否符合預期


2.2 代碼實現

1)創建基礎類BasePage,初始化driver,並封裝常用的元素操作方法,如click、sendKeys等

<code>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();
}
}/<webelement>/<code>


2)創建MainPage類,用於登錄成功後的返回頁面,由於這裡並未演示登錄後的操作,所以類中無具體方法實現,僅作為loginSuccess後的返回對象

<code>package poshow.page;

public class MainPage extends BasePage{
}/<code>


3)創建LoginPage類,繼承BasePage類。定義所需元素定位方式並根據操作動作(輸入賬號、輸入密碼、點擊登錄)將其封裝成具體的業務操作方法,例如登錄成功,用戶名錯誤登錄、密碼錯誤登錄等,輸入的測試數據作為方法的入參傳入(username,password)

<code>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"); //獲取錯誤提示信息


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();
}
}

//業務方法

/*
登錄方法
*/
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();
}


/*
密碼錯誤登錄
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);
}
}/<code>


4)最後創建LoginTest測試類,編寫測試用例;用例的編寫更接近於人的行為,人想要登錄郵箱,只需要依靠用戶名和密碼完成登錄的行為即可,無需關注具體的輸入框和登錄按鈕是如何定位,如何進行輸入點擊的。並在用例中加入斷言進行判斷。

<code>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("密碼錯誤登錄")
@Order(1)
void loginWithErrPassword(){
String username = "376057520";
String password = "123456";
String expectedErrM = "你輸入的帳號或密碼不正確,請重新輸入。";

String errM = loginPage.loginWithErrPassword(username, password);
assertThat(errM,equalTo(expectedErrM));
}

@Test
@DisplayName("賬號錯誤登錄")
@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);
}

}
/<code>


5)整體結構展示:


PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

2.3 運行效果


PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

3、補充說明

PageObject設計模式在 UI 自動化中的實踐(QQ 郵箱登陸為例)

3.1 用例設計


  • case儘量保持獨立
  • suite體系管理用例的順序
  • 不要把大量的業務校驗邏輯放到UI自動化測試裡, UI主要校驗的是用戶交付,操作流程,樣式、數據、兼容性。
  • 與接口測試合理的分工 #### 3.2 補充說明 以上僅僅是為了演示PO而舉的一個簡單的demo,實際上還有很大的優化空間:
  • 常用元素操作方法可以進一步封裝的更完善
  • 可封裝常用的操作util類,例如滑動
  • 特定元素的等待採用顯示等待
  • 登錄用例可以利用參數化來以數據驅動的方式完成,使用例代碼更簡潔易懂
  • PO代碼和testcase代碼可以分開,test下只放case代碼
  • 等等~後續需要大家一起繼續完善。



分享到:


相關文章: