I am currently in the process of testing a Vue application. I have developed 2 simple page objects and created 2 simple spec files to run the end-to-end test. The first test (login) passes without any issues, however, the second test fails with the following error message:

Error: No selector property for element "client" Instead found properties: capabilities,globals,sessionId,options,launchUrl,launch_url,screenshotsPath,Keys,session,sessions,timeouts,timeoutsAsyncScript,timeoutsImplicitWait,elemen t,elementIdElement,elements,elementIdElements,elementActive,elementIdAttribute,elementIdClick,elementIdCssProperty,elementIdDisplayed,elementIdLocationInView,elementIdLocation,elementIdName,elementIdClear,elementIdSelected,elemen tIdEnabled,elementIdEquals,elementIdSize,elementIdText,elementIdValue,submit,source,contexts,currentContext,setContext,getOrientation,setOrientation,moveTo,doubleClick,mouseButtonClick,mouseButtonDown,mouseButtonUp,execute,execut eAsync,execute_async,frame,frameParent,window,windowHandle,windowMaximize,window_handle,windowHandles,window_handles,windowSize,windowPosition,refresh,back,forward,screenshot,url,status,title,keys,cookie,acceptAlert,accept_alert, dismissAlert,setAlertText,getAlertText,dismiss_alert,sessionLog,sessionLogTypes,click,clearValue,getAttribute,getCssProperty,getElementSize,getLocation,getLocationInView,getTagName,getText,getValue,isVisible,moveToElement,setValu e,submitForm,sendKeys,switchWindow,resizeWindow,setWindowPosition,maximizeWindow,saveScreenshot,getTitle,closeWindow,init,urlHash,getCookies,getCookie,setCookie,deleteCookie,deleteCookies,injectScript,getLogTypes,getLog,isLogAvai lable,waitForElementNotPresent,waitForElementNotVisible,waitForElementPresent,waitForElementVisible,end,pause,perform,useCss,useRecursion,useXpath,page,expect,assert,verify,currentTest,parent,name at new Element (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\element.js:11:11) at C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page-utils.js:39:35 at Array.forEach (native) at C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page-utils.js:35:24 at Array.forEach (native) at module.exports.createElements (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page-utils.js:34:14) at Object.Page (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\page-object\page.js:19:6) at Object.parent.(anonymous function) [as tenant] (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\core\api.js:469:16) at Object.before (C:/aquaprojects/src/bitbucket.org/scalock/tenantmanager/client/test/e2e/specs/tenants.spec.js:7:26) at Object. (C:\aquaprojects\src\bitbucket.org\scalock\tenantmanager\client\node_modules\nightwatch\lib\util\utils.js:35:8)

login.js:

module.exports = {
  url: 'http://localhost:8080/#/login',
  elements: {
    app: '#app',
    loginSection: '.login-page',
    title: 'h3',
    submitButton: '.btn-primary',
    username: '#username',
    password: '#password'
  }
}

login.spec.js:

let login = null
module.exports = {
  before: function (client) {
    console.log('*********** Init login page *******************')
    login = client.page.login()
  },
  'open login page': function () {
    login
      .navigate()
      .waitForElementVisible('@app', 5000)
      .assert.elementPresent('@loginSection')
      .assert.containsText('@title', 'Tenant Manager Login')
  },
  'try to login': function () {
    login.setValue('@username', 'administrator')
    login.setValue('@password', '1234')

    login.click('@submitButton')
    login.waitForElementNotPresent('@submitButton')
  },
  after: function (client) {
    client.end()
  }
}

The first test passes successfully, while the second one - which is essentially a copy/paste with a few modifications - fails on this line:

tenant = client.page.tenant()

tenant.js:

module.exports = {
  url: 'http://localhost:8080/#/tenants',
  elements: {
    tab: '#tenants',
    tenantsFilter: '.tenants-filter input',
    statusFilter: '.status-filter input',
    add: '.add-tenant'
  }
}

tenants.spec.js:

let tenant = null
module.exports = {
  before: function (client) {
    console.log('*********** Init tenant page *******************')
    tenant = client.page.tenant()
  },
  'open tenant page': function () {
    console.log('*********** Navigating to tenant page *******************')
    tenant
      .navigate()
      .waitForElementVisible('@tab', 5000)
      //.assert.elementPresent('@tenantsFilter') <-- commented out assertion causing failure
  },
  after: function (client) {
    client.end()
  }
}

nightwatch.conf.js:

require('babel-register')
var config = require('../../config')

// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
  src_folders: ['test/e2e/specs'],
  output_folder: 'test/e2e/reports',
  custom_assertions_path: ['test/e2e/custom-assertions'],
  "page_objects_path" : "test/e2e/pages",
  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 4444,
    cli_args: {
      'webdriver.chrome.driver': require('chromedriver').path
    }
  },

  test_settings: {
    default: {
      selenium_port: 4444,
      selenium_host: 'localhost',
      silent: true,
      globals: {
        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
      }
    },

    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    },

    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    }
  }
}