title: Nightwatch how can I make element selector visible within a command?
body: <p>I am writing a test in Nightwatch to test pagination for a grid. I am using Page Objects and element selectors to make maintenance of the test suite easier. It seems, however, that I have run into a limitation with using element selectors within commands. The following code executes without error:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    pagination() {
        var lastPageNum;
        var currentPageNum;
        var newPageNum
        return this
        .getText('@pageNum1', function(result) {
          currentPageNum = parseInt(result.value);
          console.log('Current Page Number = ' + currentPageNum);
        })
        .getText('@pageNum2', function(result) {
          lastPageNum = parseInt(result.value);
          console.log('last Page Number = ' + lastPageNum);
          if (lastPageNum &gt;= 2) {
            this.useXpath()
              .waitForElementVisible('//*[@id="borderLayout_eRootPanel"]/div[2]/div/div/span[2]/button[3]', 3000)            
              .click('//*[@id="borderLayout_eRootPanel"]/div[2]/div/div/span[2]/button[3]')
              .getText('//*[@id="borderLayout_eRootPanel"]/div[2]/div/div/span[2]/span[1]', function(result) {
                newPageNum = parseInt(result.value);
                console.log('New Page = ' + newPageNum);
                this.assert.equal(newPageNum, currentPageNum + 1, "Assert pagination to Next page passed.");
              })
          } else {
            console.log('Not enough rows exist in grid to test pagination, pages = ' + lastPageNum)
          }
        })
      },</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note that I am using element selectors for the .getText commands. Here are the selectors I am using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      pageNum1: {
          selector: '//*[@id="borderLayout_eRootPanel"]/div[2]/div/div/span[2]/span[1]',
          locateStrategy: 'xpath'
        },
  
        pageNum2: {
          selector: '//*[@id="borderLayout_eRootPanel"]/div[2]/div/div/span[2]/span[2]',
          locateStrategy: 'xpath'
        },</code></pre>
  </div>
  </div>
  </p>
  
  <p>So far, so good. The issue I am running into is when I attempt to replace the xpath elements inside the .getText command with element selectors as well. Here is the code I am attempting to replace the above with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>pagination() {
        var lastPageNum;
        var currentPageNum;
        var newPageNum
        return this
        .getText('@pageNum1', function(result) {
          currentPageNum = parseInt(result.value);
          console.log('Current Page Number = ' + currentPageNum);
        })
        .getText('@pageNum2', function(result) {
          lastPageNum = parseInt(result.value);
          console.log('last Page Number = ' + lastPageNum);
          if (lastPageNum &gt;= 2) {
            this.useXpath()
              .waitForElementVisible('@nextPageButton', 3000)            
              .click('@nextPageButton')
              .getText('@pageNum1', function(result) {
                newPageNum = parseInt(result.value);
                console.log('New Page = ' + newPageNum);
                this.assert.equal(newPageNum, currentPageNum + 1, "Assert pagination to Next page passed.");
              })
          } else {
            console.log('Not enough rows exist in grid to test pagination, pages = ' + lastPageNum)
          }
        })
      },</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the additional element selector I am using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      nextPageButton: {
          selector: '//*[@id="borderLayout_eRootPanel"]/div[2]/div/div/span[2]/button[3]',
          locateStrategy: 'xpath'
        },</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I try to run the test after replacing the xpaths in the .getText command with element selectors, the test fails with the following error:</p>
  
  <pre><code>Timed out while waiting for element &lt;@NextPageButton&gt; to be present for 3000 milliseconds.  - expected "visible" but got: "not found"
  </code></pre>
  
  <p>Is there a way to get the element selector to be visible within the .getText command function?</p>