Page Object設計模式詳解

一、什麼是Page Object？

Page Object是一種將頁面之間相應的元素放在一個類裡面統一管理的設計模式。Page Object測試框架的出現解決了傳統UI測試框架中用戶界面UI發生變化時，需要對大量測試用例進行重構的問題。它通過建立一個抽象層，將頁面元素抽象成對象。並將頁面行為抽象為方法，減少了代碼冗餘度及測試維護成本。

優點：

1、易於維護。在應用程序的修改過程中，由於分層模式，多大部分情況下修改只需要更改頁面對象類中的方法即可。

2、易於擴展。隨著應用程序測試的深入，Page Object也將不斷地擴展。

3、耦合性低。不同的Page Object操作的是不同的頁面，因此不同的Page Object之間是解耦合的。

設計思路：

Page Object設計模式是將業務邏輯和頁面元素的操作分離開來。page object作為一個獨立的組件可以更好的滿足當前需求的變化，降低易變度，同時提高復用度，增加可讀性。

二、如何設計Page Object模式

Page Object是由實現Page 的存儲庫、瀏覽器操作和測試腳本組成的。基於page object模式，我們將頁面元素的定位和操作進行了封裝，當頁面元素髮生變化時，我們只需要修改頁面對象中的方法即可。

1、頁面類。每一個頁面設置一個獨立的頁面類，並繼承Page類，每一個頁面都有唯一一個URL。

 public class BasePage {
    public BasePage(){
         PageFactory.initElements(LcmUtil.getWebdriver(), this);
    }
}
    
public class LoginPage extends BasePage {
    String url;
    WebDriver driver;
    public LoginPage(WebDriver driver){
         this.driver = driver;
         url = "";
    }
    public void navigate () {
        driver.navigate().to(this.url);
    }
}

2、頁面方法。封裝頁面的方法，並使用@FindBy註解進行定位。

public class LoginPage extends BasePage {
    @FindBy(xpath="//input[@name='username']") 
    WebElement nameField;
    @FindBy(xpath="//input[@name='password']") 
    WebElement passwordField;
    @FindBy(xpath="//input[@name='submit']") 
    WebElement loginButton;
    String url;
    WebDriver driver;
    public LoginPage(WebDriver driver){
         this.driver = driver;
         url = "";
    }
    public void navigate () {
        driver.navigate().to(this.url);
    }
    public void login(String name, String password) {
        nameField.sendKeys(name);
        passwordField.sendKeys(password);
        loginButton.click();
    }
}

3、測試用例。測試用例中的代碼簡單易懂，與業務無關，不會產生重複測試代碼、代碼維護難度大等問題。

public class LoginTest extends TestCaseBase{
    @Test
    public void testLogin(){
        LoginPage loginPage = new LoginPage(driver);
        loginPage.navigate();
        loginPage.login("212895394@qq.com","123456");
       }
}

三、Page Object驅動測試的高效性

讓我們來看看在沒有使用Page Object時，當頁面執行了修改操作時測試代碼需要如何重構。

當一個Web表單16個輸入項時，一個藉助selenium RC瀏覽器驅動的Http watch結果大約有300行字元數量。TDD緊密結合頁面的可擴展和可維護性，自然而然地就會迫使開發者去探索如何更好地測試這種Web 表單構造。Page Object的另一個好處是通過使用已有的頁面元素定位方法，允許QA進行更多有價值的測試。我們想要新建一個User對象，由於表單中的輸入項有很多，這時在QA的測試代碼中，創建每個用戶測試用例花費的時間比較長，但是如果使用Page Object，就可以大大縮減測試用例的編寫時間和維護成本。
基於這個例子，我們可以看到：使用Page Object可以極大地提高測試代碼的可讀性，可維護性減少開發窗口。

四、用Page Object設計模式簡化測試代碼

在傳統的測試方法中，如果我們想驗證一個業務操作是否成功，需要編寫很多定位元素的代碼。而如果使用Page Object設計模式，則可以將定位的元素封裝到一個頁面類中，具體的實現不需要考慮具體的元素，這樣在進行測試時只需要調用頁面類方法就可以完成頁面操作和驗證。下面是Page Object設計模式在web UI自動化測試過程中的一個典型應用。

1、Page類。在頁面類中，封裝了頁面的元素和方法，僅暴露必要的方法，增加了可重用性。

public class SortSearchPage extends BasePage {
    @FindBy(id="sort_div") private WebElement sortBtn;
    @FindBy(xpath="//a[contains(text(),'最新')]") private WebElement timeOption;
    @FindBy(id="search_input") private WebElement searchBtn;
    @FindBy(css=".search-form [type='submit']") private WebElement searchBtn1;
    @FindBy(id="search_str") private WebElement searchInput;
    public SortSearchPage(WebDriver driver) {
        super(driver);
    }
    public void sortItems() {
        sortBtn.click();
        timeOption.click();
    }
    public void search(String searchStr) {
        searchBtn.click();
        searchInput.sendKeys(searchStr);
        searchBtn1.submit();
    }
}

2、測試用例。測試用例中使用Page類，僅驗證必要的部分，增加了可重用性。而在Page類中，封裝了大量的細節，使得測試用例簡潔明了。

public class SortAndSearchTest extends BaseTest{
    @Test
    public void testSortAndSearch(){
        SortSearchPage sortSearchPage = page.goToSortSearchPage();
        sortSearchPage.sortItems();
        sortSearchPage.search("test");
    }
}

五、還有什麼需要我們注意的地方嗎？

1、代碼風格。Page Object不同的實現可能會有一定的差異，但是每個實現的代碼風格是相似的。代碼風格統一，讓別人看代碼更加容易。

2、元素定位方式。在使用Page Object模式時，需要注意使用穩定的定位方式，相對Xpath具有可讀性更好的CSS選擇器，建議優先使用CSS選擇器。

3、Page Object VS Data Driver。Page Object是解決UI自動化測試平穩過渡的好方案，而Data Driver是另一種自動化測試的方案。在使用Data Driver的情況下，我們會使用外部文件來存儲測試數據及其參數，而在使用Page Object的情況下，我們只需要將存儲數據的部分從PageObject分離出來，使代碼更具健壯性和高可維護性。

六、總結

通過Page Object設計模式的使用，可以使測試代碼更加具有可讀性和可維護性。同時它還允許我們將頁面元素和測試邏輯分開，增強了測試的可重用性和穩定性。