calling variables from different commands in cypress page object modal tests

Question

I am using Cypress with page object model in my project.

I have 2 commands in homepage.js :

One to get custId from header section & the other to get custId on footer of the page.

Now I need to check if these two custId match. how can I achieve this as the scope of variables are limited to there respective then blocks.

HomePage.js

--------Command 1-------------------

getcustomerIdOnHeaderSection()

{
     cy.get(custId locator).then($id =>{

     var headerCustomerid = $id.text().trim();

})

}

----------------command 2------------------------

getcustomerIdOnFooterSection()

{
     cy.get(custId locator).then($id =>{

     var footerCustomerid = $id.text().trim();

})

}

I want to check headerCustomerid == footerCustomerid

SuchAnIgnorantThingToDo-UKR · Accepted Answer · 2023-06-08 00:53:50Z

A page object is a class, which can have properties of it's own. You can make header and footer custid's as properties, and compare them as suits your test flow.

Option 1 - Save the values as class variables

class HomePage{
  constructor() {
    this.headerCustomerid = null;
    this.footerCustomerid = null;
  }

  getcustomerIdOnHeaderSection() {
    cy.get(custId locator).then($id => {
      this.headerCustomerid = $id.text().trim();
    })
  }

  getcustomerIdOnFooterSection() {
    cy.get(custId locator).then($id => {
      this.footerCustomerid = $id.text().trim();
    })
  }
}

// test
const homePage = new HomePage();

homePage.getcustomerIdOnHeaderSection()
homePage.getcustomerIdOnFooterSection()

cy.then(() => {
  expect(homePage.headerCustomerid).to.eq(homePage.footerCustomerid)
})

Option 2 - Create a new method to compare

class HomePage{
  constructor() {
    this.headerCustomerid = null;
    this.footerCustomerid = null;
  }

  getcustomerIdOnHeaderSection() {
    cy.get(custId locator).then($id => {
      this.headerCustomerid = $id.text().trim();
    })
  }

  getcustomerIdOnFooterSection() {
    cy.get(custId locator).then($id => {
      this.footerCustomerid = $id.text().trim();
    })
  }

  compareHeaderFooterCustId() {
    this.getcustomerIdOnHeaderSection()
    this.getcustomerIdOnFooterSection()
    expect(this.headerCustomerid).to.eq(this.footerCustomerid)
  }
}

// test
const homePage = new HomePage();

homePage.compareHeaderFooterCustId()

Option 3 - Compare in constructor

class HomePage{
  constructor() {
    getcustomerIdOnHeaderSection()
    getcustomerIdOnFooterSection()
  }

  getcustomerIdOnHeaderSection() {
    cy.get(custId locator).then($id => {
      this.headerCustomerid = $id.text().trim();
    })
  }

  getcustomerIdOnFooterSection() {
    cy.get(custId locator).then($id => {
      this.footerCustomerid = $id.text().trim();
    })
  }
}

// test
const homePage = new HomePage();

cy.then(() => {
  expect(homePage.headerCustomerid).to.eq(homePage.footerCustomerid)
})

agoff · Accepted Answer · 2023-06-07 15:17:58Z

0

Returning the cy chains will yield Chainable<String> variables. You can easily compare these like you would other elements.

// HomePage.js
getcustomerIdOnHeaderSection(){
  return cy.get('foo').invoke('text').invoke('trim');
}

getcustomerIdOnFooterSection() {
  return cy.get('bar').invoke('text').invoke('trim');
}

// Test.js
it('tests', () => {
  const hp = new HomePage();
  hp.getcustomerIdOnHeaderSection().then(($headerText) => {
    hp.getcustomerIdOnFooterSection().should('have.text', $headerText);
  });
});

answered Jun 7, 2023 at 15:17

agoff

7,1501 gold badge10 silver badges27 bronze badges

3 Comments

Rahul Over a year ago

Lets say I have another function/command searchCustomerWithCustID(custId) { cy.get('searchBar).type(custId) return this } How can I pass same custId as a parameter to another command

agoff Over a year ago

Where is custId coming from?

Rahul Over a year ago

custId will be same as getcustomerIdOnHeaderSection()

Collectives™ on Stack Overflow

calling variables from different commands in cypress page object modal tests

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related