如何在Playwright TypeScript中实现复制链接后粘贴到新标签页地址栏？

核心思路是触发复制操作后读取剪贴板内容，再创建新标签页导航到该URL，以下是具体实现：

完整代码示例 #

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

test('复制链接并在新标签页打开', async ({ page }) => {
  // 1. 导航到目标页面
  await page.goto('你的目标页面URL');

  // 2. 点击「复制链接」元素（选择器需根据实际页面调整）
  await page.click('text=复制链接'); 
  // 若元素有特定class或属性，也可改用CSS选择器，比如：await page.click('.copy-link-btn')

  // 3. 从剪贴板读取复制的URL
  const copiedUrl = await page.evaluate(() => navigator.clipboard.readText());

  // 4. 打开新标签页并导航到复制的URL
  const newPage = await page.context().newPage();
  await newPage.goto(copiedUrl);

  // 可选：验证新页面是否正确加载
  await expect(newPage).toHaveURL(copiedUrl);
});

关键注意事项 #

• 选择器适配：page.click的选择器必须匹配页面上「复制链接」元素的实际定位，比如元素是带data-action="copy-link"属性的按钮，可改用page.click('[data-action="copy-link"]')。
• 剪贴板权限：部分环境可能需要提前配置剪贴板权限，可在创建浏览器上下文时添加：

  const context = await browser.newContext({
    permissions: ['clipboard-read', 'clipboard-write']
  });
  

• 非原生复制兼容：如果网站通过自定义JS写入剪贴板而非原生复制事件，上述剪贴板读取方法依然有效；若读取失败，也可直接从元素属性提取URL跳过剪贴板步骤：

  const linkUrl = await page.getAttribute('text=复制链接', 'href');
  const newPage = await page.context().newPage();
  await newPage.goto(linkUrl!);
  

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