How do you perform hover, double-click, and right-click actions in Playwright?

// Hover over an element (triggers CSS :hover state and tooltips)
await page.locator('.menu-item').hover();
await page.getByRole('button', { name: 'Options' }).hover();

// After hover, interact with revealed elements
await page.locator('#user-avatar').hover();
await page.getByRole('menuitem', { name: 'Profile' }).click();

// Double-click to select text, open editor, etc.
await page.locator('.editable-cell').dblclick();
await page.getByRole('gridcell', { name: 'Click to edit' }).dblclick();

// Double-click at a specific position
await page.locator('#canvas').dblclick({ position: { x: 100, y: 50 } });

// Open context menu
await page.locator('.file-item').click({ button: 'right' });

// Verify context menu appeared
await expect(page.getByRole('menu')).toBeVisible();

// Click a menu option
await page.getByRole('menuitem', { name: 'Delete' }).click();

import { test, expect } from '@playwright/test';

test('navigate via hover dropdown menu', async ({ page }) => {
  await page.goto('/');

  // Hover over the "Products" nav item to reveal submenu
  await page.getByRole('link', { name: 'Products' }).hover();

  // Wait for submenu to appear
  await expect(page.getByRole('menu')).toBeVisible();

  // Click a submenu item
  await page.getByRole('menuitem', { name: 'Laptops' }).click();

  await expect(page).toHaveURL('/products/laptops');
});

test('edit table cell with double-click', async ({ page }) => {
  await page.goto('/data-table');

  // Double-click the cell to enter edit mode
  const cell = page.locator('td').filter({ hasText: 'John Doe' }).first();
  await cell.dblclick();

  // Verify edit input appeared
  const editInput = cell.locator('input');
  await expect(editInput).toBeVisible();
  await editInput.fill('Jane Doe');
  await editInput.press('Enter');

  await expect(cell).toHaveText('Jane Doe');
});

test('delete file via context menu', async ({ page }) => {
  await page.goto('/file-manager');

  const file = page.locator('.file').filter({ hasText: 'report.pdf' });

  // Right-click to open context menu
  await file.click({ button: 'right' });
  await expect(page.getByRole('menu')).toBeVisible();

  // Click Delete in context menu
  await page.getByRole('menuitem', { name: 'Delete' }).click();

  // Handle confirmation
  page.once('dialog', d => d.accept());

  await expect(file).not.toBeAttached();
});

// Ctrl+Click (multi-select)
await page.locator('.item-1').click({ modifiers: ['Control'] });
await page.locator('.item-3').click({ modifiers: ['Control'] });

// Shift+Click (range select)
await page.locator('.item-1').click();
await page.locator('.item-5').click({ modifiers: ['Shift'] });

// Alt+Click
await page.locator('#element').click({ modifiers: ['Alt'] });