公开课视频下载地址见文末！
关于Cypress的介绍请自行搜索，不懂的加微信：13401182883
如果你的朋友圈有我，在遇到技术难题的时候会多么Happy！
PageObject（简称PO）设计模式在UI自动化测试中被广泛使用，这里给大家分享一下Cypress中关于PO的具体实现。
基本思路是：针对一个被测页面，设计一个类（class），然后在该类中封装页面上的对象和其常用的操作及业务流程。
以下图的登录页面为例：
忽略验证码，页面上还有四个元素：用户名，密码，登录和登录失败时的提示信息，共4个元素。
为了更好地维护元素的定位属性，将其分离到单独的json文件中，项目结构如图所示：
具体源码如下：
locator.json（元素定位属性）
{"loginpage":{"username": "#account","password": "#password","submit": "input[name=\"submit\"]","prompt": ".error>span"}}
loginpage.js（页面对象类）
import locator from './locator.json'export default class LoginPage {/*** 构造函数*/constructor() {this.url = 'http://121.36.91.190/adminprov.php/Public/login'}// 封装页面对象：用户名，密码，登录按钮，提示信息get username(){return cy.get(locator.loginpage.username)}get password(){return cy.get(locator.loginpage.password)}get submit(){return cy.get(locator.loginpage.submit)}get prompt(){return cy.get(locator.loginpage.prompt)}/*** 打开指定页面*/visit(){cy.visit(this.url)}// 封装常见业务流/*** 登录业务* @param name 用户名* @param pwd 密码*/login(name,pwd){if(name!==""){this.username.type(name)}if(pwd!==""){this.password.type(pwd)}this.submit.click()}}
testLogin.js（测试用例代码）
import LoginPage from "./page/loginpage"context('登录', ()=>{/*** 每次用例执行之前都需要先执行该方法*/beforeEach(()=>{let login = new LoginPage()login.visit()//将页面对象保存到全局环境中，方便测试用例直接引用cy.wrap(login).as('loginInstance')})/*** 正向登录测试用例*/it('输入正确的用户名和密码，可以登录成功',function (){this.loginInstance.login('admin','123456')cy.url().should('contain','/Index/index')})/*** 反向登录测试用例*/it('输入错误的用户名和密码，提示：账户或密码错误',function (){this.loginInstance.login('huice','123456')this.loginInstance.prompt.should('contain','账户或密码错误')})})
Cypress系列免费公开课扫码
自动化测试全栈训练营
必修课
至少32次课，成为大牛就差这一步啦
公开课视频在线观看地址：
https://ke.qq.com/course/3382521?taid=11236815565724921&tuin=3e1d63a
公开课视频下载地址：
链接：https://pan.baidu.com/s/1InKO3b4-nlIECNMuNBcw7Q
提取码：hc66
扫码关注一下呗
