ionic×Protractor で ion-input に文字列を自動設定したい。

Question

前提・実現したいこと

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

import { element , by, browser } from 'protractor';
import { AppPage } from './app.po';

describe('new App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it( 'form test.', () => {
    browser.get('/home');
    // page.navigateTo();
    let inputTitle = element( by.id('input_title') );

    inputTitle.sendKeys('abc'); // エラーが起きる.
    inputTitle.getText().then( (text) => {
      expect( text ).toBe('abc');
    });
  });
});

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      TODO
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form #f="ngForm" (ngSubmit)="logForm()">
    <ion-item>
      <ion-label position="stacked">Title</ion-label>
      <ion-input id="input_title" type="text" [(ngModel)]="todo.title" name="todo.title"></ion-input>
    </ion-item>
    <ion-button type="submit" block>保存</ion-button>
  </form>
</ion-content>

home.page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  todo = {
    title : '',
  }

  constructor() {}

  ngOnInit() {
  }

  ionViewWillEnter(){
    this.todo.title = 'タイトル';
  }

 logForm(): void {
   console.log( this.todo );
 }

補足情報（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

Answer 1

自己解決しました。

    let inputTitle = element( by.css('input[name="todo.title"]') );
    inputTitle.sendKeys('abc');  // 成功
    inputTitle.getAttribute('value').then( (text) =>{
      console.log( text );
      expect( text ).toBe( 'タイトルabc' );
    } );

by.idでは、ion-input（input）要素を取得できませんでした。
by.cssを使って要素を取得できました。
今回の例では、by.css('input')でも要素を取得できますが、inputが１つだけということはあまりないので、by.css('input[name="todo.title"]')の方が一意に要素を特定できるので好ましいです。
ion-inputをHTMLに分解した場合をイメージしないとうまく要素を取得できないようです。