0

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('randommail@domain.com');
      //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'
    });
  }
};
  • for which element you are getting this error or your all elements are not intractable – Upkar Singh Apr 1 at 5:24
  • The buttons seem to work. With the exception of login which is disabled till inputs are added. The inputs dont work. I can manually add data in the web view generated from testing though. – Ranika Nisal Apr 1 at 5:50
0

I solved the issue by adding a

InputElement.click();

before actually inserting the data

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.