title: Webdriver.io pageObject pattern - define element selector by passing argument
body: <p>I am following the example, in order to define elements within pageObjects, using the ID selector...</p>
  
  <pre><code>var Page = require('./page')
  
  var MyPage= Object.create(Page, {
      /**
       * define elements
       */
      firstName: { get: function () { return browser.element('#firstName-0'); } },
      lastName: { get: function () { return browser.element('#lastName-0'); } },
  
  ...
  </code></pre>
  
  <p>I am looking a way to pass an argument that would allow me to dynamically define the selector.  e.g. <code>'#firstName-0'</code> I would like to have <code>'#firstName-' + i</code> so I could collect multiple first names.</p>
  
  <p>I have tried</p>
  
  <pre><code>firstName: { get: function (i) { return browser.element('#firstName-' + i);}}
  </code></pre>
  
  <p>then within the test..</p>
  
  <pre><code>MyPage.firstName.get(0).setValue('foo');
  </code></pre>
  
  <p>but it complains that <code>get()</code> is not a function.</p>
  
  <p>Doe anyone have any ideas?</p>