Mouse

Right Click

Intermediate

Action: none

Live widget · interact freely

Manual test goal

Open a custom context menu via secondary click and assert the menu items are reachable via keyboard too.

Expected result

Right click opens a positioned menu; pressing Escape closes it; selecting an item updates the selection chip.

Stable selectors

Drop zone[data-testid="ctx-target"]
Menu[data-testid="ctx-menu"]
Menu item Rename[data-testid="ctx-rename"]
Selection chip[data-testid="ctx-selection"]

Reference Playwright spec

right-click.spec.ts

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

test('context menu opens via right click', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/right-click');

  await page.getByTestId('ctx-target').click({ button: 'right' });
  await expect(page.getByTestId('ctx-menu')).toBeVisible();

  await page.getByTestId('ctx-rename').click();
  await expect(page.getByTestId('ctx-selection')).toHaveText('Action: rename');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idleright-click.spec.ts

https://lab.hakdogan.com/practice/right-click

# console output will stream here