Hi, I am trying to get E2E testing working in Ionic. The thing I run into is that the Ionic components are all webcomponents. Therefore it is a lot harder to create a button click. Where normally you can can do:
const button = $(‘#btnDisagree’);
button.click();
To click a button. The test runner now gives that the ‘element not interactable’ error
When trying to select the button with $shadow like:
const button = $(‘#btnDisagree’);
const innerButton = button.shadow$(‘button’);
innerButton.click();
I got the error ‘element click intercepted: Element is not clickable at point’. I know that the selector works because:
const button = $(‘#btnDisagree’);
const innerButton = button.shadow$(‘button’);
console.log(innerButton.getHTML(false));
Gives me :
<span class="button-inner"><slot name="icon-only"></slot><slot name="start"></slot><slot></slot><slot name="end"></slot></span><ion-ripple-effect role="presentation" class="md hydrated"></ion-ripple-effect>` `[0-0] <span class="button-inner"><slot name="icon-only"></slot><slot name="start"></slot><slot></slot><slot name="end"></slot></span><ion-ripple-effect role="presentation" class="md hydrated"></ion-ripple-effect>
Which is indeed the innerHtml of my ion-button. So the selector is working, but I can’t click it programmatically. Has anyone got this working?