如何在WEB自动化中进行Page Object 模型？

海鸥一飞

Page Object 模型概述

    在针对一个WEB页面编写自动化测试用例时，需要引用页面中的元素（数据）才能进行操作（动作）并显示出页面内容。如果编写的测试用例是直接针对WEB页面元素进行操作，则无法应对经常发生变化的WEB页面，增加日后自动化代码的维护成本。而Page Object模型就是针对WEB页面和元素细节的封装，并对外提供应用级别的API，从而摆脱对WEB页面的高耦合情况。示意图如下所示：

针对以上示例，可以大概总结出大概做法，如下所示：

• 以页面为单位，独立建立模型
• 隐藏实现细节
• 本质是面向接口编程
• 以上示例图片位置：https://martinfowler.com/bliki/PageObject.html
  
  
  

2 定义

    Page Object模型（简称为PO模式）是一种设计模式，其核心是分层，实现松耦合，从而实现代码复用和其易维护性。利用PO模型，为每个网页建立两个类：

• Page类
  
  

    将每个页面封装为Page类，页面元素为Page类成员变量，页面功能为Page类方法里面

• Test类
  
  

    针对Page类定义的测试类，在测试类中调用Page类中方法完成测试。其使用Page类中的方法与页面UI元素进行交互操作。若UI发生变化，仅需要更新Page类，测试类无需要更改。

10.3 为什么使用Page Object模式

    WEB由各种WEB元素（文本框、复选框、多选/单选按钮等）组成。测试代码与这些元素进行交互，如果不能正确管理定位器，则代码的复杂性将成倍增加。当测试代码和定位器的重复使用，将降低代码的可读性，从而进一步加大测试代码的维护成本。 随着项目和需求的不断变化，开发和测试代码的复杂性会不断增加，维护性也随之增加。因此，需要一种方法来解决这种问题，所以我们需要使用PO来尝试解决这一类问题。

4 Page Object模型优点

    主要优点如下所示：

• 提高代码可复用性
  
  

    不同PO类中的Pabe Object方法可以在不同的测试用例中复用，极大提高代码的复用性。

• 提高代码可维护性
  
  

    因测试场景和定位器是代码分开，使代码更加清晰，极大提高代码的可维护性。

• 减少UI对用例造成的影响
  
  

    尽管UI经常发生变更，也仅需要修改少量代码来应对更改，从而减少其带来的影响。

5 Page Object示例1 演示环境搭建

    我们以官方提供的示例为演示，操作步骤如下所示：

• 1、访问官方网址，其网址：https://docs.cypress.io/examples/examples/recipes#Testing-the-DOM
• 2、点击HTML Web Forms跳转到Github创建，下载源码
• 3、将代码放置到指定目录并在当前目录打开终端，执行以下命令，以启动服务
  
  

1. <font size="3">npm install minimist morgan body-parser express-session express hbs --save-dev
   
2. npm start server.js
   
3. </font>

复制代码

• 4、在浏览器中访问
  
  

默认正确的用户名和密码，在server.js中，可以自行修改，如下所示：

2 演示代码

    本代码仅仅是演示在Cypress中的Page Object模式（注意与Selenium的区别），主要示例代码如下所示：

• 1、新建定位器文件loginPageLoctor.json，用于存储元素定位器
  
  

1. <font size="3">{
   
2.    "loginPage":{
   
3.        "username":"input[name=\"username\"]",
   
4.        "passwd":"input[name=\"password\"]",
   
5.        "submit":"button[type=\"submit\"]",
   
6.        "loginFailedPrompt":".error"
   
7.    }
   
8. }
   
9. </font>

复制代码

• 2、新建Page类loginPage.js，用于封装对象和定位元素
  
  

1. <font size="3">/// <reference types="cypress" />
   
2. 
   
3. import LoginPageLocator from "./loginPageLoctor.json"
   
4. 
   
5. export default class LoginPage{
   
6.     constructor(visitUrl){
   
7.        this.url=visitUrl;
   
8.     }
   
9. 
   
10.     get username(){
    
11.         return cy.get(LoginPageLocator.loginPage.username);
    
12.     }
    
13. 
    
14.     get passwd(){
    
15.         return cy.get(LoginPageLocator.loginPage.passwd);
    
16.     }
    
17. 
    
18.     get submit(){
    
19.         return cy.get(LoginPageLocator.loginPage.submit);
    
20.     }
    
21. 
    
22.     get errorPrompt(){
    
23.         return cy.get(LoginPageLocator.loginPage.loginFailedPrompt);
    
24.     }
    
25. 
    
26.     get successUrl(){
    
27.         return cy.url();
    
28.     }
    
29. 
    
30.     visit(){
    
31.        cy.visit(this.url);
    
32.     }
    
33. 
    
34.     login(name,pwd) {
    
35.         if ( name !="" && pwd !=""){
    
36.             this.username.type(name);
    
37.         }
    
38. 
    
39.         if(pwd!=""){
    
40.             this.passwd.type(pwd);
    
41.         }
    
42. 
    
43.         this.submit.click();
    
44.     }
    
45. 
    
46. }
    
47. </font>

复制代码

• 3、新建数据文件loginData.json，用于存储登录的数据和数据驱动
  
  

1. <font size="3">{
   
2. 
   
3.     "success": [
   
4.         {
   
5.             "caseTitle": "正确的用户名和密码，登录成功",
   
6.             "user": "jane.lane",
   
7.             "pwd": "password123",
   
8.             "checkpoint": "/dashboard"
   
9.         }
   
10.     ],
    
11. 
    
12.     "failed": [
    
13.         {
    
14.             "caseTitle": "错误的用户名和正确的密码，登录失败",
    
15.             "user": "Surpass",
    
16.             "pwd": "password123",
    
17.             "checkpoint": "Username and/or password is incorrect"
    
18.         },
    
19.         {
    
20.             "caseTitle": "正确的用户名和错误的密码，登录失败",
    
21.             "user": "jane.lane",
    
22.             "pwd": "Surpass",
    
23.             "checkpoint": "Username and/or password is incorrect"
    
24.         },
    
25.         {
    
26.             "caseTitle": "错误的用户名和错误的密码，登录失败",
    
27.             "user": "Surpass",
    
28.             "pwd": "Surpass",
    
29.             "checkpoint": "Username and/or password is incorrect"
    
30.         }
    
31.     ]
    
32. 
    
33. }
    
34. </font>

复制代码

• 4、新建测试类testLogin.spec.js，测试用例代码
  
  

1. <font size="3">/// <reference types="cypress" />
   
2. 
   
3. import LoginPage from "./loginPage"
   
4. import UserData from "./loginData.json"
   
5. 
   
6. describe('登录测试', () => {
   
7.     let baseUrl = "http://localhost:7077/login";
   
8.     let login = new LoginPage(baseUrl);
   
9.     beforeEach(() => {
   
10.         login.visit(baseUrl);
    
11.     });
    
12. 
    
13.     UserData.success.forEach((item)=>{
    
14.        it(item.caseTitle, () => {
    
15.            login.login(item.user,item.pwd);
    
16.            login.successUrl.should("contain",item.checkpoint)
    
17.        });
    
18.     });
    
19. 
    
20.     UserData.failed.forEach((item)=>{
    
21.        it(item.caseTitle, () => {
    
22.         login.login(item.user,item.pwd);
    
23.         login.errorPrompt.should("contain",item.checkpoint)
    
24.        });
    
25.     });
    
26. });
    
27. </font>

复制代码

最终的运行结果如下所示：