SideNavItem with QueryParameters? (and/or bizarre playwright navigation issue)

My application url pattern is as follows:

  1. A View with the path “domain”. This maps to a singleton instance of a class called DomainView that views domain objects.

  2. Each subtype of the domain uses a route parameter, e.g., “domain/person” or “domain/organization”

  3. An then an optional UUID to denote selecting a particular domain instance, e.g., “domain/person/1234”.

So the DomainView class @Route is “domain/:type/:uuid?”.

  1. I have a SideNav with SideNavItems that mirror the domain class hierarchy. For example:

new SideNavItem(“People”, DomainView.class, new RouteParameters(“type”, “person”), LineAwesomeIcon.USER.create());

Everything is working fine in vaadin.

I use karibu as my first layer of integration testing. However, it is not a complete substitute for UI testing using something like Selenium or Playwright or TestBench. I do not have a TestBench license. I have used Selenium in the past but Playwright is vastly better. Or so I thought.

Everything is working fine in Karibu.

In Playwright, I have a basic test which logs on, navigates to the Person type using the SideNavItem, does some work then logs out. This works fine.

Then I have a few more tests which repeat the same thing, but in between steps they log out and/or navigate around the hierarchy a bit. Just extra user navigation as a way to check for trouble. And this is where something bizarre is happening. The navigation urls look like:

“domain/person” (First navigation to person)
“domain/domain/organization” (First navigation to organization)
“domain/domain/domain/person” (Second navigation to person)
etc

Each navigation step prepends an extra “domain/” to the url.

I cannot figure out the problem. Everything looks fine when I inspect the DOM elements in the browser. However, the network traffic shows me that the prepending is happening in javascript.

The problem occurs whether or not I logoff/logon in Playwright.

So in desperation, I started looking at changing the url pattern.

The simplest thing is to use wildcards, e.g., “domain/:path”. Then I can strip out all the invalid bits. This hack will work but I really want to know what is going on.

I thought about switching from RouteParameters to QueryParameters. Still ugly but slightly cleaner as I only have to strip one parameter value instead of the whole url. However, the SideNavItem only supports Route Parameters. The constructor only allows RouteParameters. And If I set the path using a QueryParameter pattern, the code strips everything past the “?”. So no go.

At this point I am not sure what is most interesting:

  1. How to make QueryParameters work with SideNavItem
  2. What is causing the prepending issue?

If I pause Playwright and navigate by hand, it works. This suggests that Playwright is finding the wrong element inside the SidNavItem to click on. Something is different between selecting an element in the DOM vs clicking on whatever element is handling the SidNavItem.

How to make QueryParameters work with SideNavItem

Waiting for 24.4; there is support for it added.

What is causing the prepending issue?

Sounds like a bug in your test or Playwright… might be related base-tag Vaadin is using in the head.