How to click the Ionic back button in End-to-end testing (Playwright, CodeceptJS)?

Ionic Framework
1

I’m trying to click the Ionic back button in an end-to-end test. I’m using Playwright through CodeceptJS.

I’m trying to use CodeceptJS to click a back button generated in Ionic and whatever I try, I can’t get it to work. I think it may be related to #shadow-root.

Here's the HTML generated by Ionic:

    <ion-header role="banner" class="md header-md header-collapse-none hydrated">
      <ion-toolbar class="toolbar-title-default md in-toolbar hydrated">
        <ion-buttons slot="start" class="buttons-first-slot sc-ion-buttons-md-h sc-ion-buttons-md-s md hydrated">
          <ion-back-button class="md button back-button-has-icon-only in-toolbar ion-activatable ion-focusable hydrated">
            #shadow-root: <button type="button" class="button-native" part="native" aria-label="back"><span class="button-inner"><ion-icon part="icon" aria-hidden="true" role="img" class="md hydrated"></ion-icon></span><ion-ripple-effect role="presentation" class="md unbounded hydrated"></ion-ripple-effect></button>
          </ion-back-button>
        </ion-buttons>
        <ion-title class="md title-default hydrated">Page title</ion-title>
      </ion-toolbar>
    </ion-header>

And in CodeceptJS, in my helper.js, I tried the following:

      async clickIonBackButton() {
        const { Playwright } = this.helpers;
        const backButton = await locate('ion-toolbar').find('ion-back-button').find('button');
        Playwright.click(backButton);
      }

I also tried simply clicking ion-back-button, but unfortunately that doesn’t work. It seems I need to click the <button> inside <ion-back-button>, but I can’t figure out how to do that. Any ideas?