WEB自动化--Page Object 模型

- 日理万妓 2023-09-26 08:47 59阅读 0赞

### Page Object 模型 ###

### 概述 ###

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

![在这里插入图片描述][8442040612b44adca9047b3558f65f84.png]

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

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

以上示例图片位置：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、在浏览器中访问

![在这里插入图片描述][c03b7a346613488e91f4d68b36a0350b.png]

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

![在这里插入图片描述][b1a3174fc5ed417d8767f8ce3a94e08f.png]

### 演示代码 ###

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

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

![在这里插入图片描述][0ec6b636937b41d39b74dbf89fb324fc.png]

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

![在这里插入图片描述][b52ca05ac9fb440488c736ef5a2c0552.png]

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

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

![在这里插入图片描述][f9f455fa66984e83a0d614a22b363eeb.png]

--------------------

### 资源分享 ###

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

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

**喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一 键三连哦！**  
![在这里插入图片描述][e5839dcedca14117aff9fd1945058bd6.gif_pic_center]

[8442040612b44adca9047b3558f65f84.png]: https://img-blog.csdnimg.cn/8442040612b44adca9047b3558f65f84.png
[c03b7a346613488e91f4d68b36a0350b.png]: https://img-blog.csdnimg.cn/c03b7a346613488e91f4d68b36a0350b.png
[b1a3174fc5ed417d8767f8ce3a94e08f.png]: https://img-blog.csdnimg.cn/b1a3174fc5ed417d8767f8ce3a94e08f.png
[0ec6b636937b41d39b74dbf89fb324fc.png]: https://img-blog.csdnimg.cn/0ec6b636937b41d39b74dbf89fb324fc.png
[b52ca05ac9fb440488c736ef5a2c0552.png]: https://img-blog.csdnimg.cn/b52ca05ac9fb440488c736ef5a2c0552.png
[f9f455fa66984e83a0d614a22b363eeb.png]: https://img-blog.csdnimg.cn/f9f455fa66984e83a0d614a22b363eeb.png
[cd053d4700c84446ae949c6966d929a5.png_pic_center]: https://img-blog.csdnimg.cn/cd053d4700c84446ae949c6966d929a5.png#pic_center
[e5839dcedca14117aff9fd1945058bd6.gif_pic_center]: https://img-blog.csdnimg.cn/e5839dcedca14117aff9fd1945058bd6.gif#pic_center