Widget practice · Hover menus

Hover-only menus

A travel-style top nav. Hover the parent item to reveal a submenu, hover an item with a chevron to reveal a nested submenu. No click opens it — pure CSS hover. Practise locator.hover() then click an item that only exists after hover.

① Hover the parent → click child

Hover Add-ons to reveal Taxi / Hotel / Insurance / Meal / Wifi / Activities. Click any item.

data-testid=nav-add-ons · nav-account children=test-id-Taxi · test-id-Hotel · test-id-Insurance · test-id-Meal · test-id-Wifi · test-id-Activities nested=test-id-Upcoming · test-id-Past · test-id-Cancelled (Account → Bookings)

No item clicked yet.

What students should practise

Hover data-testid="nav-add-ons", then click data-testid="test-id-Taxi".
Use getByText('Add-ons', { exact: true }).hover() + getByTestId('test-id-Taxi').click().
Hover Account, hover Bookings (chevron item), click Upcoming.
Assert the submenu becomes visible only after hover (toBeVisible() on hover, toBeHidden() after mouse-out).
Read every Add-ons child text via locator('.submenu .submenu-item').allInnerTexts() after hover.

Playwright solutionSingle hover, then nested hover. Show solution

import { Browser, chromium, Page } from '@playwright/test';

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const page: Page = await browser.newPage();
  await page.goto('/playwright/widgets/hover-menu.html');

  // 1) hover Add-ons → click Taxi
  await page.getByText('Add-ons', { exact: true }).hover();
  await page.getByTestId('test-id-Taxi').click();

  // 2) nested: Account → Bookings → Upcoming
  await page.getByText('Account', { exact: true }).hover();
  await page.getByText('Bookings', { exact: true }).hover();
  await page.getByTestId('test-id-Upcoming').click();

  // 3) read every Add-ons child after hover
  await page.getByText('Add-ons', { exact: true }).hover();
  const addons = await page
    .locator('[data-testid="nav-add-ons"] .submenu .submenu-item')
    .allInnerTexts();
  console.log(addons);
})();