标签：username get url Cypress 62 cy PageObject login 页面
如果想从头学起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
PO 模式
PageObject（页面对象）模式是自动化测试中的一个最佳实践，相信很多小伙伴都知道的
PO 模式特征
- 将每个页面（或者待测试对象）封装成一个（class），类里面包含了页面上所有元素及它们的操作方法（单步操作或功能集合）
- 测试代码和被测页面代码解耦，使用 PO 模式后，当页面发生改变，无须改变测试代码，仅改页面代码
接下来就讲解下 Cypress 下如何使用 PO 模式
前期准备
启动 Cypress 提供的演示项目
cmd 窗口进入下面的文件夹
执行下面的命令
npm start
PO 模式代码
简单的 PageObject 模型栗子
待测试页面代码
在 C:\Users\user\Desktop\py\cypress-example-recipes\examples\logging-in__html-web-forms\cypress 文件夹下新建 pages 文件夹，并创建一个 login.js 待测试页面文件，代码如下
// login.js
export default class LoginPage {
constructor() {
this.userName = 'input[name=username]'
this.password = 'input[name=password]'
this.form = 'form'
this.url = 'http://localhost:7077/login'
}
isTargetPage() {
cy.visit('/login')
cy.url().should('eq', this.url)
}
login(username, pwd) {
cy.get(this.userName).type(username)
cy.get(this.password).type(pwd)
cy.get(this.form).submit()
}
}
测试用例文件
在 C:\Users\user\Desktop\py\cypress-example-recipes\examples\logging-in__html-web-forms\cypress\integration 文件夹下，创建一个 testLogin.js 测试用例文件，代码如下
import LoginPage from "../pages/login"
context('登录测试，PO 模式', function () {
const username = 'jane.lane'
const pwd = 'password123'
it('登录成功', function () {
// 创建 po 实例
const loginInstance = new LoginPage()
loginInstance.isTargetPage()
loginInstance.login(username, pwd)
cy.url().should('include', '/dashboard')
});
})
测试结果
总结下
这样的 PageObject 模式代码只是把定位元素的元素定位表达式给剥离出来，并没有针对元素本身进行封装
针对元素本身进行封装的栗子
待测试页面代码
// login.js
export default class LoginPage {
constructor() {
this.userNameLocator = 'input[name=username]'
this.passwordLocator = 'input[name=password]'
this.formLocator = 'form'
this.url = 'http://localhost:7077/login'
}
get username() {
return cy.get(this.userNameLocator)
}
get password() {
return cy.get(this.passwordLocator)
}
get form() {
return cy.get(this.formLocator)
}
isTargetPage() {
cy.visit('/login')
cy.url().should('eq', this.url)
}
login(username, pwd) {
this.username.type(username)
this.password.type(pwd)
this.form.submit()
}
}
跳转页面代码
当登录成功后，页面将跳转至 mainPage 页面，上面只写了 login 页面，这里写下跳转后的页面
// login.js
export default class mainPage{
constructor() {
this.h1Locator = 'h1'
this.url = 'http://localhost:7077/dashboard'
}
get welComeText() {
return cy.get(this.h1Locator)
}
isTargetPage() {
cy.url().should('eq', this.url)
}
}
测试用例代码
context('登录测试，PO 模式', function () {
const username = 'jane.lane'
const pwd = 'password123'
it('登录成功', function () {
// 创建 po 实例
const loginInstance = new LoginPage()
loginInstance.visitPage()
loginInstance.isTargetPage()
cy.login(username, pwd)
cy.url().should('include', '/dashboard')
const manInstance = new mainPage()
manInstance.isTargetPage()
manInstance.welComeText.should('contain', 'jane.lane')
});
})
测试结果
总结下
- login.js 和 mainPage.js 两个页面对象都有一个 isTargetPage() 函数来判断当前页面 URL 是否正确
- 那这里就将每个 page 都共用的部分再次剥离，放到一个新的 common page
- 然后每个 page 都继承自 common page（类似 selenium po 模式的 BasePage）
使用 common page 的栗子
commonPage.js 的代码
它也在 pages 文件夹下创建
export default class commanPage {
constructor() {
// 构造函数可以为空
// 如果不为空 应该是所有 page 都会用到的变量
}
isTargetPage() {
cy.url().should('eq', this.url)
}
}
login.js 的代码
// login.js
import commanPage from "./commonPage";
// 继承 commonPage
export default class LoginPage extends commanPage{
constructor() {
// 调用父类的构造方法
super()
this.userNameLocator = 'input[name=username]'
this.passwordLocator = 'input[name=password]'
this.formLocator = 'form'
this.url = 'http://localhost:7077/login'
}
get username() {
return cy.get(this.userNameLocator)
}
get password() {
return cy.get(this.passwordLocator)
}
get form() {
return cy.get(this.formLocator)
}
visitPage(){
cy.visit('/login')
}
login(username, pwd) {
this.username.type(username)
this.password.type(pwd)
this.form.submit()
}
}
mainPage.js 的代码
// login.js
import commonPage from "./commonPage";
// 继承 commonPage
export default class mainPage extends commonPage {
constructor() {
super()
this.h1Locator = 'h1'
this.url = 'http://localhost:7077/dashboard'
}
get welComeText() {
return cy.get(this.h1Locator)
}
}
测试结果
测试结果和上面的栗子一样
Cypress 使用 PO 模式的总结
- Cypress 完全支持 PageObject 模式
- 但存在一个问题，如果一个测试需要访问多个页面对象，就意味着测试中要初始化多个页面对象实例（new Page()）
- 如果一个页面对象需要登录才能访问（大部分场景都是这样），则每次初始化都需要先登录再访问（只有登录后才能重用 cookie），这无形增加了测试运行的时间
- Cypress 不认为 PO 模式是一个好模式，它认为跨页面共享逻辑是一个反逻辑，因为 Cypress 的实现原理与其他工具完全不同
- 那 Cypress 用什么方式来替代 PO 模式呢？答案就是下一篇要讲到的 Custom Commons
标签：username,get,url,Cypress,62,cy,PageObject,login,页面 来源： https://blog.51cto.com/u_12020737/2838198
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。