2017-10-17 46 views
0

VueJS标记V-文本字段值:掌握在Vuejs的XPath(与nightwatch)

<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我试过了^ h导致空数组:

$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

但随着Nightwatch

任何与XPath或CSS的解决方案仍然在努力欢迎!谢谢!

回答

0

不得不进口柴,但这终于摸索:

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