title: Getting v-text-field value with xpath in Vuejs (with nightwatch)
body: <p>VueJS markup:</p>
  
  <pre><code>&lt;v-menu
   lazy
   :close-on-content-click="false"
   v-model="modal"
   transition="scale-transition"
   offset-y
   full-width
   :nudge-right="40"
   max-width="290px"
   min-width="290px"&gt;
  
      &lt;v-text-field
       slot="activator"
       label="Issue Date"
       v-model="date"
       append-icon="event"
       readonly
       &gt;
      &lt;/v-text-field&gt;
      &lt;v-date-picker v-model="date" no-title scrollable actions&gt;
          &lt;template scope="{ save, cancel }"&gt;
              &lt;v-card-actions&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-btn flat color="primary" @click="cancel"&gt;Cancel&lt;/v-btn&gt;
                  &lt;v-btn flat color="primary" @click="save"&gt;OK&lt;/v-btn&gt;
              &lt;/v-card-actions&gt;
         &lt;/template&gt;
     &lt;/v-date-picker&gt;
  &lt;/v-menu&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>`&lt;div class="menu__activator"&gt;
     &lt;div data-v-386ef34c="" class="input-group input-group--dirty input-group--append-icon input-group--text-field"&gt;
        &lt;label&gt;Issue Date&lt;/label&gt;
        &lt;div class="input-group__input"&gt;
           &lt;input readonly="readonly" tabindex="0" aria-label="Issue Date" type="text"&gt;
           &lt;i aria-hidden="true" class="material-icons icon input-group__append-icon input-group__icon-cb"&gt;event&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="input-group__details"&gt;
           &lt;div class="input-group__messages"&gt;&lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>How it appears in browser:</p>
  
  <p><a href="https://i.stack.imgur.com/7vg2R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7vg2R.png" alt="Date text field and calendar"></a></p>
  
  <p>I'd like to write e2e to assert some logic with the calendar date. Date is produced with moment to match current day. However I cannot figure out how to access that text value with xpath.</p>
  
  <p>Xpath to get the element:
  <code>$x('//div[contains(@class, "input-group--text-field")]//input[@readonly]')</code></p>
  
  <p>How the element appears in developer console:</p>
  
  <p><a href="https://i.stack.imgur.com/09zvH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/09zvH.png" alt="enter image description here"></a></p>
  
  <p>With the attribute I need at the very bottom:</p>
  
  <p><a href="https://i.stack.imgur.com/qhKn3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qhKn3.png" alt="enter image description here"></a></p>
  
  <p>Xpaths I've tried which result in empty array:</p>
  
  <pre><code>$x('//div[contains(@class, "input-group--text-field")]//input[@readonly]//@value')
  
  
  $x('//div[contains(@class, "input-group--text-field")]//input[@readonly]/@value')
  
  
  $x('//div[contains(@class, "input-group--text-field")]//input[@readonly][0]//@value')
  </code></pre>
  
  <p>Edit:
  Managed to get the value in chrome console:</p>
  
  <p><code>$x('//div[contains(@class, "input-group--text-field")]//input[@aria-label="Issue Date"]')[0].value</code></p>
  
  <p>But still struggling with Nightwatch</p>
  
  <p>Any solutions with xpath or css are welcome! Thanks!</p>