WEB自动化--Page Object 模型

Page Object 模型

概述

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

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

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

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

定义

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

Page类

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

Test类

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

为什么使用Page Object模式

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

Page Object模型优点

主要优点如下所示：

提高代码可复用性

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

提高代码可维护性

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

减少UI对用例造成的影响

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

Page Object示例

演示环境搭建

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

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、在浏览器中访问

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

演示代码

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

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

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

/// <reference types="cypress" />

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，用于存储登录的数据和数据驱动

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

/// <reference types="cypress" />

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)
       });
    });
});

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

---

资源分享

最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走…

现在我邀请你进入我们的软件测试学习交流群：【746506216】，备注“入群”， 大家可以一起探讨交流软件测试，共同学习软件测试技术、面试等软件测试方方面面，还会有免费直播课，收获更多测试技巧，我们一起进阶Python自动化测试/测试开发，走向高薪之路。

喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一 键三连哦！