带前缀的测试时间输入字段答案

【问题标题】：Testing Time input field with prefix带前缀的测试时间输入字段
【发布时间】：2019-05-13 10:17:22
【问题描述】：

我有一个带时间输入字段的表单

<ui-time-input _ngcontent-c21="" class="ml-2 ng-untouched ng-pristine ng-valid" formcontrolname="time" hidepostfix="true" label="" _nghost-c30="" id="p-at-tt-time-input" ng-reflect-id="p-at-tt-time-input" ng-reflect-label="" ng-reflect-hide-postfix="true" ng-reflect-hide-validation-message="true" ng-reflect-name="time">
<div _ngcontent-c30="" class="mat-form-field no-label-placeholder mat-form-field-empty hide-postfix">
    <div _ngcontent-c30="" class="mat-form-field-flex">
        <div _ngcontent-c30="" class="mat-form-field-infix ng-untouched ng-pristine ng-valid" ng-reflect-form="[object Object]">
            <input _ngcontent-c30="" class="mat-input-element ng-untouched ng-pristine ng-valid" formcontrolname="time" type="time" ng-reflect-name="time" data-prefix="at">
        </div>
        <div _ngcontent-c30="" class="mat-form-field-underline"></div>
    </div><span _ngcontent-c30="" class="mat-form-field-label-wrapper"><label _ngcontent-c30="" class="mat-form-field-label"></label></span>
    <!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
</ui-time-input>

输入字段如下所示：

我想测试表单。我用

await this.app.client.setValue(//*[@id="p-at-tt-time-input"]/div/div/div1/input, '12:30');

但我明白了 invalid element state: Element must be user-editable in order to clear it.错误

【问题讨论】：

等等，你为什么不写element(by.xpath("...xpath..."))。这是量角器语法吗？
不，这是 spectron 语法。我必须使用 spectron，因为应用程序是电子应用程序

标签： angular protractor e2e-testing webdriver-io spectron

【解决方案1】：

您可能首先需要对该元素执行click，然后再执行setValue 或keys

await this.app.client.click(//*[@id="p-at-tt-time-input"]/div/div/div1/input);
await this.app.client.setValue(//*[@id="p-at-tt-time-input"]/div/div/div1/input, '12:30');

OR

await this.app.client.click(//*[@id="p-at-tt-time-input"]/div/div/div1/input);
await this.app.client.keys(//*[@id="p-at-tt-time-input"]/div/div/div1/input, '12:30');

【讨论】：