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

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

这解决了我的问题。用这个，得到一些想法。