---
title: Page Object Model Using SideeX
tags: Chinese
---

# 頁面物件模型(Page Object Model)

由於現代Web應用程式快速發展的趨勢，Web元素經常在發布週期中發生變化，從而導致測試案例常須大幅度修改。在下面的範例中，假設一個註冊頁面UI常須更改，輸入欄位元素的定位器(id或XPath)也可能會更改，結果將造成與這些元素相關的所有測試案例都將失效，要一一修復這些元素定位器與測試案例是一項非常繁瑣且耗時的工作。比較有效率的方式是使用頁面物件模型(POM)來解決此問題，但大多數POM的實現都是使用程式語言編寫的。本文將介紹如何在不撰寫任何程式碼的情況下使用SideeX實現POM。

<img src="https://i.imgur.com/4Ps8vdr.png" style="width:50%">

四個輸入元素如下：

<input id="first_name">
<input id="last_name">
<input id="company_name">
<input id="company_zipcode">

:::info
- 範例網址：https://sideex.github.io/sideexdemo/pom/signup-demo
- 範例測試案例檔：https://github.com/SideeX/sideexdemo/tree/master/docs/pom
:::
---

## 先定義一個頁面物件(Page Object)
概念上，一個頁面物件代表一個網頁或網頁的一部分。基本上，一個頁面物件包含一群Web元素（如同物件導向概念中的屬性）和動作（方法），一個動作即是作用於元素上的一系列指令。在SideeX中，一個頁面物件可以被實作為一個測試套件，其中包含許多定義其元素和動作的測試案例。

:::info
- 一個頁面物件被定義為一個測試套件
- 元素或動作被分別定義為一個個的測試案例
:::

### 頁面物件中的Web元素(Element)
首先，建立一個測試套件`SignUpPageObject`來代表一個頁面物件，並加入一個測試案例`Elements_Name`。該測試案例目的在透過`store`指令定義兩個變數，這些變數用來記錄First Name與Last Name輸入欄位的定位器，定位器的值可以使用`Select Target`功能來自動生成（`Target`輸入欄位右側的箭頭符號按鈕）。在此範例中，變數`first_name_element`用來記錄First Name輸入欄位元素的定位器，而變數`last_name_element`則記錄Last Name輸入欄位元素的定位器。以相同的方式，可建立另一個測試案例`Elements_Company`來記錄Company Name與Zipcode輸入欄位元素的定位器。


### 頁面物件中的動作(Action)

在為元素定義變數之後，我們將建立另外兩個測試案例用以定義填寫表單的動作。為了輸入First Name和Last Name，我們首先使用`INCLUDE`指令來引用`Elements_Name`測試案例中定義的變數，然後使用`sendKeys`指令為此兩個元素填入值，這些值可再由另外兩個變數`first_name_value`和`last_name_value`(定義於`Global Var`面板)動態取得。同樣，建立另一個測試案例`Action_EnterCompany`，用於輸入Company Name和Zipcode。


:::info
`SignUpPageObject`測案套件之語意等同於底下物件導向程式語言程式碼

class SignUpPageObject{

  var first_name_element = "id=first_name"; 
  var last_name_element = "id=last_name"; 
  var company_name_element = "id=company_name"; 
  var company_zipcode_element = "id=company_zipcode"; 


  function Action_EnterName(var first_name_value, var last_name_value){
    sendKeys(first_name_element, first_name_value);
    sendKeys(last_name_element, last_name_value);
  }

  function Action_EnterCompany(var company_name_value, var company_zipcode_value){
    sendKeys(company_name_element, company_name_value);
    sendKeys(company_zipcode_element, company_zipcode_value);
  }

}

:::

## 開始使用頁面物件
在`SignUpPageObject`定義完成後，我們可以透過引用這個頁面物件中的動作來建立測試案例`SignUpTest`：1）透過`open`指令連至此Signup頁面；2）透過引用`Action_EnterName`來填寫First Name與Last Name；3）透過引用`Action_EnterCompany`來填寫Company Name和Zipcode。同時，在`Global Var`面板中，我們定義了四個變數及其初始值作為這兩個動作的輸入。


## 執行結果
當執行`SignUpTest`測試案例時，在`Global Var`面板中的變數將先被讀取，接著兩個動作測試案例將被引用與執行，在這些動作執行期間，`Elements_Name`與`Elements_Company`測試案例亦將被執行。


<img src="https://i.imgur.com/tu7ofiI.png" style="width:50%">

## 建立更多具彈性的測試案例
善用`INCLUDE`指令，你可以重複使用頁面物件模型中的動作，建立出更多的測試案例，這些測試案例將更具彈性，網頁元素與動作流程的變更將僅限於頁面物件模型範圍內修改。

:::info
在SideeX中，`INCLUDE`與變數是建立頁面物件模型中的要素。
:::