Playwright JS：如何不通过截图识别右键菜单选项及获取选择器

1. 定位右键菜单容器 #

右键点击目标元素后，网页自定义的右键菜单通常有明确的DOM结构，优先通过ARIA角色定位（符合无障碍规范的页面普遍使用）：

• 右键菜单容器：[role="menu"]
• 单个菜单项：[role="menuitem"]

如果页面未使用ARIA角色，可通过浏览器DevTools审查菜单DOM结构，获取其class/id等标识作为选择器（比如常见的类名context-menu、right-click-menu）。

2. 获取所有菜单项文本 #

右键点击后先等待菜单加载完成，再批量获取所有菜单项的文本内容：

// 右键点击目标元素
await page.locator('#your-target-element').click({ button: 'right' });

// 定位右键菜单并等待其显示
const contextMenu = page.locator('[role="menu"]');
await contextMenu.waitFor({ state: 'visible' });

// 获取所有菜单项的文本
const allMenuTexts = await contextMenu.locator('[role="menuitem"]').allTextContents();
console.log('所有菜单项:', allMenuTexts);

若菜单通过class定义，替换选择器即可：

const contextMenu = page.locator('.context-menu');
const allMenuTexts = await contextMenu.locator('.context-menu-item').allTextContents();

3. 定位并点击具体菜单项 #

根据文本直接定位目标选项：

// 点击文本为"复制"的菜单项
await contextMenu.locator('[role="menuitem"]', { hasText: '复制' }).click();

// 或使用文本匹配选择器简化写法
await contextMenu.locator('[role="menuitem"]:text("复制")').click();

如果存在重复文本，可结合元素的其他属性（如data-action、专属class）精准定位：

await contextMenu.locator('[role="menuitem"][data-action="copy"]').click();

内容的提问来源于stack exchange，提问作者awhisler