在 Vuejs 中使用 xpath 获取 v-text-field 值（使用 nightwatch）答案

【问题标题】：Getting v-text-field value with xpath in Vuejs (with nightwatch)在 Vuejs 中使用 xpath 获取 v-text-field 值（使用 nightwatch）
【发布时间】：2017-10-17 08:13:50
【问题描述】：

VueJS 标记：

<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">

    <v-text-field
     slot="activator"
     label="Issue Date"
     v-model="date"
     append-icon="event"
     readonly
     >
    </v-text-field>
    <v-date-picker v-model="date" no-title scrollable actions>
        <template scope="{ save, cancel }">
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn flat color="primary" @click="cancel">Cancel</v-btn>
                <v-btn flat color="primary" @click="save">OK</v-btn>
            </v-card-actions>
       </template>
   </v-date-picker>
</v-menu>

HTML：

`<div class="menu__activator">
   <div data-v-386ef34c="" class="input-group input-group--dirty input-group--append-icon input-group--text-field">
      <label>Issue Date</label>
      <div class="input-group__input">
         <input readonly="readonly" tabindex="0" aria-label="Issue Date" type="text">
         <i aria-hidden="true" class="material-icons icon input-group__append-icon input-group__icon-cb">event</i>
      </div>
      <div class="input-group__details">
         <div class="input-group__messages"></div>
      </div>
   </div>
</div>`

它在浏览器中的显示方式：

我想编写 e2e 来断言日历日期的一些逻辑。日期与时刻相匹配，以匹配当前日期。但是我不知道如何使用 xpath 访问该文本值。

Xpath 获取元素： $x('//div[contains(@class, "input-group--text-field")]//input[@readonly]')

元素在开发者控制台中的显示方式：

将我需要的属性放在最底部：

我尝试过的 Xpaths 导致空数组：

$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')

编辑：设法在 chrome 控制台中获取值：

$x('//div[contains(@class, "input-group--text-field")]//input[@aria-label="Issue Date"]')[0].value

但仍然在夜巡中苦苦挣扎

欢迎使用 xpath 或 css 的任何解决方案！谢谢！

【问题讨论】：

标签： xpath vue.js

【解决方案1】：

不得不导入 chai，但这终于奏效了：

  .getValue('//div[contains(@class, "input-group--text-field")]//input[@aria-label="Issue Date"]', function(result) {
    expect(result.value).to.equal('2017-10-17')
  })

【讨论】：