Nightwatch(PageObject) access elements from different page object

Question

Is there a way to access elements defined in one page object file from another page object file?

Example: If we need to access '@usernameInput' from LoginPage.ts file, do we need to duplicate it from HomePage.ts ? Is there any other way?

HomePage.ts
  const page: PageObject = {
    url: ...,
    commands: [
    enterUsername: (query: string) => {
      return this
        .waitForElementVisible('@usernameInput')
  }],
    elements: {
      usernameInput: {
        locateStrategy: 'xpath',
        selector: '//input[@name="Username"]',
      }
  };

LoginPage.js
  const page: PageObject = {
    url: ...,
    commands: [
    enterUsername: (query: string) => {
      return this
        .waitForElementVisible('@usernameInput')
  }],
    elements: {}
  };

Answer 1

You can access one page object from another by using this.api.page.pageObjectName.

In your example you would just do

const loginPage = this.api.page.loginPage();

And then to get the usernameInput element you can just do this

const usernameInput = loginPage.elements.usernameInput.selector;

So your enterUsername function should look something like the following

enterUsername: (query: string) => {
  const loginPage = this.api.page.loginPage();
  const usernameInput = loginPage.elements.usernameInput.selector;

  return this
    .waitForElementVisible(usernameInput)
    .setValue(usernameInput, query);
}

Answer 2

Use LocalStoreage to keep your data and access in all the page using Javascript or Jquery

Set your Object

localStorage.setItem("PortPlans", PortPlans);

call your localstorage in another page

var PortPlans = localStorage.getItem("PortPlans");

console.log(PortPlans);