Cypress POM 方法 | 如何在賽普拉斯的 POM_Page.js 文件中讀取燈具數據

Question

我是 cypress 的新手，正在嘗試在 POM 上創建框架。 我已按照這些步驟創建框架

1. 使用名為“ locators.json”的文件創建了 Object 存儲庫，該文件中的數據如下所示

{
    "RxClaims_LoginPage":
    {
        "UserName":"#f0",
        "Password":"#f1",
        "SignInButton":"#xlg0003"
    }
}

2. 在 Integration>Examples 下，我創建了名為OR_Approch.js的測試，它看起來像

/// <reference types="Cypress" />

import ORLoginPage from '../PageObjects/OR_Login'

describe('OR_Approach',function(){

    it('RxClaimsLogin', function()  {
        const login = new ORLoginPage();
        cy.visit('/')
        cy.wait(2000)
        login.EnterData_In_UserName()
        login.Password()
        login.SignInButton()
      })

})

3.我在 Integration>POM 下創建了另一個文件夾，其中包含所有 POM - 其中一個名為OR_Login.js看起來像

class ORLoginPage{


    EnterData_In_UserName()
    {
        cy.fixture('example').then(function (dataJson) {
            this.testData = dataJson;
        })
        cy.fixture('locators').then(function (oRdata) {
            this.objRep = oRdata;
        })  
        cy.enterDatainTextBox(this.objRep.RxClaims_LoginPage.UserName,this.testData.UserName)
        return this
    }  
    Password(){
        return 'cy.enterDatainTextBox(this.objRep.RxClaims_LoginPage.Password,this.testData.Password)'
    }
    SignInButton(){
        return 'cy.clickOnObject(this.objRep.RxClaims_LoginPage.SignInButton)'
    }

}
export default ORLoginPage;

4. 在 Support commands.js下包含如下所示的自定義方法

 Cypress.Commands.add('enterDatainTextBox', (textBoxElePath, textValue) => { 
 
     cy.get(textBoxElePath).type(textValue)
  })

所以我的問題是我想訪問 or_Login.js 中所有函數的locators.js數據。 我已經嘗試過用於測試文件的beforeEach方法，它工作正常但是當我在任何 class 中使用它時，比如OR_Login.js它不起作用。 請建議一些方法，以便可以在 POM class 文件中讀取燈具數據。

Answer 1

beforeEach()方法在OR_Login.js中不起作用，因為它不是測試文件，mocha 不執行該文件。

相反，您可以簡單地將 JSON 文件作為變量導入OR_Login.js並使用該變量。

// OR_Login.js
const locators = require('./path/to/locators.json');

class ORLoginPage {
...
Password(){
        return cy.enterDatainTextBox(locators.RxClaims_LoginPage.Password,locators.Password)
    }
...
}

如果您有將根據 class 更改的動態數據，您還可以使用構造函數創建 class，將其指向locators.json文件中的正確數據。

綜上所述， 賽普拉斯強烈建議您不要將 POM 與賽普拉斯一起使用。 如果您確實選擇繼續將 POM 與 Cypress 一起使用，我強烈建議您在測試中執行的所有函數都包含在執行代碼的 class 中（而不是在測試中混合cy.和您的 class），以及研究如何更好地將命令彼此鏈接起來，以便它們在同一個 cypress 命令鏈中執行。

Answer 2

將 POM 與 Cypress 一起使用的問題是，它與像beforeEach()這樣的 Mocha 掛鈎一起工作，這對於可讀測試非常有用。

但是類有構造函數可以用來填充你的this.testData 。

class ORLoginPage{

  constructor() {
    cy.fixture('example').then(function (dataJson) {
      this.testData = dataJson;
    })
    cy.fixture('locators').then(function (oRdata) {
      this.objRep = oRdata;
    })  
  }

  EnterData_In_UserName() {
    cy.enterDatainTextBox(this.objRep.RxClaims_LoginPage.UserName, this.testData.UserName)
    return this
  }  

  Password() {
    ...
  }

  SignInButton(){
    ...
  }

}
export default ORLoginPage;

cy.fixture()是異步的，因為它讀取文件，因此最好使用init()方法。

這對於 POM 中的任何異步命令都非常有用。

class ORLoginPage{

  init() {
    return new Promise((resolve, reject) => {
      cy.fixture('example').then(function (exampleData) {
        this.testData = exampleData
        cy.fixture('locators').then(function (locatorData) {
          this.objRep = locatorData;
          resolve(true)
        })
      })
    }
  }
  ...

/// <reference types="Cypress" />

import ORLoginPage from '../PageObjects/OR_Login'

describe('OR_Approach',function(){

  it('RxClaimsLogin', async function()  {  // add async to the test

    const login = new ORLoginPage();
    await login.init()

    cy.visit('/')
    cy.wait(2000)
    login.EnterData_In_UserName()
    login.Password()
    
    await login.SignInButton()   // may be useful to await other async methods
  })
})