title: How to use elements returned from browser.elements()?
body: <p>The following code is designed to gather the elements having their <code>href attribute</code> beginning with "/assets/css/" as per <a href="http://webdriver.io/api/protocol/elements.html" rel="nofollow">this</a>.
  Yet the first attempt to access either <code>browser.elementIdAttribute(iter1, 'href').value</code> or <code>browser.elementIdAttribute(iter1, 'href')</code> crashes with the following error</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'value' of undefined</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>var styleSheetsElems = browser.elements('[href^="/assets/css/"]').value; 
  
  for (let iter1 in styleSheetsElems)
  { 
      console.log( browser.elementIdAttribute(iter1, 'href').value );
  };
  </code></pre>
  
  <ul>
  <li>Here I can see that the elements exist( I can traverse the Array though I don't try to print).</li>
  </ul>
  
  <p>My understanding is that <strong><em>The populating of <code>styleSheetsElems</code> should vouch for the elements existing and having an href ...</em></strong> </p>
  
  <p>printing .<code>elements('[xyz]')</code> results in </p>
  
  <pre><code>{ state: 'success',
    sessionId: '652f9f1c-6cad-42d7-89a3-e09a1acbd1af',
    hCode: 1951176523,
    value: 
    [{ ELEMENT: '11' },
     { ELEMENT: '12' },
     { ELEMENT: '88' }],
    class: 'org.openqa.selenium.remote.Response',
    selector: '[xyz]',
    _status: 0 }
  </code></pre>
  
  <p>so no luck there... digging further</p>