Is there a way to add a class to the current page with IonRouterOutlet?

I’m trying to test Ionic with Playwright and I’m running into trouble with my selectors matching elements in the previously visited page (since that page is also in the DOM).

Current IonPage:

<div class="ion-page can-go-back" style="z-index: 101;">

Previous IonPage:

<div class="ion-page ion-page-hidden" style="z-index: 100;">

The fundamental problem is that the previous page can have all the classes that the current page has, so there’s no good way to select only the elements on the current page.

I’ve tried using selectors with the not pseudoselector like this:

div.ion-page:not(.ion-page-hidden) ion-back-button

But, this fails sometimes in headless browsers. It also gets complicated when nesting routes because there may be multiple IonPages.

What I want to do is add a class for the current IonPage like this:

<div class="ion-page ion-current-page can-go-back" style="z-index: 101;">

How can I add such a class?

You should be able to change something in the page lifecycle events to update a class on the current page to indicate it is active, but from what I have seen in the testing library Ionic is selecting pages using the selector you have already mentioned.

Curious about what scenario you have where there are multiple IonicPages visible using nested routes?

React Lifecycle: A Guide to Ionic React App Component Lifecycles (ionicframework.com)

1 Like

Thanks, that’s helpful.

I thought the problem was nested routes, but now I think it is related to the tab bar. Whenever a tab bar is shown, I get a structure like this:

<ion-app>
  <div class="ion-page">
    <ion-tabs>
      <div class="tabs-inner">
        <ion-router-outlet>
          <div class="ion-page">
        </ion-router-outlet>
      </div>
      <ion-tab-bar />
    </ion-tabs>
  </div>
</ion-app>

The tabbar component looks like this:

const AppTabBar: React.VFC<MyProps> = ({ children }: MyProps) => {
  return (
    <IonTabs>
      {children}
      <IonTabBar slot="bottom" id={idAppTabBar}>
        <IonTabButton tab="tab-home" href={routeTabWelcome}>
          <IonLabel>
              My Page
          </IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
}

And the router looks like this:

        <IonReactRouter basename={appBaseName}>
          <ListenersRouterRoot>
            <Switch>
              <Route path={routeSetup}>
                <RouterOutletOnboarding hasDoneSetup={hasDoneSetup} />
              </Route>
              <AppTabBar>
                <IonRouterOutlet>
                  <Route exact path={routeHome}>
                    <PageHome />
                  </Route>