在Vuejs中使用xpath获取v-text-field值(使用nightwatch)

时间:2017-10-17 08:13:51

标签: xpath vue.js

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

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

Date text field and calendar

我想写e2e来断言日历日期的某些逻辑。生成日期的时刻与当天匹配。但是我无法弄清楚如何使用xpath访问该文本值。

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

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

enter image description here

我需要的属性位于最底层:

enter image description here

我试过的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的任何解决方案!谢谢!

1 个答案:

答案 0 :(得分:0)

不得不进口柴,但这终于奏效了:

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