ionic 4 protractor e2e - how to select/distinguish between ionic alerts buttons

Question

I want to be able to simply and reliable select these two alert buttons for e2e testing with protractor.

I can't use by.partialButtonText since the text is inside a span element.

<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>

Answer 1

Are they always displayed in that particular order in the DOM? If that is the case, you could try the following:

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);

Those will get the <span> element.

Additionally, you could try to locate them more precisely with the following method:

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