無法在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，得到一些想法。