无法在 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

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

由于量角器非常快且异步，因此有时它无法在我的 case.So 中检测到我们想要 click.Here 的元素，它无法在我必须找到的位置找到该按钮元素点击。

在处理非 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('');
        });
            });

这解决了我的 problem.Used ，获得一些想法。

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

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

javascript

css

protractor

ionic2

angular2-testing