How do I wait for a page to transition after checking the link?

Question

I'm trying to get CodeceptJS to wait for a page to load after clicking a link, but I can't get it to do so gracefully.

My Ionic pages:

Homepage

  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton />
        </IonButtons>
        <IonTitle>Main page</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <Link to="reset-password">Reset Password</Link>
    </IonContent>
  </IonPage>

Reset password page

  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton />
        </IonButtons>
        <IonTitle>Reset your password</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      Here is a form.
    </IonContent>
  </IonPage>

My codeceptJS test (using Playwright):

Scenario('Reset password', async ({ I }) => {
    I.amOnPage('/');
    I.wait('ion-button');
    I.click('Reset Password');
    // Wait for URL to change; doesn't help.
    I.waitInUrl('/reset-path')
    // Wait for "Reset Password" link to disappear; doesn't help.
    I.waitForInvisible('Reset Password');
    // Wait for new title text to appear; doesn't help.
    I.waitForText('Reset your password');
    // Simply wait 1 second; this is the only way to make sure the page is loaded.
    I.wait(1);
    const titleText = await I.grabTextFrom('ion-toolbar ion-title');
    assert.strictEqual('Reset your password', titleText);
});

If I don't wait for 1 second, then I get the following error:

      Expected values to be strictly equal:
+ actual - expected

+ 'Reset your password'
- 'Main page'

So even though I have told CodeceptJS to wait until the new title text is visible, it somehow sees the old title text unless I hardcode a wait time. Surely I am doing this wrong (just started with CodeceptJS today), and there is a way to gracefully force it to wait for the Ionic page transition to occur. How can I do that?