Cypress的PO模型剥离元素定位器
首先在项目的Cypress路径下创建新的pages目录，然后在该目录下创建新的JS文件。 名字是login.js
//log in.jsexportdefaultclassloginpage { constructor (} { this.username=' input [ name=username ] ' this.password password(cy.get(this.username ).type (username ) cy.get ) this.password (.type ) password (cy.get ) ) this
//testlog in.js//reference types=' cypress '/importloginpagefrom ' ./pages/log in ' describe (登录测试， PageObject function () { const username='davie .干净的篮球' const password='干净的篮球dawei' it )、'成功登录'、 function () page对象实例constlogininstance=new logi npage ) (loginInstance.isTargetPage ) (logininstance.login ) )
//log in.jsexportdefaultclassloginpage { constructor (} { this.username locator=' input [ name=username ] ' this.pame ' this.form locator=' form ' this.URL=' http://localhost 33607077/log in ' } getusername ({返回cy.get ) { return cy.get (this.password locator ) }get form ) ) return cy.get (this.form locator ) }isTargetPage ) cy.vit thit passWord ) this.username.type(username ) this.password.type password ) this.this ) )。
//main page.jsexportdefaultclassmainpage { constructor (} { this.h1 locator=' h1 ' this.URL=' http://localhost 33607000000
//testlog in.js//reference types=' cypress '/importloginpagefrom ' ./pages/log in ' importmainpagefrom ' ./pagefrom function((constusername='Davie .干净篮球' const password='干净篮球dawei' it )登录成功)， 函数(constlogininstance=new logi npage ) loginInstance.isTargetPage ) logininstance.login ) username， passw wage '/dashboard ' (constmaininstance=new main page (main instance.istar getpage ) main instance.welcome text.shoull
//common page.jsexportdefaultclasscommonpage { constructor ()//构造函数可以为空。 如果不是//空，则应该是所有page中使用的变量。 } isTargetPage () { cy.url ).should )、this.url然后更新login.js文件
//log in.jsimportcommonpagefrom './common page ' exportdefaultclassloginpageextendscommonpage { constructor (this.users )用户' this.password locator=' input [ name=password ] ' this.form locator=' form ' this.URL=' http://localhost 33607077/{ return cy.get (this.password locator ) } get form ) ) return cy.get (this.form locator ) } visitPage ) {cy.visit} password(this.username.type ) username (this.password.type (password ) this.form.submit ) pages文件夹下的maii )
importcommonpagefrom './common page ' exportdefaultclassmainpageextendscommonpage { constructor } { super } this.h1定位器
Cypress模式的弊端在于，如果一个测试需要访问多个页面对象，则必须在测试过程中初始化多个页面对象的实例。 如果大多数页面对象需要登录才能访问，则每次初始化前都必须登录才能访问。 由于登录后可以重用cookie，因此测试运行时间肯定会很长
因此，Cypress认为PO不是一个好模式。 Cypress认为在页面之间共享逻辑是一种反模式。 Cypress提供了多种方法，允许用户以更简单的方式直接设置在受测APP应用程序中完成的等待测试的状态。 这种更简单的方法不需要在多个页面上多次执行通用操作