无法在ionic2上使用带量角器的元素（by.css（））单击按钮答案

【问题标题】：Not able to click the button using element(by.css()) with protractor on ionic2无法在ionic2上使用带量角器的元素（by.css（））单击按钮
【发布时间】：2017-07-31 16:43:36
【问题描述】：

我能够导航到该页面，但在导航页面上，我尝试单击显示如下错误的按钮：

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

你可以看看我的 cmets 什么工作，什么不工作。

【问题讨论】：

标签： javascript css ionic2 protractor angular2-testing

【解决方案1】：

经过更多的努力和搜索，我找到了解决问题的方法，可能有人会觉得它有用。

由于量角器非常快且异步，因此有时它无法检测到我们要单击的元素。在我的情况下。因此，它无法找到我必须单击的按钮元素。

在处理非 Angular 应用时，我们使用 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('');
        });
            });

这解决了我的问题。使用this 来获得一些想法。

【讨论】：