Not able to click the button using element(by.css()) with protractor on ionic2

Question

I am able to navigate to the page, but on the navigated page I am trying to click the button which is showing error as follows:

× navigates to the next page on click
- Failed: unknown error: Element <button color="primary" id="button" ion-

button="" large="" ng-reflect-color="primary" ng-reflect-large="" class="button
 button-md button-default button-default-md button-large button-large-md button-
md-primary">...</button> is not clickable at point (121, 109). Other element 
would receive the click: <div class="click-block click-block-enabled click-
block-active"></div>

page.html

<!--
  Generated template for the Page1 page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Page1</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-row>
    <ion-col>
      <button ion-button large color="primary" (click)="onClick()" id = "button">Click to Forms</button>
    </ion-col>
    <ion-col>
      <button ion-button large color="primary" (click)="get()" class="button1">Google</button>
    </ion-col>
  </ion-row>
  <br>
  <br>
  <ion-list>
    <ion-item *ngFor="let data of datas" (click)="onClick2()">
      {{data}}
    </ion-item>

  </ion-list>

</ion-content>

e2e-spec.ts

it('navigates to the next page on click', () => {
        browser.get('http://localhost:8100');//opening the app
        let elemen = element(by.css('ion-content button'));
        let click = elemen.click();//clickin the button successfully and navigating to other page.
        let pageChecks = element(by.buttonText('Click to Forms'));//on otherpage select the button.
        pageChecks.click();//clicking the button but fails to locate the button.
    });

You can have a look at my comments whats working and what's not working.

score 2 · Accepted Answer · answered Aug 01 '17 at 07:59

After some more efforts and search, I found the solution to my problem, may be someone would find it useful.

As protractor is very fast and asynchronous so sometimes it cannot detect the element to which we want to click.Here in my case.So, it was not able to locate that button element where I have to click.

When dealing with non-angular apps we use ExpectedConditions which represents a library of canned expected conditions which are useful for the protractor.

Refactoring my above test spec:

it('navigates to the next page on click', () => {
        browser.get('http://localhost:8100');
        let elemen = element(by.css('ion-content button'));
        elemen.click();
        let pageChecks = element(by.buttonText('Click to Forms'));
        let EC = protractor.ExpectedConditions;
        // let button = element(by.css('#button'));
        let button = $('#button');
        let clickable = EC.elementToBeClickable(button);
        browser.wait(clickable, 5000);
        button.click();
        let ele = $$('#form');
        let text = ele.getText().then((value)=>{
            console.log(value),
            expect(value).toContain('Forms');
            expect(value).toContain('');
        });
            });

This solves my problem.Used this, to get some idea.

Not able to click the button using element(by.css()) with protractor on ionic2

1 Answers1