Playwright中如何点击Frame内按钮在新标签页打开链接？

你遇到的问题本质是目标a标签的href="#"，实际跳转逻辑由JavaScript实现，模拟Ctrl+点击的方式对这种场景无效——页面JS通常不会监听Ctrl+点击来触发新标签页跳转。以下是几种可行的解决方法：

方法1：监听弹窗事件捕获新标签页 #

这是最可靠的方案，直接捕获点击后页面JS打开的新标签页：

// 预先监听popup事件，等待新标签页创建
const popupPromise = page.waitForEvent('popup');

// 点击iframe内的目标按钮
await page.frameLocator('iframe[name="entity_browser_iframe_eb_banner_slides"]').locator('#edit').click();

// 获取弹出的新标签页对象
const popupPage = await popupPromise;

// 等待新标签页加载完成，后续可对其进行操作
await popupPage.waitForLoadState();
console.log('新标签页地址:', popupPage.url());

方法2：直接获取跳转URL并手动打开新标签页 #

如果能从页面JS逻辑或元素属性中拿到跳转目标地址，可手动创建新标签页打开：

const frame = page.frameLocator('iframe[name="entity_browser_iframe_eb_banner_slides"]');

// 执行页面内的JS，获取实际跳转URL（需根据页面实际逻辑调整）
const targetUrl = await frame.evaluate(() => {
  const linkEl = document.querySelector('#edit');
  // 示例：如果跳转URL存在于元素自定义属性中
  return linkEl.dataset.targetUrl || '';
  // 或如果点击逻辑是调用某个函数，可直接执行函数获取URL
  // return window.getEditLinkUrl(linkEl);
});

// 成功获取URL后，手动打开新标签页
if (targetUrl) {
  const newPage = await page.context().newPage();
  await newPage.goto(targetUrl);
}

方法3：模拟右键菜单打开（兼容性较差） #

如果页面支持右键菜单的“在新标签页打开”选项，可尝试模拟右键点击并选择对应选项：

const frameLocator = page.frameLocator('iframe[name="entity_browser_iframe_eb_banner_slides"]');

// 右键点击目标按钮
await frameLocator.locator('#edit').click({ button: 'right' });

// 点击右键菜单中的“在新标签页打开链接”选项（需根据页面菜单文本调整选择器）
await page.locator('text="在新标签页打开链接"').click();

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