PageObject（PO）設計模式在 UI 自動化中的實踐總結（以 QQ 郵箱登陸為例）-有解無憂

1080×608 28.8 KB

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.

沒錯，就是他
— 沒錯，就是他 —

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

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

對官方的原則進行解讀，我們可以得到如下的資訊：

用公共方法代表UI所提供的功能
如企業微信的通訊錄頁面，其中有“添加成員”、“批量匯入，匯出”、“設定所在部門”、“洗掉”等功能，這些功能都可以封裝成通訊錄這個UI界面所提供的方法；當然，部分資料較多或者較為復雜，復用性也比較高的話，例如添加成員，也可以單獨抽離出來做一個page，
方法應該回傳其他的PageObject或者回傳用于斷言的資料
我們既然以頁面為物件進行業務操作，那么一個方法結束后必然要有回傳值：
要么回傳一個頁面，這個頁面可以是當前頁(因為可能還要在這個頁面進行其他操作)，可以是其他頁面(我們操作某個方法后很可能會跳轉到另一個頁面進行下一步操作)；
要么回傳需要斷言的值，測驗用例總歸有預期結果的對吧，那么最后肯定要有方法回傳一個值，用來給我們做斷言，來判斷用例執行是否符合預期結果，

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

同樣的行為不同的結果可以建模為不同的方法
這個就比較好理解了，拿最簡答的登錄場景來說：
同樣的行為：無論輸入的賬號密碼正確與否，都是按照輸入賬號密碼，點擊登錄這樣的行為去操作
不同的結果：賬號密碼錯誤和正確得到的登錄回應一定是不同的，
建模為不同的方法：對于登錄頁來說，就可以根據登錄資訊正確與否建模出正確登錄、賬號錯誤登錄、密碼錯誤登錄等方法了
不要在方法內加斷言
對一個測驗用例的執行結果進行判斷一定是在測驗用例里的，方法只是提供給我們業務上需要的操作，因此斷言不要加在方法里，而是應該寫在用例里
不要暴露頁面內部的元素給外部
我們使用PO的目的就是為了提高測驗用例的可讀性和可維護性，只要我們人能操作的事，通過page物件封裝好的客戶端都可以做到；就類似于一個介面，我們只關心請求操作后介面的回傳值是什么，而不需要關心介面內部到底是如何作業的
不需要建模UI內的所有元素
一個UI頁面可能會包含很多的元素，但是我們只要根據實際業務需求，將我們用的上的元素進行建模即可
以頁面為單位獨立建模
隱藏實作細節
本質是面向介面編程
page ：完成對頁面的封裝
driver ：完成對Web、Android、Ios、介面的驅動
testcase ：呼叫各類page完成業務流程并進行斷言
data ：組態檔和資料驅動
utils ：其他便捷的功能封裝(可選)

1.3.3 PO的優點

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

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

2.1 登錄場景預設
登錄頁面提供login功能——LoginPage類+login方法
登錄頁面內有多少元素并不關心，隱藏內部細節
登錄成功和失敗會回傳不同的頁面
loginSuccess——MainPage(進入主頁面)
loginFail——LoginPage(停留在登錄頁)
通過方法回傳值判斷登錄是否符合預期

1）創建基礎類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）創建MainPage類，用于登錄成功后的回傳頁面，由于這里并未演示登錄后的操作，所以類中無具體方法實作，僅作為loginSuccess后的回傳物件

package poshow.page;

public class MainPage extends BasePage{
}

3）創建LoginPage類，繼承BasePage類，定義所需元素定位方式并根據操作動作（輸入賬號、輸入密碼、點擊登錄）將其封裝成具體的業務操作方法，例如登錄成功，用戶名錯誤登錄、密碼錯誤登錄等，輸入的測驗資料作為方法的入參傳入(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");  //獲取錯誤提示資訊


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

4）最后創建LoginTest測驗類，撰寫測驗用例；用例的撰寫更接近于人的行為，人想要登錄郵箱，只需要依靠用戶名和密碼完成登錄的行為即可，無需關注具體的輸入框和登錄按鈕是如何定位，如何進行輸入點擊的，并在用例中加入斷言進行判斷，

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

}

5）整體結構展示：

case盡量保持獨立
suite體系管理用例的順序
不要把大量的業務校驗邏輯放到UI自動化測驗里， UI主要校驗的是用戶交付，操作流程，樣式、資料、兼容性，
與介面測驗合理的分工 #### 3.2 補充說明以上僅僅是為了演示PO而舉的一個簡單的demo，實際上還有很大的優化空間：
常用元素操作方法可以進一步封裝的更完善
可封裝常用的操作util類，例如滑動
特定元素的等待采用顯示等待
登錄用例可以利用引數化來以資料驅動的方式完成，使用例代碼更簡潔易懂
PO代碼和testcase代碼可以分開，test下只放case代碼
原文鏈接

更多技術文章

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/469811.html

標籤：其他

上一篇：Spring 原始碼（8）Spring BeanPostProcessor的注冊、國際化及事件發布機制

下一篇：ReentrantLock學習