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

Question

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

<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. 错误

Answer 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');

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

Testing Time input field with prefix

angular

protractor

e2e-testing

webdriver-io

spectron