ionic 4 protractor e2e - 如何选择/区分离子警报按钮答案

【问题标题】：ionic 4 protractor e2e - how to select/distinguish between ionic alerts buttonsionic 4 protractor e2e - 如何选择/区分离子警报按钮
【发布时间】：2019-06-25 19:41:38
【问题描述】：

我希望能够简单可靠地选择这两个警报按钮，以便使用量角器进行 e2e 测试。

我不能使用 by.partialButtonText，因为文本在 span 元素内。

<button type="button" class="alert-button ion-focusable ion-activatable sc-ion-alert-md" tabindex="0">
     <span class="alert-button-inner sc-ion-alert-md">Yes</span>
     <ion-ripple-effect class="sc-ion-alert-md md hydrated" role="presentation"></ion-ripple-effect>
</button>
<button type="button" class="alert-button ion-focusable ion-activatable sc-ion-alert-md" tabindex="0">
     <span class="alert-button-inner sc-ion-alert-md">No</span>
     <ion-ripple-effect class="sc-ion-alert-md md hydrated" role="presentation"></ion-ripple-effect>
</button>

【问题讨论】：

标签： protractor ionic4 end-to-end

【解决方案1】：

它们是否总是以特定的顺序显示在 DOM 中？如果是这种情况，您可以尝试以下方法：

const yesButton = element.all(by.css('.alert-button-inner.sc-ion-alert-md')).get(0);

const noButton = element.all(by.css('.alert-button-inner.sc-ion-alert-md')).get(1);

这些将获得<span> 元素。

此外，您可以尝试使用以下方法更精确地定位它们：

const yesButton = element(by.cssContainingText('.alert-button-inner.sc-ion-alert-md', 'Yes'));  

const noButton = element(by.cssContainingText('.alert-button-inner.sc-ion-alert-md', 'No'));

【讨论】：