Widget practice · Context menu

Right-click context menu

The browser's default context menu is suppressed on the targets below — instead a custom menu pops at the cursor with classes context-menu-list + context-menu-item. Right-click the primary box, read the visible items, and click one. Practise locator.click({ button: 'right' }).

Right-click target

Right-click the orange box to open the menu. Items: Edit, Cut, Copy, Paste, Delete, Quit.

class=context-menu-one (3 elements) data-testid=ctx-target · ctx-target-2 · ctx-target-3 menu=ul.context-menu-list items=li > .context-menu-item > span

No menu interaction yet. Right-click a box.

What students should practise

Right-click span.context-menu-one using click({ button: 'right' }).
Read every menu item label via locator('ul.context-menu-list span').allInnerTexts().
Click Copy using getByText('Copy', { exact: true }).
Confirm the disabled Paste item refuses to fire (aria-disabled + .is-disabled).
Right-click outside the targets — assert no menu opens.

Playwright solutionRight-click + read items + click Copy. 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/context-menu.html');

  // 1) right-click the first .context-menu-one span
  await page.locator('span.context-menu-one').first().click({ button: 'right' });

  // 2) read every visible menu item
  const allOptions: string[] = await page
    .locator('ul.context-menu-list span')
    .allInnerTexts();
  console.log(allOptions);

  // 3) click Copy
  await page.getByText('Copy', { exact: true }).click();
})();