ionic2の分度器で要素（by.css（））を使用してボタンをクリックできません

Question

ページに移動できますが、ナビゲートされたページで次のようなエラーを表示しているボタンをクリックしようとしています：

× 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. 
    }); 

私のコメントは何が働いているのか、何が動かないのか見ることができます。

Answer 1

もう少し努力して検索したところ、私は自分の問題の解決策を見つけました。誰かが役に立つと思うかもしれません。

分度器は非常に高速で非同期なので、時には私がクリックしたい要素を検出できません。私の場合はこのようにして、クリックしなければならないボタン要素を見つけることができませんでした。

ノンアングルアプリを扱うときは、角度をつけておくのに便利な予期された条件のライブラリーを表すExpectedConditionsを使用します。私の上記のテスト仕様リファクタリング

：

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

これは、いくつかのアイデアを得るために、私のproblem.Used thisを解決します。