Appium + Protractor : element not intractable



  • 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'
        });
      }
    };
    


  • I solved the issue by adding a

    InputElement.click();
    

    before actually inserting the data



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2