在上一篇文章中，我們運行了一個小的demo，這一篇，我們講一下如何將測試用例做成PO模型，並輸出一份簡單的測試報告。

1. 首先是工程目錄結構，如下圖所示（使用VSCode開啟）：
   
   其中node_modules中包含執行指令碼安裝的庫等；pageobjects中包含所有頁面元素及方法，其中page.js為所有頁面的父類，可將所有頁面的相同方法寫在這裡，在子類繼承或重寫；test中包含所有的測試用例
2. 頁面元素的內容
   （1）庫包含及引數定義部分
   
   （2）定義頁面元素，即將元素的selector寫在對應的元素，其selector寫法見webdriver.io（上一篇文章已經寫到）
   
   （3）定義頁面方法，這裡定義了三個方法：
   login：使用者登入；run：啟動桌面版程式；quit：退出程式
   
3. 測試用例，已經定義了頁面元素，如何使用頁面定義的元素和方法來寫自動化測試用例呢，接下來就是測試用例部分，我寫的測試用例就是一個簡單的登入
   （1）庫包含及頁面包含，下圖中包含了測試用例用到的庫及頁面，如HomePage就是home.page的一個物件，使用HomePage即可呼叫home.page.js中定義的元素和方法；TradePage同理
   
   （2）測試用例——使用頁面的方法，圖中使用HomePage.run和HomePage.login即可呼叫home.page.js頁面中定義的方法。
   
   （3）測試用例——業務邏輯主體，對元素進行操作及加適當的等待（我還不知道如何在操作元素之間增加一段固定延時，如果有誰知道的話，可以留言交流一下☺）
   
4. 最後就是輸出測試報告
   （1）使用mochawesome庫輸出測試報告，在cmd中輸入以下程式碼全域性安裝

cnpm –g install mochawesome

（2）Mochawesome相關設定在如下頁面：https://www.npmjs.com/package/mochawesome
（3）執行測試用例時在後面增加引數即可（下面是一個例子，定義reporter的名字為customReportFilename；重寫定為false，這樣就會生成不同的測試報告而不會把原來的報告給替換），可寫成批處理檔案，點選即可執行（Mochawesome也可以寫程式碼實現，不過我沒研究出來，如果有誰知道的話，可以留言交流一下☺），目前只找到這種方法執行測試用例

mocha test --reporter mochawesome --reporter-options reportFilename=customReportFilename,overwrite=false

（4）按照第（3）步執行就可以在工程目錄下生成一個名為“mochawesome-report”的資料夾，測試報告就在這裡資料夾中，如下圖所示：

（5）簡單測試報告大概的樣子（我目前整不出複雜的……），如下圖所示：