2017-10-17 447 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') 
    })