PlaywrightPHP

Hover to reveal a menu

Hover over a trigger, then act on the item it reveals without letting the menu close.

Dropdown menus that open on hover need two locators: the trigger you hover, and the item you then click. Playwright PHP re-resolves each locator before it acts, so the revealed item is found only when the menu is actually open.

Hover the trigger, then click the item

hover() moves the pointer over the trigger and waits for it to be actionable. The next action re-resolves its own locator, so the menu item is looked up after the menu appears.

php
$page->goto('https://app.example.test/dashboard');

$page->getByRole('button', ['name' => 'Account'])->hover();
$page->getByRole('menuitem', ['name' => 'Billing'])->click();

You do not wait between the two calls. click() auto-waits for the menu item to be visible and actionable, which only happens once the hover has opened the menu.

Keep the pointer inside the menu

A hover menu closes when the pointer leaves the trigger and the panel. If your next action moves the pointer somewhere else first, the menu collapses before you reach the item.

php
// Good: the click stays inside the opened menu.
$page->getByRole('button', ['name' => 'Account'])->hover();
$page->getByRole('menuitem', ['name' => 'Sign out'])->click();

Act on the revealed item directly. Do not hover an unrelated element, scroll away, or assert something outside the menu between the hover and the click.

Nested submenus

For a submenu, hover each level in order. Every hover re-opens the panel the next item lives in.

php
$page->getByRole('menuitem', ['name' => 'Export'])->hover();
$page->getByRole('menuitem', ['name' => 'Export as CSV'])->click();

Pitfalls

  • Creating the menu item locator before the hover is safe: a locator is not a cached element. The action still resolves it after the menu opens.
  • Menus that open on click, not hover, need click() on the trigger instead of hover(). Check how the component behaves before choosing.
  • A hover that reveals nothing usually means the trigger needs a real pointer move; hover() provides that, a fixed wait does not.

Expected result

The revealed item receives the click and the page reaches the state that menu item promises, such as a billing page heading or a signed-out message.

Go next

← All recipes