Я могу перейти на страницу, но на навигационной странице я пытаюсь нажать кнопку, которая показывает ошибку, как показано ниже:
× 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.
});
Вы можете посмотреть мои комментарии, что работает, а что нет.
После некоторых дополнительных усилий и поиска я нашел решение своей проблемы, может быть, кто-то сочтет это полезным.
Поскольку транспортитор очень быстрый и асинхронный, поэтому иногда он не может обнаружить элемент, к которому мы хотим щелкнуть. Вот в моем случае. Таким образом, он не смог найти этот элемент кнопки, где мне нужно щелкнуть.
При работе с не угловыми приложениями мы используем 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('');
});
});
Это решает мою проблему. Использует это, чтобы получить представление.