Playwright

Testing (dropdown) menus with Playwright

One thing to remember when testing Headless UI menus with Playwright is that the menu itself is rendered outside of the element it's contained in. Internally it uses Floating UI and Vue portal to render it in the body element of the page so it's not hidden beneath other elements when opened.

This also means that when testing it, you need to use a direct data-testid selector on the page, e.g. page.getByTestId('menu-item') instead of selecting it via the row or parent element. Clicking the menu button to open the menu itself can use a local selector as that is shown inside the element.