Appium + Protractor : element not intractable

Question

I am using Appium and Protractor for e2e testing of my Ionic 4 application. The application Starts from the login page. Currently, I have implemented my spec.ts file as below

import {browser, by, element, ElementFinder, protractor} from 'protractor';
describe('new App', () => {

  beforeEach(()=>{
    var until = protractor.ExpectedConditions;
    browser.wait(until.visibilityOf(element(by.id('email'))), 30000, 'Element didnt load in 30 seconds')
  })

  it('click login butto with valid credentials', async () => {
      const usernameInput = await element(by.id('email'));
      usernameInput.sendKeys('[email protected]');
      //browser.sleep(1000);
      const passwordInput = await element(by.id('password'));
      await passwordInput.sendKeys('assword');
      //browser.sleep(1000);

      await element(by.id('login')).click();
      await expect(1).toBe(1);
  });
});

Loginpage.html

<ion-header class="bar-profile" no-border>

  <ion-card text-center class="hide-card">
    <img class="profile-picture" src="../assets/icon/4.png" >
  </ion-card>

    <ion-grid style="height: 100%">
    <ion-row  align-items-center style="height: 100%">
      <ion-card style="width: 100% !important;" class="hide-card">
        <form [formGroup]="todo" (ngSubmit)="logForm()">
          <ion-item lines= "none">
            <ion-label position="floating" >Username</ion-label>
            <ion-input id="email" type="text" (ionBlur)="checkMail()" formControlName="email"></ion-input>
          </ion-item>
          <ion-item lines= "none">
            <ion-label position="floating">Password</ion-label>
            <ion-input id="password" type="password" formControlName="password"></ion-input>
          </ion-item>

           <ion-row>
             <ion-col width-50 style="text-align: center">
               <ion-button id="login" style="--border-radius:0px;" block ion-button type="submit" [disabled]="!todo.valid"><ion-icon name="mail" slot="start"> </ion-icon>Login</ion-button>
             </ion-col>
             <ion-col width-50 style="text-align: center">
               <ion-button style="--border-radius:0px;" fill="clear" block ion-button type="submit" [disabled]="!todo.valid"><ion-icon name="help" slot="start"> </ion-icon>Forgot Password</ion-button>
             </ion-col>
           </ion-row>



        </form>
        <ion-row>
          <ion-col width-50 style="text-align: center">
           <p>
             or
             </p>
          </ion-col>
        </ion-row>

        <ion-row>
            <ion-col width-50 style="text-align: center; padding-left:100px">
              <ion-button style="--border-radius:0px; --padding-end:-5px " color="facebook"><ion-icon name="logo-facebook" slot="start"> </ion-icon></ion-button>
            </ion-col>

        <ion-col width-50 style="text-align: center; padding-right:100px;">
          <ion-button style="--border-radius:0px; --padding-end:-5px" color="gp"  (click)="auth.googleLogin()"><ion-icon name="logo-googleplus" slot="start"> </ion-icon></ion-button>
        </ion-col>
        </ion-row>

        <ion-row>
        <ion-col width-50 style="text-align: center">
        <p>
          Havent't signed up yet?
          </p>
        </ion-col>
        </ion-row>

        <ion-row>
        <ion-col width-50 style="text-align: center">
        <ion-button id="signupbutton" style="--border-radius:0px;" [routerLink]="'/signup'" routerDirection="forward" ><ion-icon name="log-in" slot="start"> </ion-icon>Register</ion-button>
        </ion-col>
        </ion-row>
      </ion-card>
    </ion-row>

  </ion-grid>

</ion-header>

I have tried visibilityOf, elementToBeClickable in the beforeEach as well as browser.sleep() after the sendKeys events recommended by other posts but none work. Whats more confusing is that I can find button elements and click() those and the function is executed correctly. What am I missing here?

The protractor.config.ts file if anyone thinks it is necessary

import {Config} from 'protractor';
import * as tsNode from 'ts-node';

const serverAddress = 'http://localhost:4723/wd/hub';
const testFilePAtterns: Array<string> = [
  '**/*/*.e2e-spec.ts'
];
const androidPixel2XLCapability = {
  browserName: '',
  autoWebview: true,
  autoWebviewTimeout: 20000,
  platformName: 'Android',
  deviceName: 'pixel2xl',
  app: './platforms/android/app/build/outputs/apk/debug/app-debug.apk',
  'app-package': 'io.ionic.parkandgo',
  'app-activity': 'MainActivity',
  nativeWebTap: 'true',
  autoAcceptAlerts: 'true',
  autoGrantPermissions: 'true',
  newCommandTimeout: 300000
};

export let config: Config = {
  allScriptsTimeout: 11000,
  specs: testFilePAtterns,
  baseUrl: '',
  multiCapabilities: [
    androidPixel2XLCapability
  ],
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },
  seleniumAddress: serverAddress,
  onPrepare: () => {
    tsNode.register({
      project: 'e2e/tsconfig.json'
    });
  }
};

Answer 1

I solved the issue by adding a

InputElement.click();

before actually inserting the data