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

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

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

1 个答案: