如何用Playwright实现点击按钮新开标签页及简化方案需求

嘿，我来帮你把这个Playwright的实现简化一下～你的需求是点击页面按钮（比如Gmail按钮）在新标签页打开对应页面，现有代码其实可以更简洁，而且有些地方可以更贴近真实用户的操作逻辑。

先给你看优化后的完整代码：

let browser, page, context;
describe('Check the main page view', function () {
  before(async () => {
    // 既然只测试chromium，直接启动即可，不用循环冗余的浏览器类型
    browser = await playwright.chromium.launch({headless: false});
    context = await browser.newContext();
    page = await context.newPage();
    await page.goto(baseUrl);
  });

  after(async function () {
    await browser.close(); // 这里加上await，确保浏览器完全关闭
  });

  it('should open target page in new tab when clicking the button', async () => {
    // 核心简化：直接点击元素，同时等待新页面触发
    const [newPage] = await Promise.all([
      context.waitForEvent('page'), // 监听新页面创建事件
      page.click(tax, {target: '_blank'}) // 点击时指定在新标签页打开
    ]);

    await newPage.waitForLoadState();
    console.log(await newPage.title());
  });
});

几个关键的优化点： #

• 去掉不必要的浏览器循环：你代码里循环了['chromium']但只用到这一个浏览器，直接启动就行。如果之后要测多个浏览器，建议用参数化测试（比如Mocha的each），而不是在before里循环，那样会重复创建上下文和页面。
• 简化新标签页打开逻辑：不用手动获取href再调用window.open，Playwright的page.click支持target: '_blank'选项，完美模拟用户点击链接在新标签页打开的行为，既简洁又符合真实操作流程。
• 规范测试结构：原来的操作代码直接写在describe根下是不符合Mocha测试规范的，要放到it测试用例块里，这样才能正确执行和报告结果。
• 完善资源清理：browser.close()是异步操作，要加await确保浏览器完全关闭，避免残留进程。

另外补充个小细节：如果你的目标元素本身就是带有target="_blank"属性的链接，那连{target: '_blank'}都不用加，直接page.click(tax)就行，Playwright会自动识别并处理新标签页的打开～

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