背景

PageObject模式是自动化测试中的一个最佳实践，它具备一下特征：

  • 将每个页面或者待测试对象封装成一个类，类里包括了页面上所有的元素及它们的操作方法
  • 测试代码和被测页面代码解耦

PageObject在Cypress中的应用

以测试kitten为例，首先在cypress文件夹下新建pages文件夹，integration文件夹下新建testcases文件夹，pages文件夹下新建文件commonPage.js

  1. // commonPage.js page公共部分
  3. export default class CommonPage{
  4.     constructor(){
  6.     }
  8.     isTargetPage(){
  9.         cy.visit("https://kitten4.codemao.cn/");
  10.         cy.url().should('eq', this.url);
  11.     }
  12.     }

其次在pages文件夹下新建文件login.js

  1. import CommonPage from './common/commonPage'
  3. export default class LoginPage extends CommonPage {
  4.     constructor() {
  5.         super()
  6.         this.closeguideElement = 'div[data-report-click="新手引导-弹窗-关闭"]'
  7.         this.okElement = 'div[style="border-radius: 16px;"]'
  8.         this.loginBtnElement = 'div[data-report-click="用户信息-登录"]'
  9.         this.usernameElement = 'input[maxlength="100"]'
  10.         this.passwordElement = 'input[type="password"]'
  11.         this.submitBtnElement = 'div[data-report-click="用户信息-密码登录"]'
  12.         this.url = 'https://kitten4.codemao.cn/'
  13.     }
  14.     get closeguide() {
  15.         return cy.get(this.closeguideElement);  // 新手弹窗
  16.     }
  18.     get ok() {
  19.         return cy.get(this.okElement);  // 关闭引导页后，提示引导页路径
  20.     }
  22.     get loginbtn() {
  23.         return cy.get(this.loginBtnElement);    // 点击右上角登陆
  24.     }
  26.     get username() {
  27.         return cy.get(this.usernameElement);    // 输入账号
  28.     }
  30.     get password() {
  31.         return cy.get(this.passwordElement);    // 输入密码
  32.     }
  34.     get submit() {
  35.         return cy.get(this.submitBtnElement);   // 点击登陆
  36.     }
  40.     login(username, password) {
  41.         this.closeguide.click();
  42.         this.ok.click();
  43.         this.loginbtn.click();
  44.         this.username.type(username);
  45.         this.password.type(password);
  46.         this.submit.click()
  47.     }
  48. }

最后在testcases文件夹下新建文件testLogin.js

  1. ///<reference types='cypress' />
  2. import LoginPage from '../../../page/login'
  4. describe('kitten登陆测试', function(){
  5.     const username = xxxxxx;
  6.     const password = 111111;
  8.     it('测试登陆成功', function(){
  9.         const logininstance = new LoginPage()
  10.         logininstance.isTargetPage();
  11.         logininstance.login(username, password);
  12.         cy.url().should('include', 'https://kitten4.codemao.cn/')
  13.     });
  14. });