10 Page Object 模型

10.1 概述

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

1001PageObject.png

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

以页面为单位，独立建立模型
隐藏实现细节
本质是面向接口编程

以上示例图片位置：https://martinfowler.com/bliki/PageObject.html

10.2 定义

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

Page类

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

Test类

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

10.3 为什么使用Page Object模式

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

10.4 Page Object模型优点

主要优点如下所示：

提高代码可复用性

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

提高代码可维护性

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

减少UI对用例造成的影响

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

10.5 Page Object示例

10.5.1 演示环境搭建

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

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

npm install minimist morgan body-parser express-session express hbs --save-dev
npm start server.js

4、在浏览器中访问

1002访问测试环境.png

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

1003默认的用户名和密码.png

10.5.2 演示代码

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

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

{
   "loginPage":{
       "username":"input[name=\"username\"]",
       "passwd":"input[name=\"password\"]",
       "submit":"button[type=\"submit\"]",
       "loginFailedPrompt":".error"
   }
}

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

/// 

import LoginPageLocator from "./loginPageLoctor.json"

export default class LoginPage{
    constructor(visitUrl){
       this.url=visitUrl;
    }

    get username(){
        return cy.get(LoginPageLocator.loginPage.username);
    }

    get passwd(){
        return cy.get(LoginPageLocator.loginPage.passwd);
    }

    get submit(){
        return cy.get(LoginPageLocator.loginPage.submit);
    }

    get errorPrompt(){
        return cy.get(LoginPageLocator.loginPage.loginFailedPrompt);
    }

    get successUrl(){
        return cy.url();
    }

    visit(){
       cy.visit(this.url);
    }

    login(name,pwd) {
        if ( name !="" && pwd !=""){
            this.username.type(name);
        }

        if(pwd!=""){
            this.passwd.type(pwd);
        }

        this.submit.click();
    }

}

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

{

    "success": [
        {
            "caseTitle": "正确的用户名和密码，登录成功",
            "user": "jane.lane",
            "pwd": "password123",
            "checkpoint": "/dashboard"
        }
    ],

    "failed": [
        {
            "caseTitle": "错误的用户名和正确的密码，登录失败",
            "user": "Surpass",
            "pwd": "password123",
            "checkpoint": "Username and/or password is incorrect"
        },
        {
            "caseTitle": "正确的用户名和错误的密码，登录失败",
            "user": "jane.lane",
            "pwd": "Surpass",
            "checkpoint": "Username and/or password is incorrect"
        },
        {
            "caseTitle": "错误的用户名和错误的密码，登录失败",
            "user": "Surpass",
            "pwd": "Surpass",
            "checkpoint": "Username and/or password is incorrect"
        }
    ]

}

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

/// 

import LoginPage from "./loginPage"
import UserData from "./loginData.json"

describe('登录测试', () => {
    let baseUrl = "http://localhost:7077/login";
    let login = new LoginPage(baseUrl);
    beforeEach(() => {
        login.visit(baseUrl);
    });

    UserData.success.forEach((item)=>{
       it(item.caseTitle, () => {
           login.login(item.user,item.pwd);
           login.successUrl.should("contain",item.checkpoint)
       });
    });

    UserData.failed.forEach((item)=>{
       it(item.caseTitle, () => {
        login.login(item.user,item.pwd);
        login.errorPrompt.should("contain",item.checkpoint)
       });
    });
});

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

1004PageObject运行结果.png

WEB自动化-10-Page Object 模型