Cypress POM approach | How to read fixtures data in POM_Page.js file in cypress

Question

I am new to cypress and trying to create framework on POM. I have followed these steps for creating framework

1. Created Object repository with file named 'locators.json' , data in that file looks like this

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

2. Under Integration>Examples I have created tests named OR_Approch.js which look like

/// <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.And I have created one other folder under Integration>POM which consists all the POMs - one of them named OR_Login.js looks like

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. Under Support commands.js consists custom methods which looks like this

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

So my question is I want to access locators.js data for all the functions in OR_Login.js . I have tried beforeEach method for test files which works fine but when i use it in any class like OR_Login.js it does not work. Please suggest some way so data for fixtures can be read in POM class files.

Answer 1

The beforeEach() way will not work in OR_Login.js because it is not a test file, and mocha is not executing that file.

Instead, you can simply import the JSON file as a variable to OR_Login.js and use that variable.

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

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

If you have dynamic data that will change based on the class, you could also create your class with a constructor that would point it to the correct data in the locators.json file.

All of that being said, Cypress strongly urges you not to use POM with Cypress. If you do choose to continue using the POM with Cypress, I'd highly recommend that all of your functions you execute in a test are contained within the class that executes the code (instead of mixing cy. and your class in the test), as well as look into how you can better chain your command off of one another, so that they are executed in the same cypress command chain.

Answer 2

The problem with using POM with Cypress, it works against the Mocha hooks like beforeEach() which are very useful for readable tests.

But classes have constructors which might be used to fill your 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;

The cy.fixture() is async because it reads a file, so it may be better to use an init() method.

This will be useful for any async commands you have in the 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
  })
})