PageObject(页面对象)模式是自动化测试中的一个最佳实践,相信很多小伙伴都知道的
接下来就讲解下 Cypress 下如何使用 PO 模式
cmd 窗口进入下面的文件夹
执行下面的命令
npm start
在 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)
}
}
测试用例代码和上面的栗子一样哦!不需要变!
login.js
它也在 pages 文件夹下创建
export default class commanPage {
constructor() {
// 构造函数可以为空
// 如果不为空 应该是所有 page 都会用到的变量
}
isTargetPage() {
cy.url().should('eq', this.url1)
}
}
// 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()
}
}
// 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)
}
}
测试结果和上面的栗子一样