前提・実現したいこと
ionicを使ったアプリを作っています。そこではe2eテストをProtractorで実施しています。ここでのテストにおいて、ion-inputに文字列を自動設定して、ボタンを押すというようなことをしたいです。実現したいことは、自動でion-inputに文字列を設定することです。
ion-inputに文字列を自動設定する際に以下のエラーメッセージが発生しました。どのようにすれば、ion-inputに文字列を設定できるのかがわかりません。
発生している問題・エラーメッセージ
- Failed: element not interactable (Session info: chrome=85.0.4183.121) (Driver info: chromedriver=85.0.4183.38 (9047dbc2c693f044042bbec5c91401c708c7c26a-refs/branch-heads/4183@{#779}),platform=Windows NT 10.0.18363 x86_64) Executed 1 of 1 spec (1 FAILED) in 1 sec. [21:17:11] I/launcher - 0 instance(s) of WebDriver still running [21:17:11] I/launcher - chrome #01 failed 1 test(s) [21:17:11] I/launcher - overall: 1 failed spec(s) [21:17:11] E/launcher - Process exited with error code 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! 01_blank@0.0.1 e2e: `ng e2e` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the 01_blank@0.0.1 e2e script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\<username>\AppData\Roaming\npm-cache\_logs\2020-09-25T12_17_11_676Z-debug.log
該当のソースコード
app.e2e-spec.ts
TypeScript
1import { element , by, browser } from 'protractor'; 2import { AppPage } from './app.po'; 3 4describe('new App', () => { 5 let page: AppPage; 6 7 beforeEach(() => { 8 page = new AppPage(); 9 }); 10 11 it( 'form test.', () => { 12 browser.get('/home'); 13 // page.navigateTo(); 14 let inputTitle = element( by.id('input_title') ); 15 16 inputTitle.sendKeys('abc'); // エラーが起きる. 17 inputTitle.getText().then( (text) => { 18 expect( text ).toBe('abc'); 19 }); 20 }); 21});
home.page.html
HTML
1<ion-header [translucent]="true"> 2 <ion-toolbar> 3 <ion-title> 4 TODO 5 </ion-title> 6 </ion-toolbar> 7</ion-header> 8 9<ion-content> 10 <form #f="ngForm" (ngSubmit)="logForm()"> 11 <ion-item> 12 <ion-label position="stacked">Title</ion-label> 13 <ion-input id="input_title" type="text" [(ngModel)]="todo.title" name="todo.title"></ion-input> 14 </ion-item> 15 <ion-button type="submit" block>保存</ion-button> 16 </form> 17</ion-content>
home.page.ts
TypeScript
1import { Component, OnInit } from '@angular/core'; 2 3@Component({ 4 selector: 'app-home', 5 templateUrl: 'home.page.html', 6 styleUrls: ['home.page.scss'], 7}) 8export class HomePage implements OnInit { 9 todo = { 10 title : '', 11 } 12 13 constructor() {} 14 15 ngOnInit() { 16 } 17 18 ionViewWillEnter(){ 19 this.todo.title = 'タイトル'; 20 } 21 22 logForm(): void { 23 console.log( this.todo ); 24 }
補足情報(FW/ツールのバージョンなど)
ionic infoの情報を下記に記載します。
Ionic: Ionic CLI : 6.11.8 (C:\Users\t\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 5.3.2 @angular-devkit/build-angular : 0.1000.8 @angular-devkit/schematics : 10.0.8 @angular/cli : 10.0.8 @ionic/angular-toolkit : 2.3.3 Capacitor: Capacitor CLI : 2.4.1 @capacitor/core : 2.4.1 Utility: cordova-res : not installed native-run : not installed System: NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe) npm : 6.12.0 OS : Windows 10
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。